React JS and Vue JS are both great for different reasons (updated for 2020)
TLDR; VueJS seems to be more beginner-friendly, whereas React is constantly pushing new innovations. Either one is a solid choice.
After working with React for about 3 years, I had the opportunity to try out Vue JS on a new project in 2017. At the time, I was reluctant to have to learn a new framework, but after a couple months working with the VueJS framework, its advantages became apparent. So, in 2017, I wrote this article listing the benefits of VueJS over React:
- VueJS uses regular HTML and CSS syntax in single file components, which is easier to grasp for beginners or for people who don’t code Javascript, like designers.
- In 2017, Redux was the default way of managing state in React, and while Redux is a great library with many advantages, it can be quite verbose even to realise a simple task.
In 2017, there was a general sense that React was getting a bit too complicated and verbose for what is was doing, and that Vue would provide a leaner experience. But things change fast in the Javascript world. Since then, React has introduced hooks, which allow you to code without using classes , and increases the usefulness of functional components. With hooks, you can easily add state to a component, without the need to use a class or to involve Redux. With the Context API, it is also possible to avoid passing props through a long chain of child components, aka “prop drilling”. So two of the main reasons for React’s potential verbosity have been addressed.
In 2020, I started working on a new project using React. I was excited to get a better understanding of how the framework has evolved in the past couple years. It is safe to say that most of my concerns of 2017 regarding React have been adressed, I especially enjoy using hooks.
Honestly, I am quite impressed by how the React team has been able to update the framework to keep it relevant, and on the bleeding edge of innovation, without breaking backwards compatibility. Other frameworks have adopted hooks, but as far as I know, as of 2020, React Suspense, a specific API to handle asynchronous loading of pages, and React fiber, to prioritize animations’ rendering, have no equivalent in other frameworks. Feel free to correct me in the comments if I missed something.
So why would anyone decide to use VueJS? If anything VueJS’s popularity has skyrocketed since 2017, it has only become more ubiquitous. Many companies and CTOs I’ve talked to explained to me that their decision to go with VueJS comes down to its greater perceived ease-of-use and beginner-friendliness. Say you are in a situation where you are not sure that you will be able to hire enough senior front-end developers, and you might have to ask a backend developer to code some components. These developers who did not have a lot of training in Javascript might still be able to get the job done in VueJS. And I’ve seen it happen first-hand, in a team where a front-end developer had just left, or on a sprint in which there were more front-end stories to complete than backend stories, backend PHP developers were asked to write VueJS components. With VueJS using regular HTML and CSS syntax in its single file components, these developers who understand the basics of frontend can still get some work done, even though it is obviously a less-than-ideal match.
In the past two years, on at least 3 occasions, decision-makers have told me they decided to go with VueJS because they were not sure they would be able to hire skilled and experienced Javascript developers, and believed that a junior developer, or a backend developer, could have an easier time with VueJS. The two frameworks still follow different paradigms, where VueJS tries to slot itself into existing web technologies, whereas React has more of an everything-in-JS approach. In large organizations, a team will often also choose to use the same framework that a different team of the same organization is already using, which makes sense.
As a side note, I recently tried to rewrite using Web Components a library that I originally wrote in VueJS. The objective was to see if it was possible in 2020 to write front-end Javascript components without using any framework. The answer is that, yes, it is possible to write components without using a framework, but, it is very cumbersome, and the resulting code will be harder to read and to maintain than using either React or Vue. Also, the components wrote using only Web Components technologies such as Shadow DOM will only work in modern browsers. The main sticking point I had was event handling. In React you can add the “onClick” attribute to a tag, and in Vue you can add the “@click” attribute, for example. However, using only native browser APIs, you need to first create the HTMLElement, and then manually attach an event listener to it. This is very cumbersome. After this experiment I can safely say that, whether you chose Vue or React or even Angular, in 2020 you will probably reach higher productivity using a JS framework than trying to code the application without using any framework.
In conclusion, if I wanted to stay closer to web technologies such as HTML and CSS, for example because the people I expect to have on the team will be more familiar with these, then VueJS would probably be the better choice. On the other hand, if I wanted to be able to try out the latest features that a JS framework can provide, as of 2020 I would probably pick ReactJS. It is both a blessing and a curse in the Javascript community that so much innovation is happening at such a rapid pace, and it is impossible to say with full certainty whether any of these frameworks will be replaced in the coming years by an even better one, but as of 2020 they are both great options, and will enable you to get your app running in an efficient way.
