Vue.js Vs React.js - Our comparison

In this article, we will draw a comparison between Vue.js and React.js, not with the aim of questioning Facebook’s framework, but rather to highlight the promising results of Vue.js. Angular was deliberately excluded because it is of a different nature : it is a comprehensive framework with no (or only limited) transversal modules.

Logo Vue.js and React

Vue.js is an open source framework developed by Evan You that builds on the innovative trend of JavaScript technologies using Server Side Rendering (SSR). But Vue.js is not just yet another framework. It was created in 2014, only one year after React.js, and despite the latter having received significant media attention, Vue.js is still a serious contender. Last summer, it even surpassed the star count of Facebook’s framework on GitHub.

Dan Abramov can tease all he wants, but Vue.js is very similar to React.js. It is also based on the Virtual DOM, which eliminates the time-consuming step of parsing the Dom. Its code is organized into a reactive, component-based structure. It uses an isomorphic approach and can also manage a store.

Framework

React.js and Vue.js are also frameworks, albeit much smaller. In order to use them, other frameworks are also needed. Project development can therefore prove long and challenging, because of the need to achieve a stable combination. In response to this, frameworks have been introduced to help speed up the implementation of operational, up-to-date software architectures and, most importantly, to facilitate their maintenance.

Logo NEXT and NUXT While React.js has the Next.js framework (~30k stars on GitHub) with a package that includes routing and transpilation, Vue.js adopted the same approach with Nuxt.js (~15k stars on GitHub). Both frameworks help reduce the learning curve and make it possible to start SSR projects more quickly.

Popularity

The JavaScript ecosystem evolves so fast that it is worth considering whether a framework that requires significant time and effort will still exist in the future. After all, today’s high-performance library might not last over time.

Just like knowing who created the technology, its popularity is an essential factor in judging the reliability of a new framework over time.

The popularity of React.js is absolutely indisputable, but the figures show that Vue.js is enjoying growing recognition and could eventually enjoy the same success as React.js.


React.js	Vue.js

29,150 dependencies	7,883 dependencies

However, with regard to their frameworks, the gap is widening between their GitHub star counts, but less so in terms of usage and dependencies.


Next.js	Nuxt.js

248 dependencies	71 dependencies

Strategy

From a commercial perspective it is a close race between the two frameworks, with the only notable difference being that React.js is supported by a web giant and that its devtools and libraries are undoubtedly more advanced and mature.

Technical Comparison

This point is subject to heated debate. I recommend reading this article written by Vue.js, in which it compares itself in particular to React.js. However, not all the points made are equally clear. I have listed below the different points that I felt were incomplete or not sufficiently nuanced.

Learning Curve

The article states that React.js is known for its steep learning curve, and Vue.js prides itself on having reduced this curve significantly. In my opinion, this statement should be nuanced because React.js faced the tough challenge of revolutionizing front-end design (splitting applications into components, polymorphism, etc.). As a result of its success, many young front-end developers were trained and naturally had to learn NodeJs and the many Js libraries. Vue.js did not have to undertake these profound changes. Developers who learn Vue.js already have experience with NodeJs. Besides, the React.js library is very small (171kb vs. 449kb for Vue.js) and very easy to use if you strictly keep within its scope. What is probably not as easy to learn, however, is how to embed it in an ecosystem of Js libraries — but not everyone can become a software architect overnight.

CSS

Reading the article by Vue.js gives the impression that React.js uses a specific approach that is not in line with the CSS philosophy. In fact, React.js is quite permissive and the way CSS is used from one project to another depends entirely on choices made by the architect. Vue.js uses a single implementation approach, which has its pros and cons. It allows for uniform implementation and therefore increases readability and minimizes the assimilation phase of new Vue.js projects. But you can’t stray from the beaten path. There is only one possible approach, so long as it meets your technical requirements.

Template vs. Jsx

Vue.js reintroduces templates with a .vue extension, while React.js had standardized everything in Js. Vue.js argues that the templating language can be mastered faster than with Jsx. This is highly debatable. Templating is a very standard approach in the development world. In a three-tier architecture, this means that the presentation layer will naturally be separated from the other layers.

However, it is entirely possible, and even recommended, to do the same thing as with React.js. While it may be too permissive, React.js makes it possible to split connected components using Higher-Order Components (HOCs). In the end, the HTML code is more compact with Vue.js but the dynamic parts that clutter the HTML code in Jsx are comparable to the ones present in Vue templates, and for integrators it doesn’t make much difference. Especially with the removal of the className attribute (non-existent in HTML), which will be replaced by the “class” HTML attribute in the near future.

Vue.js React.js

<ul id="example">
 <li v-for="item in items">
 {{ item.message }}
 </li>
</ul>

<ul id="example">
{items.map({(id, message}) => (
<li key={id}>
{{ message }}
</li>
)}
</ul>

<span style="color : #333333 ; font-family : Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif ;"><p v-if="seen">Now you see me</span>

<span style="color : #333333 ; font-family : Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif ;">{seen ?<p>Now you see me</p>:null}</span>

Future Developments

Evan You introduced version 3.0 of Vue.js, which is expected to be released some time in 2019. New features include :

a codebase entirely written in Typescript ;
complete decoupling of the observer and scheduler ;
an improved observation mechanism, with easier debugging ;
and IE11 will still be supported, although in a different build with performances closer to the previous version.

Dan Abramov is more vague about the future of React.js — which he calls “React Fire”. He opened the discussion in a GitHub issue, highlighting the following points :

bug resolution : no longer react to the input of a value in a form ;
improved event management : attach events to the React root rather than the document ;
a DOM that increasingly does away with elements specific to React.js (the className attribute will be replaced by class) ;
IE11 will also continue to be supported, but with degraded React.js performance.

To summarize, both frameworks are working on performance, a smaller and more efficient codebase, and they are gradually shifting away from older browsers like IE11.

Vue.js Vs React.js – Our comparison