The front-end is a central battleground for JavaScript—as various frameworks contend for dominance in developing user interfaces (UIs). Two combatants that are constantly struggling to outdo each other are Vue.js (commonly referred to as Vue) and React (also referred to as React.js or ReactJS).
In this article, we’ll review the two UI frameworks so that you can determine the one that best suits your use case in 2019 (and beyond).
Background
Vue.js was created by Evan You, an ex-Googler, in February 2014. He was motivated by the desire to create a framework that encapsulates the best front-end development approaches so that web applications can be versatile, performant, and faster.
From the onset, Vue has been a true open source project, largely depending on the community, crowdfunding, and contributors to release new features. It operates under the MIT License.
On the other hand, React was created by a Facebook employee in 2011. Although it was initially designed to target some specific needs at Facebook, the framework was open-sourced in May 2013, making it freely available to the public. Currently, it also operates under the MIT License. The framework’s corporate backing, particularly from such a major player in the tech industry, has propelled its continuous development over the years. Here is a table that summarizes the status of Vue.js vs React in 2019.
Architecture
React and Vue have well-designed architectural structures that make them useful in creating adaptable UIs and sophisticated single-page applications. Generally, the two frameworks are similar in scope with some shared features.
Here are some common features in both React and Vue:
- Utilization of the virtual DOM to accelerate performance by avoiding heavy DOM manipulation;
- Provision of reactive and composable view of components to enhance the development process;
- Concentrating on the core library such that the concerns for state management, routing, and others are handled separately.
In spite of their similarities, there are subtle differences that make each framework to outshine the other in a number of ways.
For example, one of the major differences between Vue.js and React.js is the syntax for the view layer. React depends on JavaScript Expressions (JSX), a declarative XML-like syntax, that let developers create self-contained components that define how the UI should look like. Although it’s possible to use React without JSX, most developers use JSX for templating because it assists in debugging and enables quicker optimization when compiling code to JavaScript.
On the other hand, Vue uses HTML templates by default—but it also offers support for JSX. The HTML-based templates make building Vue applications much easier, especially to developers who are already familiar with HTML.
Learning Curve
In the Vue.js vs. React debate, the former is often flaunted for being easier to learn. Since Vue.js traditionally separates the concerns for HTML, CSS, and JavaScript, it provides a natural way of reading and writing code, which makes it easier to learn, especially to less experienced developers. This way, transitioning to Vue from other web technologies is easier and less frustrating.
For example, here is the code for displaying “Hello World” in Vue:
<!DOCTYPE html>
<html>
<head>
<title>My First Hello World in Vue</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="start">
{{ hello }}
</div>
<script>
new Vue({
el: '#start',
data: {
hello: 'Hello world from vue framework'
}
});
</script>
</body>
</html>
As well as in React:
<!DOCTYPE html>
<html>
<head>
<title>My First Hello World in React</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Hello extends React.Component{
render(){
return(<h1>Hello world from react framework</h1>)
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('app')
);
</script>
</body>
</html>
As you can see above, starting to use Vue.js is much simpler. After providing a single script tag, you’ll be up and running. You can make the most of Vue’s features without having to learn JSX, build systems, or ES2015+. However, before you can start using React, you need to know how to use JSX and other technologies, something which steepens its learning curve.
Fortunately, there is extensive documentation, vibrant community, and several resources to assist you in getting started using the React JavaScript library with ease. Since it’s backed by Facebook, the largest social media platform in the world, React has a dedicated team that constantly updates its documentation and creates how-to tutorials to make the library easier to consume.
Unlike React, Vue does not have any significant corporate backing. However, it also has an active community that is dedicated to making the framework easier to use. Nonetheless, when learning React, you’re likely to get quick community assistance than when learning Vue.
Popularity
In terms of popularity, React beats Vue. According to the Stack Overflow’s Developer Survey 2019, React.js is the second-most popular web framework, at 31.3%. Vue.js is ranked 7th, at 15.2%.
Another ranking tool gives React an overall score of 96 and places it as the most popular web framework—while Vue is ranked 7th with a score of 91.
Job Market
The demand for React in the job market is huge. Because it’s popularly used for creating front-end applications, it has a larger market share than Vue. Furthermore, since React Native allows for the creation of Android and iOS applications using the same React component architecture, developers with React skills are highly sought after.
Although Vue is also trying to venture into cross-platform development using Weex, a UI framework developed by the Alibaba Group, the technology is still immature and has not been battle-tried as React Native. The absence of robust cross-platform capabilities has greatly diminished Vue’s job prospects.
In fact, according to HackerRank’s 2019 Developer Skills Report, the hiring demand for Vue and React are at 18.47% and 38.38% respectively.
Furthermore, React developers also earn a higher salary than Vue developers. According to one survey, Vue developers make an average of $62,400 per year while React developers make an average of $73,600 per year.
Conclusion
Eventually, the decision to choose either Vue.js or React for your UI development needs depends on your current requirements, capabilities, and preferences. If you are looking for a lightweight, simple, and easy to learn JavaScript web framework, then Vue may be the best go-to option.
On the other hand, if you are looking for a popular, mobile-friendly, and performant framework for developing complex applications, then React may best serve your needs.
Happy {React || Vue} coding!
🤔 What do you think?