I decided to use my
bus arrival web app as a basis of comparison and rebuilt it using the Vue framework. The CSS and styling all remain the same. Visually, it is the same app. The only difference is how it is written. Would you even know if it is React or Vue behind the scenes? What if it is changed every other week? I can already hear the cries of You monster.
Enough jokes! Here is the latest implementation of the web app, which is basically a reused screenshot from the last time. Just kidding! This is a fresh screenshot. Or is it?
What struck me about the difference between the
first version and the second version was how short the code was. The
Would Vue really reduce the number of lines I had to write? Was it
better? I had to find out. Getting started
As part of the core tools, Vue has a wonderful tool called
vue ui that creates a graphical interface to not only set up, but also to configure and run your app. You can configure the starting components for your app, add plugins written by the community for Vue, and start debugging without ever having to touch the command line. This is wonderful for a complete beginner as all the options are laid out in front of you.
For React, you have the
start-react-app, which generates a generic React template and is used in the command line. This is a fast way to scaffold your app and to get started, although I prefer using a simpler template based on
parcel rather than
I was a bit skeptical of the
vue ui tool at first, but then I quickly came around to the benefits of being able to see and set all the configuration options. You can definitely do the same with a decent text editor, but I found it easier to understand the project as a whole through the graphical configuration window. It also provides useful statistics on how fast the page loads under different networks. However, I found the experience a little buggy, and it sometimes errored out without any visual indication on the UI.
Data binding is the task of linking an element in your
HTML code, which can be a number, a word, or element, to a variable in your
React does data binding in a very explicit fashion. If there is any data that you want to store and update, you will need to store it as a stateful value with
useState, which is a function that returns the stateful value, and a function to update it. You cannot update the value directly.
React update loop
Therefore, in order to update an element on the page, you'll always need to call a function that updates the stateful value. If you change the element on the page without calling the update function, the value (Data) will not change.
Vue does two-way data binding. That means that a change in the variable in the
Vue two-way data binding
With regards to the bus app, I found Vue was slightly easier to write than React.
Both React and Vue allow you to create components and add it in similar ways to an existing HTML template.
This is great because it helps to encapsulate code that belong together, making the application easier to manage and allowing the creation of general-purpose, reusable components.
React and Vue differs in component design. In React, components are
HTML elements. However, for Vue, components are split up into
CSS can also be scoped to just that element, so the design of the component can be readily compartmentalized instead of being spread across multiple files.
Which do I think is better? I think both React and Vue have their own charm. In terms of code complexity, within the context of my app, it is roughly the same, with Vue having a small edge in terms of clarity of the overall structure. The number of lines written is about the same in both technologies. However, I do feel that React has an edge over Vue if you consider the mass of tutorials, articles, and StackExchange questions that have been written, simply because it has been around for longer.
These two technologies are roughly equal, with small technical benefits over the other. However, my advice is that once you pick one,
do not spend time learning the other. Because the functionality is approximately the same, you shouldn't waste time relearning the same concepts (unless you are paid to do so). Instead the time can be better invested in gaining mastery of the framework that you have chosen.
Ultimately for me I found Vue to be quite enjoyable to work with and is something I look forward to investing more time in the future.