Vue vs React: Which is the Better Framework? (2021 Update)

Posted by Ben Rogojan on December 5, 2019

GSD

When it comes to picking Javascript frameworks and libraries, developers are presented with many options yet React and Vue continue to be two of the most popular choices.

The most challenging part is deciding whether to use React or Vue in your tech stack. The two frameworks are similar in a couple of ways. Both use a Virtual DOM and both possess a reactive and component-based structure. 

This article will articulate the strong-points and shortcomings of the two technologies, allowing more clarity into the popular frameworks and which one is most favorable to you as a developer and the growth of your business.

Cover Image: Vue vs React

Learning Curve: React vs Vue

React logo

React adopts the JSX format, where HTML is written in JavaScript. Although JSX is in line with functional programming, which is a pretty neat concept, developers are saddled with the responsibility of figuring out this new approach.

React is lean at its core, and is heavily dependent on other third-party components for effective use. This could also be a pain for developers since they may need to grasp a lot of new information just to get things done.

While React’s documentation is good, Vue’s documentation is largely considered better.

Vue.js logo

Vue is easier to learn compared to React. Vue separates concerns in a way that web developers are already used to, decoupling HTML, CSS, and JavaScript. It also allows the use of JSX, for developers who prefer to adopt that style.

Vue is also easier to get accustomed to because it picked out the good parts of React and Angular, thus making it easier for developers from either of the two backgrounds to fit in perfectly.

Vue documentation is also very well written and attempts to answer most (if not all) questions that could possibly come up.

Performance

Both React and Vue interact with the DOM; every time DOM elements are removed or added, updates are made to the Domain data. This interaction is a metric for measuring performance.

In the following table, all durations are in milliseconds.

Metric vue-v2.5.16-keyed react-v16.4.1-keyed
Create Rows
Duration for creating 1,000 rows after the page loaded.
182.1 ± 7.6
(1.0)
180.5 ± 7.3
(1.0)
Replace All Rows
Duration for updating all 1,000 rows of the table (with 5 warmup iterations).
158.8 ± 2.7
(1.0)
157.3 ± 2.0
(1.0)
Partial Update
Time to update the text of every 10th row (with 5 warmup iterations) for a table with 10,000 rows.
156.4 ± 9.8
(1.0)
81.9 ± 2.7
(1.0)
Select Row
Duration to highlight a row in response to a click on the row (with 5 warmup iterations).
10.6 ± 2.0
(1.0)
10.3 ± 2.1
(1.0)
Swap Rows
Time to swap 2 rows on a 1,000-row table (with 5 warmup iterations).
20.0 ± 2.9
(1.0)
106.5 ± 1.9
(1.0)
Remove Row
Duration to remove a row (with 5 warmup iterations).
54.2 ± 2.2
(1.0)
49.6 ± 0.8
(1.0)
Create Many Rows
Duration to create 10,000 rows.
1,603.2 ± 34.8
(1.0)
1,935.4 ± 33.6
(1.0)
Append Rows to Large Table
Duration for adding 1,000 rows on a table of 10,000 rows.
342.5 ± 6.0
(1.0)
268.6 ± 6.9
(1.0)
Clear Rows
Duration to clear the table filled with 10,000 rows.
191.9 ± 6.1
(1.0)
175.4 ± 4.1
(1.0)
Slowdown Geometric Mean 1.00 1.00
Performace data via Stefan Krause

From the chart above, we can see that React and Vue carry out the same manipulations within almost the same timeframe. The difference between the performance for Vue and React is almost negligible, as it’s just a few milliseconds different for most metrics.

This is proof that in relation to performance Vue and React are quite similar. 

See how ButterCMS works with any tech stack.

Tooling and Libraries

State Management

React can handle state management from within using setState() to set a component’s state. However, for applications with the possibility of increased complexity and robustness, developers use packages like Redux, Mobx and the React Context API to manage state. None of these packages are managed by the core React team.

Redux

import { createStore } from 'redux';
import reducer from './reducers';

const store = createStore(reducer);
function render() {
 ReactDOM.render( … );
}

store.subscribe(render);
render();

Vue, on the other hand, uses a `store pattern` for state management when the app to be built is relatively simple and small. However, for large scale SPAs where many components are in dire need of a shared state store, Vue provides a Flux like architecture called Vuex with a centralized store. 

Vuex

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
store.commit('increment')

console.log(store.state.count) // -> 1

