Dominik GuzyUpdated: 07/01/2020
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.
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.
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:
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.
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
– 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
The same component in React is slightly different:
As you can easily see, there are few differences between those files:
class– using JSX with React.js forces us to use
classNameattribute for CSS class, because
statein React.js is immutable, you cannot change it directly. You have to use a particular method
state. Vue.js, on the other hand, uses mutable objects for storing data.
classwith necessary methods.
Next thing I would like to point is two-way data binding in Vue.js.
Employer data in Vue.js is built like that:
As you can see above,
In React.js, there is only one-way data binding. It updates the model first and then it renders the UI element.
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.
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:
React has the following advantages over Vue: