History and popularity
Let’s start with something non-technical and take a look at history of both libraries. React.js was initially released in March 2013. It is developed and maintained by Facebook. Vue.js was first released 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 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.
Templates – JSX vs “single file components”.
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 elements. That can lead us to conclusion, that the performance benchmarks should only be considered as 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 CSS framework.
Apps are composed of 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 message based on two text inputs.
Shall we see the code?
Let’s start with simple
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 special method
state. Vue.js on the other hand uses mutable objects for storing data.
- 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
classwith necessary methods.
Next thing I would like to point is two-way data binding in Vue.js.
Employer data in Vue.js is build 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 utilizing 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 great, powerful tools for creating 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.