Vuex is developed and managed by the Vue team and is tailored for Vue users. It is very specific in its state management abilities.

Routing

For routing, React uses the react-router library, which is also not managed by the React team. The react-router library smoothly synchronizes the components of an application with the URL.

React Router

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const Contacts = () => (
  <div>
    <h2>Contacts</h2>
  </div>
)

ReactDOM.render(
  <Router>
    <div>
      <aside>
        <Link to={`/`}>Home</Link>
        <Link to={`/contacts`}>Contact Us</Link>
      </aside>

      <main>
        <Route exact path="/" component={Home} />
        <Route path="/contacts" component={Contacts} />
      </main>
    </div>
  </Router>,
  document.getElementById('app')
)

Vue has a routing library called Vue-Router. The Vue Router is the official router for Vue, even though there are a few other third-party routers like page.js and Director, and it is extremely seamless to use with Vue.

Vue Router

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/contacts">Contact Us</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>
<script>

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(Router)

const Home  = {
  template: '<div>Home</div>'
}

const Contacts = {
  template: '<div>Contacts</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/contacts', component: Contacts }
  ]
})

new Vue({
  router
}).$mount('#app')
</script>

It is also possible to handle routing without any library, but this is only efficient for apps that need only simple routing.

CLI

For easy access to a development environment, React provides a CLI that makes it easy to start a react project. It is called create-react-app.

Vue provides a resource called vue-cli which gives developers the ability to quickly begin new Vue projects. The Vue CLI comes already customized, and lets you add plugins anytime during the development lifecycle.

Mobile and Desktop Development

React Native is React’s awesome platform for building native Mobile Applications that work for both Android and iOS. This is really awesome because React developers can leverage their knowledge to build mobile apps.

Vue, at the time of writing, is partnering with Weex, a cross-platform UI framework to develop a platform that would function like React Native. Presently, Vue has a NativeScript plugin called NativeScript-vue for building native applications in Vue.

For building cross-platform desktop applications, Vue can readily be used with Electron. Using the Vue-CLI as scaffolding, Electron-vue provides a boilerplate where internal configurations have already been taken care of.

Vue and React Community and Popularity

Being backed by Facebook, React has a very large community compared to Vue. Presently, React has over 288,000 questions on StackOverflow. It also has over 68,000 npm packages. 

React’s community, though large, is very fragmented because of the freedom given to developers to adopt whatever structure suits them. This liberty is the cause of an underlying confusion, hence the large number of questions recorded on StackOverflow.

React presently has 165,000 stars on Github, about 15,000 stars less than Vue's 180,000.

Analytics from GoogleTrends show that in comparison to Vue, React has an advantage in search relevance over the past 12 months.

React vs Vue - Google Trends
Data via Google Trends

Evan You owns Vue.js and manages it with his team. It became known to the community in 2014. The community has grown competitive with React over time and remains promising. There are more than 74,000 questions on StackOverflow tagged Vue.js, and there are about 24,000 npm packages. Vue has above 180,000 stars on Github.

Vue vs React: Popularity Over Time
Data via stateofjs.com

Discover how ButterCMS works with any tech stack.

Vue and React Jobs and Hiring

The large community base that React has and the number of questions on StackOverflow, translate to a large pool of React developers. React has more available developers in comparison to Vue.

However, as the report from stateofjs above indicates, there are also a lot of developers interested in learning Vue. Over the next few months and years, the Vue developer count will likely continue to increase.

A recent search on StackOverflow shows that a React developer could earn as much as $150k while a Vue.js developer could earn about $90k. It also shows that there are more React jobs than Vue jobs. 

Conclusion

React and Vue are very good JavaScript technologies, great choices and very useful for both small and large scale applications.

React offers flexibility, a hot job market and is as stable as Vue. Yet Vue is more structured, easier to figure out and set up, resulting in reduced project duration and overtime if CTOs introduce Vue.js as part of their developer stack. They both work really well with a headless CMS like headless Wordpress or ButterCMS.

Vue offers clarity resulting in predictions that the framework will eventually catch up to React and could possibly become the first choice for developers.

Sign up to receive tutorials on Vue and React.
    
Ben Rogojan

Ben works as a data scientist and technology consultant helping companies design, develop custom software as well as make good decisions on their future tech strategies. He enjoys writing and teaching others about all forms of technology wether it be about automation and machine learning models or CMSs.

ButterCMS is the #1 rated Headless CMS

Related articles

Don’t miss a single post

Get our latest articles, stay updated!