Vue Tips for React Devs

A Tale of Two Frameworks: React and Vue

As a frontend developer, JavaScript frameworks have become an essential part of building applications. While opinions on the best framework vary, two popular choices are React and Vue. In this article, we’ll explore the differences between these two frameworks by building a simple application with Vue and comparing it to React.

The Problem

After moving to a new neighborhood, I found myself relying on the bus system to get to work. However, standing outside for a bus that never seems to come can be frustrating. I decided to build a simple app that would tell me how much time I had until the next bus, so I could quickly check it and run out the door.

The Solution

I chose to build the app with Vue, a framework I had not used in a while. The app would need to have two views: one for heading to work and another for heading home. It would also need to show information for the two bus lines I use to commute and display when the next bus is arriving at each station.

Approach

React and Vue have similar goals but differ in their approach. Vue takes a more template-like approach, similar to traditional MVC frameworks. React, on the other hand, feels like HTML-in-JavaScript.

Building the App

To build the app, I started by creating a new Vue project and setting up the necessary components. I used Vue’s Single-File Components (SFCs) to keep my code organized and easy to manage.

Key Differences

While building the app, I encountered several key differences between Vue and React:

• Conditional Rendering: Vue uses a more declarative approach with its v-bindings directive, whereas React uses inline JSX expressions.
• Rendering a List: Vue’s v-for binding makes it easy to iterate through a data object and create component instances. React uses the .map() method to achieve the same result.
• Rendering Children: Vue requires an extra step to register child components locally, whereas React makes it easy to import and use child components.
• Loading Component Data: Vue’s created lifecycle method is similar to React’s componentDidMount method.
• Managing Component State: Vue’s @toggled binding is similar to React’s onClick prop.

Conclusion

Building an app with Vue was an interesting exercise that forced me to think outside the box of my usual React workflow. While I still prefer React, I can appreciate Vue’s unique approach and features. Ultimately, the choice between React and Vue comes down to personal preference and the specific needs of your project.

Final Thoughts

• I prefer working with React due to its HTML-in-JavaScript approach.
• Vue would be easier for developers coming from a traditional MVC background to pick up.
• I would love to try building with Vue at a larger scale to really get a feel for it.

By exploring both React and Vue, developers can gain a deeper understanding of the strengths and weaknesses of each framework and make informed decisions about which one to use for their next project.