The article was originally published on Codica Blog.
Nowadays, every company aims to create a high-quality web solution within a short period of time. To put it into practice, the developers community is able to choose from many JavaScript libraries and frameworks and debates to find the best one.
If we look at Vue.js and ReactJS, at Codica we consider them as the most rapidly developing tools for front-end development for many reasons. We create various products using both Vue and React for multiple tasks. While these development tools can help create the same products and applications, both of them have pros and cons.
The purpose of this article is to compare Vue.js and ReactJS in many various aspects: from general information to technical features. Both these web development tools have mature communities, wide support and popularity, but Vue.js is a framework and React is a library. So, why do we compare oranges and apples?
Why Vue and React?
One of the key factors for the comparison was that Evan You, Vue.js framework creator, used ReactJS as a source of inspiration for new framework development.
I figured, what if I could just extract the part that I really liked about React and build something really lightweight without all the extra concepts involved? I was also curious as to how its internal implementation worked. I started this experiment just trying to replicate this minimal feature set, like declarative data binding. That was basically how Vue started.
— Evan You
These web development tools are particularly similar to each other. We can behold it even from Vue.js official documentation, where such similarities are displayed. The main initial common points are:
- Virtual DOM
- Reactive and Component Structure
- JavaScript usage
At first sight, both Vue and ReactJS have more similarities than differences. Let’s dive into other aspects to get more acquainted and compare the tools in detail.
Maturity
Analyzing the project development and trying to decide what should be used as an instrument to gain the result, you need to be careful while choosing the tools that have not yet matured or approved themselves.
When using immature tools, there exist certain risks:
- Bugs or vulnerabilities.
- It might not have a big knowledge base or community in case you need help.
Vue.js and React were released by a huge corporation and an experienced developer respectively, which give us the confidence of stability and huge community support in case we need a helping hand.
Let’s look at some facts, to begin with:
ReactJS was developed and released by Facebook in 2013 and is still being implemented in their own products like WhatsApp and Instagram. It is one of the most popular JS frameworks on GitHub with about 117,500 stars at the time of writing.
Vue.js was featured in February 2014 by Evan You, a former Creative Technologist at Google. Evan was responsible for UI/UX prototypes and creative experiments at Google Creative Lab in 2012–2014 and was working with React and Angular. Afterwards, he summed up his thoughts on these frameworks and created a fully lightweight framework within the same functionality.
Up to date, Vue is also one of the most popular frameworks to adopt in web development with 122,000 stars on GitHub.
Here is the GitHub Stars comparison history.
To conclude, Vue.js and React have mature history, support and popularity among developers’ community. All this brings an interest in comparing them from a technical side to discover the key differences in the development process.
Community and popularity
On StackOverflow, there are 115.900 questions within #reactjs. Moreover, about 50.000 npm packages are available for React developers at the moment of article writing.
ReactJS community is much bigger than that for Vue.js. However, the main problem refers to React’s fragmentary nature, so it’s more complicated to get feedback on common questions.
On the flipside, Vue is a progressive lightweight framework which allows you to develop solutions easy and fast. Vue.js is also much easier to learn, as it takes less time and the learning curve is much lower. However, it is more complicated to find Vue developers and to get future product maintenance.
Speaking about Vue.js popularity, there are about 27.000 questions on StackOverflow within #vue.js and about 14.000 npm packages available for Vue developers.
To compare the community support and popularity, let’s get acquainted with 2017 / 2018 Most Popular JS Frameworks Survey Charts created by State of JavaScript. They annually collect data from over 20.000 developers on topics ranging from front-end frameworks to testing libraries.
Source: 2017.stateofjs.com
Source: 2018.stateofjs.com
As you can see, React is far ahead the most popular JavaScript library with the biggest knowledge base, support, and community. All this means that you can find React developers much faster and future support will be much easier.
Development speed and cost
At the development commencement, you need to choose what JavaScript framework/ library to adopt. Any website or application can be created using both Vue and ReactJS. The matter is development speed and cost.
Development speed
Our experience shows Vue.js and React are particularly similar in development speed as there are many additional libraries, frameworks, and packages that help you build the application rapidly. Everything depends on the developers’ coding experience and skills that allow tilting toward ReactJS or Vue, but actually, the time estimates for the similar tasks are exemplarily equal.
Cost
The cost depends on many factors, such as developer experience and seniority level, location, etc, so it can vary greatly. To have some numbers in mind, we are adding the average cost from Codementor platform for both React and Vue.js.
ReactJS developers average rates:
Source: codementor.io
Vue developers average rates:
Source: codementor.io
Technical features
Tooling
React provides a third-party CLI tool called create-react-app that helps developers to accelerate such work aspects as application development, adding scripts, and installing necessary dependencies.
Before create-react-app was released, developers had to copy the Webpack-config and other .rc files from previous applications each time they started a new application, or configure everything manually. Without using create-react-app, you had to put the same configuration from one project to another. It did not take much time but was actually boring.
The create-react-app provides a CLI interface for building applications with a basic structure, it installs all the necessary dependencies, and adds scripts to the package.json to run, test, and build the application.
Indeed, ReactJS gains huge support for the main IDEs.
Vue-cli is a tool for quick project creation for Vue.js. Such projects have a ready-made structure, an installed configuration, as well as a number of basic files.
The main advantages of Vue-CLI:
- No blocking, plugins can be added anytime during the development lifecycle.
- Thanks to plug-ins with no settings, you can spend more time on development instead of customization.
- Easy to improve, since adjustment can be customized without “outliers”.
- Allows developers to create their own plugins and templates.
Flexibility
React centres around UI, so initially, you get the help in building UI components.
However, ReactJS does not provide you with state management. When you are dealing with React applications, you need to use Redux as a state management tool. To date, MobX is also gaining popularity as a ReactJS associate.
Moreover, speaking about React router — it is not an official package, but also a third-party one.
As a dynamic framework, Vue.js permits simply utilizing its most basic tooling to create an application, however if necessary, it additionally offers the vast majority of all the functionalities that you may require:
- Vuex for state management.
- Vue Router for application URL management.
- Vue.js Server-Side Renderer for Server-Side Rendering.
Vue is more intuitive than React both for small and large applications.
Mobile development
React Native helps React developers to build a mobile app — it is a framework for creating cross-platform iOS and Android applications using JavaScript. It appeared in early 2015 and is React-based. It does not use WebView and HTML technology, but native components have bindings in JS and are wrapped in React. Actually, iOS support for React Native is better than Android, but the dynamics of Android support are rather promising.
On the flipside, Vue.js is paired with NativeScript (NS) which allows you building cross-platform applications using XML, CSS, JavaScript. NativeScript solves the same problem as React Native mentioned above, but they have some differences.
- NativeScript syntax and implementation are much easier for a web developer to understand using HTML / CSS / JavaScript. XML usage is also similar to HTML in markup creation.
- NativeScript has direct access to native platform API.
To compare the popularity and developers community usage of both frameworks, let’s get acquainted with a State of JS 2018 Chart.
Also, here is a Google Trends Chart displaying the comparison table of React Native and NativeScript for the past 4 years.
Source: Google Trends
To conclude, React Native is much more popular and utilizable in the developers community that means a bigger amount of ready-made solutions are available for mobile development.
Component approach
Generally, both Vue.js and ReactJS implement the same component approach in development when you have one file for one component. There are still some different aspects interesting to discover.
React dislocates established best practices. For decades, developers have tried to separate templates and embedded Javascript logic, but in JSX they are again mixed. Maybe it sounds almighty, but you should listen to Peter Hunt’s speech “React: Rethinking Best Practices”.
He points out that the separation of patterns and logic is simply a technology division, not a responsibility. You must create components instead of templates. Components are reusable, integrable, and convenient for unit testing.
JSX is an optional preprocessor with an HTML-like syntax that is then compiled into JavaScript. Hence some oddities — for example, you need to use className instead of class, because the latter is a reserved keyword in JavaScript.
JSX is a great advantage for development, since you will have everything in the same place, and autocomplete and checks at the compilation stage will work faster. When you make a mistake in JSX, ReactJS does not compile the code and displays the line number in which the error was made.
Vue offers “single-file components”. This is like a compromise regarding the division of responsibilities — templates, scripts and styles are not in one file, but in three different, ordered sections. This means you get syntax highlighting, CSS support and the ability to easily use preprocessors like Jade or SCSS.
Various sources state that JSX is easier to debug because Vue does not show syntax errors in HTML. This is not the case since Vue.js converts HTML into render functions — therefore errors are shown without problems.
Let’s get acquainted with the same component created for a To-Do List application both in React and Vue to see the difference between ReactJS JSX and Vue.js templates.
Vue component structure:
<template><div class="ToDoItem"><p class="ToDoItem-Text">{{todo.text}}</p><div class="ToDoItem-Delete"@click="deleteItem(todo)">-</div></div></template>
React component structure:
**import React, {Component{ from 'react';import './ToDoItem.css';
class ToDoItem extends Component {render() {return {<div className="ToDoItem"><p className="ToDoItem-Text">{this.props.item}</p><div className="ToDoItem-Delete" onClick={this.props.deleteItem}>-</div></div>);}}
export default ToDoItem;**
Performance
To check the ReactJS and Vue.js performance, we turn to a great js-framework-benchmark that helped to compare both frameworks performance.
To summarize, React has excellent performance, but both ReactJS and Vue are pretty close to each other, compared to particularly slow or especially fast development tools (like Inferno).
State management
In general, both web development tools have similar approaches in managing the components’ state but still has some differences in immutability and other aspects. Let’s consider all of them.
It is difficult to create UIs, as states are present everywhere — data changes over time, which entails an increase in complexity. Certain ways of working with the state are of great help when the application grows and becomes more complex. For small applications, this might be a brute force, and something like Vanilla JS would be enough.
How does the state management work? Components describe a UI at a specific point in time. When data changes, the framework redraws the entire UI component — the data displayed is always relevant. We can call this idea “UI as a function”.
In other words: the application state is entirely in the object tree inside the unified storage. It helps to debug the application and some functionality becomes easier to implement. The state is in read-only mode and can be changed only through actions to avoid a race condition (also useful for debugging). Reducers are created to indicate how actions can transform a state.
Redux and Vuex
Generally, React is used within some kind of data flow library for applications. Redux is the most popular choice. A similar Vue data flow library is called Vuex. Indeed, the transition from Redux to Vuex is virtually painless, since the two libraries have much more in common than ReactJS and Vue.js themselves.
React is often paired with Redux. Redux describes itself in three fundamental principles:
- The only source of truth
- The status is read-only
- Changes are made using pure functions
The main difference is that Redux relies heavily on state immutability, due to the fact that Redux was created considering ReactJS. However, it is recommended to avoid mutating values that you use as a prop or state to optimize React performance.
Within a component’s stage change, it starts re-rendering a component entire subdirectory, beginning with root rights. To avoid unnecessary reruns of child components, you need to either use PureComponent or implement shouldComponentUpdate if possible. You may also need to use immutable data structures to make state changes more optimized.
In contrast, Vuex does not care about the immutability of the state.
In Vue, the dependencies associated with the component are automatically tracked during rendering, so the system knows exactly which components should actually be re-displayed when the state changes.
This leads to several differences in the way ReactJS and Vue.js components interact with the repository, and we would like to tell you more about it.
Redux data flow is fairly strict and simple. The component dispatches an action that is returned by the action creator. Then the reducer generates a new state based on what the action wants it to do. Finally, the component monitors store changes from the repository and can get access to the store using the connect() function.
Every action goes through the action creator. Although it is theoretically possible to fire an action directly from a component, it rarely happens. The syntax of the action prompts us to encapsulate logic in the functions of the action creator, even in the case of the most trivial actions.
Although the data flow in Vuex is quite similar, it is not as strict in the number of ways a component interacts with a state. First, the component can send an action. This is usually used to create asynchronous files, such as fetching data from the source code.
After that, the action makes a mutation. The mutation function, similar to the reducer, is the only one allowed to change the state. However, there is another way: a component can make a mutation directly, and sometimes it is very tempting to reduce the data flow, completely discarding actions.
To conclude, state management is the main difference between React and Vue.js. Vuex, like Redux, is a library whose creators were inspired by Flux. Unlike Redux, Vuex changes state instead of making it immutable and replacing it completely, as with the Redux reductors.
This allows Vue to automatically retrieve the data which alerts to be re-rendered when the state changes. Instead of using specialized reducers, Vuex allows you to organize the application state management using storages called modules.
React vs Vue: comparison summary
React
As articulated earlier, React is to be chosen in case you need to build up a complex web application, such as an e-commerce platform, marketplace etc.
Future maintenance and customization are much easier through the community volume as you can behold a large number of contributors and developers ready to build any application as their amount is exponentially greater than Vue.
An added reason for ReactJS is a huge amount of libraries and tools available to simplify and accelerate the development process. There is no need to write a function from scratch while the ready-made solution is available.
Vue
On the flipside, Vue.js is a good choice in case you are interested in creating lightweight and easy-to-fix applications. The learning curve is lower that allows mastering the framework in a short period of time and entering upon the application development.
Vue community is smaller than React but it is growing at warp speed that makes it possible to create the same solutions as using ReactJS. As the contribution volume grows, the number of tools and libraries available becomes larger, too.
To sum up all pros and cons, let’s have a look at the Vue.js and React comparison table.
As we can see, both Vue and React have powerful tools and features that help us in web development. However, while choosing what to adopt you need to bear in mind those differences presented in the table to make the right choice.
When to choose React or Vue?
Both web development tools can be implemented for any needs and requirements such as the creation of web applications, single-page applications, and user interface components.
To conclude, let’s sum up all the information, pros and cons of the mentioned web development tools to see which one will be a better choice for your business.
Here is the comparison table considering different factors to choose ReactJS or Vue.js:
To sum up, both Vue and React are powerful tools for creating complex web solutions as they can provide you with a great number of possibilities to feel comfortable within any task.
Whatever you choose — you cannot go wrong!
Originally published at www.codica.com.