Vue vs React: Which is the better framework?

When it comes to picking Javascript frameworks and libraries, developers are presented with many options yet React and Vue prove to be the popular choice.

The challenging part is deciding to use React or Vue. They are similar in a couple of ways, both use a Virtual DOM and 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 developers and the growth of the business.

Learning Curve: React vs Vue

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 need to grasp a lot of information just to get things done.

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

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 want to adopt that style.

Vue is also easier to get accustomed to because it picked out the good parts ofReact 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.

Vue vs. React Performance Test: 2018  

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.

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

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, forlarge scale SPAs where manycomponents 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.

Sign up to receive tutorials on Vue and React.

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 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 areact 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 nativeMobile 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-platformUI 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 125,000 questions on StackOverflow. It also has over 50,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 177,500 stars on Github, a few thousand stars less than Vue.

Analytics from GoogleTrends show that in comparison to Vue, React has had about 85% search relevance over the past 12 months.

Source: GoogleTrends: Feb 2018 - Feb 2019 Evan You owns Vue.js and manages it with his team. It became known to the community in 2014. The community is growing but is nowhere close to React just yet, but it is really promising. There are more than 66,000 questions on StackOverflow tagged Vue.js, and there are about 14,000 npm packages. Vue has above 122,000 stars on Github.

Source: StateofJs-2018

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, from the report of  StateofJs-2018 above, there are a lot of developers who are increasingly interested in learning Vue. This could mean that in a few months or years, the Vue developer count might drastically 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 ifCTOs introduce Vue.js as part of their developer stack. 

Vue offers clarity resulting in predictions that the framework will equate React and perhaps become the first choice for developers.