React.js and Vue.js – JavaScript libraries comparison

There is this popular Polish meme with monkey acting like a stereotypical man in his 50s. His name is Janusz, his car is 1.9 TDI version of well-known B5, he is proud of his moustache. He always says “it used to be [better]”. That adage is also true in JavaScript development. Back in 2006 jQuery was announced. It is widely used since then. Nowadays we have so many useful JS libraries or even frameworks, that choosing the right one for our projects is really overwhelming. I hope that this post will help you to find out if it really used to be better back then. The best way to determine that is by learning those new frameworks!
Today I would like to compare two great JavaScript libraries for frontend development – React.js and Vue.js. Yes, I know that Vue.js is a “framework”, but for simplicity, I am going to call it a “library”.

History and popularity

Let’s start with something non-technical and take a look at the history of both libraries. React.js was initially released in March 2013. It is developed and maintained by Facebook. Vue.js was first published in February 2014 by ex-Google employee Evan You.
Since then, React earned about 85k stars on GitHub and Vue nearly 80k. Monthly about 6 million developers download React.js package from npm. In comparison, we have over 1 million downloads of Vue.js package. Both packages are available under the MIT License. React has over 1k contributors on GitHub, while Vue has only 130.

Similarities

Both libraries handle small functions that receive an input and return rendered elements as output. We call those functions components. Consequently, we say that React.js and Vue.js are component-based.
To tell the truth, I really enjoy using ES6 with all its magic like spread operator, promises, classes and template literals. The best part comes now: both libraries use ES6, moreover, React focuses on using it.
One more thing to mention is that Virtual DOM is used in one and the other, mainly for performance reasons.
Last but not least, they both maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries.

Templates – JSX vs “single file components”.

For years developers were trying to separate UI templates and JavaScript logic. Usage of React’s JSX or Vue’s single-file components breaks up with that long-standing practices. Sounds terrible? Well, the new school says, that you should build reusable, composable and easy to test components rather than trying to separate logic and templates, which in fact is just separation of technologies, not concerns.
JSX is a syntax extension to JavaScript, recommended by creators of React.js as a visual aid when working with UI inside the JS code. It looks like this:
As you can see, JavaScript appears to be mixed with HTML, but it is not entirely right. JSX is an XML-like syntax extension to JS and is intended to be used by various preprocessors (transpilers) to transform these XML-like tokens into standard ECMAScript. At first, it seems wrong, but it is really powerful and developer-friendly.
Vue.js, on the other hand, uses single file components, meaning that templates, scripts and styles are in one file but in three different, ordered sections. Our beloved “Hello world!” component in Vue.js looks like this:

As you can see, React.js puts HTML-like tags in much more powerful JavaScript. On the other hand, Vue.js puts HTML next to JavaScript and CSS in a single file.

Performance

Both libraries have similar results in benchmarks, especially in terms of creating elements using virtual DOM. Vue.js is smaller and allocates less memory, React.js, on the other hand, is faster in terms of updating and re-rendering factors. That can lead us to a conclusion that the performance benchmarks should only be considered as a side note, not as a verdict.

Fight!

I have prepared two similar applications, one in React.js and the other in Vue.js. I would like to show you how things are done in one and the other.
For creating React.js application, I used create-react-app, and for Vue.js application – vue-cli with template webpack-simple. Both applications use bulma as a CSS framework.
Apps are composed of a few components:
– App – container of other components and header
– Counter – two buttons for incrementing and decrementing and a counter
– Markdown Editor – dead simple markdown editor and compiler using marked
– Sample Form – another simple component, which displays a message based on two text inputs.
Shall we see the code?
Let’s start with a simple Counter component.

The same component in React is slightly different:

As you can easily see, there are few differences between those files:

• className vs class – using JSX with React.js forces us to use className attribute for CSS class, because class is a reserved word in JavaScript
• state in React.js is immutable, you cannot change it directly. You have to use a particular method setState to change state. Vue.js, on the other hand, uses mutable objects for storing data.
• The obvious one – syntax. Vue.js uses three sections – one for HTML template, one for JS scripts and the last one for CSS styles. React.js mixes HTML and JS producing class with necessary methods.

Next thing I would like to point is two-way data binding in Vue.js.
Field containing Employer data in Vue.js is built like that:

As you can see above, data’s employer is bind to input. Changing input value changes also the JavaScript model.
In React.js, there is only one-way data binding. It updates the model first and then it renders the UI element.

As you can see, we need a method for handling changes made on our input element.
You can find both apps on my Github: here is Vue.js app and here is React.js app

Flux

Flux is the application architecture used for building client-side web applications. It complements view components by utilising a unidirectional data flow. It’s more of a pattern rather than a formal framework. Both React.js and Vue.js are widely used with libraries that implement Flux pattern. For React, it’s Redux, for Vue it’s Vuex.

Conclusion

Vue.js and React.js are magnificent, powerful tools for creating a frontend for your web applications. They have much in common, but there are some distinguishing differences.
Vue has the following advantages over React:

• it is smaller and faster,
• single file components allow us to use HTML, JS and CSS in terms of one reusable component,
• it is simpler in terms of syntax,
• easier learning-curve.

React has the following advantages over Vue:

• gives more flexibility in large apps developing,
• easier to test,
• huge community and list of ready-made components,
• developers are really well-paid.

And what JavaScript frontend library will you choose for your next project?