React or Vue: Which Javascript UI Library Should You Be Using? The text needs to be over the wall.

React cemented its position as the king of front-end frameworks in 2016, a year that saw it grow rapidly on the Web and mobile, while firmly ahead of its main competitor Angular.

But 2016 was also an impressive year for Vue, with the release of Vue 2.0 and a huge buzz in the JavaScript community, as evidenced by the 25,000 extra stars on GitHub.

React and Vue are certainly very similar in scope: both are lightweight component-based frameworks that also focus on the view layer of the user interface. This can be used for simple projects, but can also be extended to complex applications using family buckets.

Because many Web developers want to know which framework they should use. Is one clearly better than the other? Or do they have their own strengths and weaknesses? Or are they basically the same?

Two frameworks and two advocates

In this article, I want to answer the above question with a fair and thorough comparison. The only problem is that I’m a Vue fan and I’m not objective at all. I used Vue heavily in my projects this year, raved about it on Medium and even posted a Udemy course

To balance my bias, I called on my friend Alexis Mangin, a great JavaScript developer and React fan. He’s also immersed in React, often working on Web and mobile projects.

Alexis asked me the other day, “Why do you like Vue so much and not React?” I didn’t know React well enough at the time to give a good answer. So I came up with the idea of taking a laptop one day and introducing each other to why we made our choices.

After a lot of discussion and learning from each other, we found six key points.

If you like building applications from templates (or want to), choose Vue

The default option for Vue applications is to put markup in the HTML file. Data-binding expressions use mustache syntax similar to Angular, and directives (special HTML attributes) are used to add functionality to templates.

The following example is a simple Vue application. It displays message and a button to reverse message:

// HTML <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div> // JS new Vue({ el: '#app', data: { message: 'Hello Vue.js! ' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join(''); }}});Copy the code

The React app, by contrast, doesn’t use templates and requires developers to create DOM in JavaScript with the help of JSX. Here is the same application implemented with React:

// HTML
<div id="app"></div>
// JS (pre-transpilation)
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello React.js!'
    };
  }
  reverseMessage() {
    this.setState({ 
      message: this.state.message.split('').reverse().join('') 
    });
  }
  render() {
    return (
      <div>
        <p>{this.state.message}</p>
        <button onClick={() => this.reverseMessage()}>
          Reverse Message
        </button>
      </div>
    )
  }
}
ReactDOM.render(App, document.getElementById('app'));
Copy the code

For new developers from standard Web development approaches, templates are easier to understand. But some experienced developers also like templates because they allow for better separation of layout and functionality, and use templating engines like Pug.

But using templates comes at the cost of having to learn all the HTML extension syntax, whereas rendering functions only require standard HTML and JavaScript. Rendering functions are also much easier to debug and test than templates. Of course, you shouldn’t miss Vue for this reason, as the option to use templates or render functions is available in Vue2.0.

If you like something simple and “just works”, choose Vue

A simple Vue project can run directly in a browser without translation, so using Vue can be as simple as using jQuery. Of course this is technically possible with React, but typical React code relies heavily on JSX and ES6 features such as Class.

The simplicity of Vue is even more apparent when it comes to programming, so let’s compare how the two frameworks handle application data (i.e., state).

React state is immutable, so it cannot be changed directly. Use the setState method in the React API:

this.setState({ 
    message: this.state.message.split('').reverse().join('') 
});
Copy the code

React compares the current state with the previous state to determine when to rerender and what to render in the DOM, so immutable state is required.

The data in Vue is mutated, so the same operation seems much cleaner.

// Note that data properties are available as properties of 
// the Vue instance
this.message = this.message.split('').reverse().join('');
Copy the code

Let’s take a look at how state management works in Vue. When a new object is added to state, Vue iterates through all of its properties and converts them to getter, setter methods. Now Vue’s response system keeps track of state, automatically rerendering the DOM when the contents of state change. Amazingly, Vue’s ability to change the state of a state is not only simpler, but its re-rendering system is also faster and more efficient than React’s.

Vue’s response system also has some drawbacks, such as its inability to detect attribute additions and deletions and some array changes. The React SET method of the Vue API is used to solve this problem.

If you want your application to be as small and fast as possible, choose Vue

When the application’s state changes, React and Vue both build a virtual DOM and synchronize it to the real DOM. Both have their own ways of optimizing the process.

Vue core developers have provided a benchmark test that shows that Vue’s rendering system is faster than React’s. The test method was to render a list of 10,000 items 100 times, with the result shown below.

From a practical point of view, this benchmark is only relevant to edge cases and is not often used in most applications, so it should not be considered an important point of comparison. However, page size is relevant to all projects, and here again Vue is ahead, with its current version compressed to just 25.6KB. To do the same with React, you need the React DOM (37.4KB) and the React with Addon library (11.4KB), which adds up to 44.8KB, almost twice the size of Vue. Double size doesn’t double function.

If you’re going to build a large application, choose React

Simple applications like the one implemented with both Vue and React at the beginning of this article may make a developer subconsciously more inclined to Vue. This is because template-based applications are easier to understand at first glance and run quickly. But these benefits introduce technical debt that can prevent applications from scaling to a larger scale. Templates are prone to run-time errors that are hard to notice and can be difficult to test, refactor, and decompose.

In contrast, Javascript templates can be organized into components with good decomposition and DRY code, which is more reusable and testable. Vue also has component systems and rendering functions, but React’s rendering system is more configurable and features such as shallow rendering are used in conjunction with React’s test tools to make code more testable and maintainable.

Meanwhile, the React immutable application state may not be neat to write, but it makes a lot of sense in large applications where transparency and testability become critical.

If you want a framework that works with both Web and native apps, choose React

React Native is a library that uses Javascript to build mobile Native applications (iOS, Android). It’s the same as React. Js, except instead of using Web components, it uses native components. If you learn React. Js, you’ll quickly learn React Native, and vice versa.

// JS import React, { Component } from 'react'; import { AppRegistry, Text, View } from 'react-native'; class HelloWorld extends Component { render() { return ( <View> <Text>Hello, React Native! </Text> </View> ); } } AppRegistry.registerComponent('HelloWorld', () => HelloWorld);Copy the code

The point is that developers only need a set of knowledge and tools to develop Web and mobile native apps. If you want to do both Web and mobile development, React has a gift for you.

Ali’s Weex is also a cross-platform UI project that currently uses much of the same syntax as VUe-inspired, and plans to fully integrate Vue in the future, though the timing and details of the integration are unclear. Because Vue makes HTML templates a core part of its design, and the existing features don’t support custom rendering, it’s hard to see how current vue.js can be as cross-platform as React and React Native.

If you want the biggest ecosystem, choose React

React is by far the most popular front-end framework. It has been downloaded more than 2.5 million times a month on NPM, compared with 225,000 for Vue.

Popularity isn’t just a shallow number, it means more articles, more tutorials, and more Stack Overflow answers, it also means more tools and plugins to use in a project, so that developers aren’t left alone.

Both frameworks are open source, but React was born on Facebook, is endorsed by Facebook, and its developers and Facebook are committed to maintaining React. Vue, by contrast, is the work of indie developer Yu Yuxi. Yu Creek currently maintains Vue full-time, and there are some companies that fund Vue, but it’s not as big as Facebook or Google. However, please rest assured to the team of Vue, its small size and independence are not a disadvantage. Vue has a fixed release cycle, and even more pellingly, Vue only has 54 open issues and 3456 closed issues on Github. As a comparison, React has a whopping 530 open issues and 3,447 closed issues.

If you’re already enjoying one, don’t change

To summarize, we found that Vue has the following advantages:

  • Flexible selection of templates and rendering functions
  • Simple syntax and project configuration
  • Faster rendering speed and smaller size

React has the following advantages:

  • Better for larger applications and better testability
  • Both Web and mobile native APPS are available
  • A bigger ecosystem, more support and better tools

However, React and Vue are both excellent frameworks that have more similarities than differences, and most of the best features are common:

  • Fast rendering with virtual DOM
  • lightweight
  • Responsive component
  • Server side rendering
  • Easy to integrate routing tools, packaging tools, and state management tools
  • Excellent support and community

Feel free to point it out in the comments if you think we missed something.