React or Vue: Which Web front-end framework should you choose?

Learning or to learn, with more, there will be more understanding, the development of the encounter when the choice is simple.

The author of this article also made a summary:

If you like to use (or want to use) the template to build the application, please use the Vue
If you like simple and "can use on the line" thing, please use Vue
If your application needs to be as small and fast as possible, please use the Vue
If you plan to build a large application, please use the react
If you want a framework that applies both to Web-side and native app, select react
If you want the largest biosphere, please use the react
If you're satisfied with one of them, there's no need to change it.

Original link: react or Vue: Which Web front-end framework should you choose?

In the 2016, react grew rapidly both on the web side and on the mobile side, steadily leading the augular of its main competitor, consolidating its position as the King of the front-end framework.

But Vue's performance in the year was equally dazzling. The release of Vue.js 2.0 has been a great response to the entire JavaScript community, as evidenced by its 25,000 star rise in the GitHub.

It has to be said that the scope of use of react and Vue is similar: it is a lightweight framework based on component-based, focused on building the user interface's view layer, both for simple projects and for large-scale complex projects using cutting-edge technology.

As a result, many Web developers are struggling to decide which framework to choose from. Whether the two can be divided into a good or bad. or the pros and cons of each of them is something that needs our attention. Or are they actually about the same as everyone else? two frameworks, two advocates

In this article I would like to answer these questions in a fair and comprehensive comparison. But here's the problem: I'm a vue, and I'm definitely biased. This year I've used a lot of Vue in the project, medium the benefits of Amway, and even opened an introductory course on Vue in Udemy.

To balance, I invited my friend Alexis Mangin to join the discussion. He is a good JavaScript developer and a react iron powder. Similar to mine, he also frequently uses react in various projects, including web-side and mobile-end projects.

One day he asked me: "Why do you like to use Vue, not react." Because I didn't know react so well, it was hard to give a good answer. So I suggested to him that we find a day to bring our laptops together to explore the benefits of our respective favorite frameworks.

Anthony (left) and Alexis (right) compare react and Vue in the Bull and Bear Café in Chiangmai, Thailand

After a lot of discussion and mutual learning, we have reached the following six key points: If you like to use (or want to use) templates to build applications, please use the Vue

The default option that Vue applies is to put markup in an HTML file. Data-binding expressions use a double curly brace (moustache) syntax similar to angular, whereas directives (special HTML attributes) are used to add functionality to the template.

The following is an example of a simple Vue application. It displays a message, and a button to dynamically reverse the 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 (');}}
);

Instead of using templates, the react application requires developers to create Dom in JavaScript using JSX. The following are the same applications 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 '));

Templates are easier to understand for new developers from standard web development. Even some senior developers, however, prefer to use templates, because templates can better separate features and layouts, and also provide the possibility of using template engines such as pug.

The price of using a template, though, is that you need to learn all the HTML extension syntax, and the render function (render function) only requires standard HTML and JavaScript to be used. and rendering functions are easier to debug and test than templates. However, you should not miss Vue because you have already provided options for using templates or rendering functions in Vue2.0. If you like simple and "can use on the line" thing, please use Vue

A simple Vue project can be used directly in the browser without translation, which makes it as easy to use Vue in a project as it is with jquery. Of course this is technically feasible for react, but the typical react code is more dependent on JSX and ES6 features such as class. And the simplicity of Vue is more deeply rooted in its design. Let's compare how these two frameworks handle the application data (that is, "state"):

The state in the react is immutable (immutable), so you cannot change it directly, but instead use the SetState API method:

This.setstate ({ 
    message:this.state.message.split ("). Reverse (). Join (") 
});

React determines when and how to render the contents of the DOM by comparing the current state to the previous state, so you need to use immutable state.

In contrast, the data in Vue is variable (mutated), so the same data variable can be modified in much simpler ways:

Note that data properties are available as properties of 
//The Vue instance
this.message = This.message.split ( "). Reverse (). Join (');

Let's look at how the state is managed in Vue: When you add a new object to the state, Vue traverses all of its properties and converts them to the Getter,setter method. So Vue's response system starts to keep track of that state, and the DOM is automatically rendered when the content of that state changes. It is admirable that the Vue operation is not only more concise, but its rendering system is actually faster and more efficient than react.

However, Vue's response system is still a bit of a pit, for example, it cannot detect property additions and deletions, and some array changes. This is done using the Vue API similar to the react set method. if your application needs to be as small and fast as possible, please use the Vue

When the state of the application changes, both react and Vue build a virtual dom and sync it to the real DOM. Both have their own way of optimizing the process.

Vue's core developers provide a benchmark test to show that Vue rendering systems are faster than react, and that specific benchmarks are set and compared to other frameworks, as described in vuejs.org. The test method is to render a list of 10,000 items 100 times, resulting in the following figure.

From a practical point of view, this benchmark is only related to the edge of the situation, and most applications do not often do this, so this should not be considered as an important point of comparison. However, the page size is related to all items, and this Vue is once again superior to react, its current version is compressed after only 25.6KB. To achieve the same function with react, you need react DOM (37.4KB) and react with Addon library (11.4KB), total 44.8KB, almost twice times the size of Vue. Although you do get a richer API from react, doubling the volume does not double the functionality. If you plan to build a large application, please use the React

As the beginning of the article, comparing the two with a simple application implemented by Vue and react may make a developer more likely to be vue from the start. This is because template-based applications appear to be easier to understand at first glance, and can be written and run quickly. But these initial conveniences will introduce technical debt and hinder application expansion to larger scale. Templates are prone to difficult to notice run-time errors and are not easily tested, refactored, and decomposed.

JavaScript templates, by contrast, can be organized into components that are well decomposed and use dry (don ' t repeat yourself-avoid duplicate code) principles, and thus have greater reusability and testability. Vue also has component systems and rendering functions, but the react rendering system is more configurable and includes features such as shallow rendering, which can be combined with react test tools to greatly improve the testability and maintainability of the code.

Although react's immutable (immutable) application status may not be vue concise enough, it will still shine in large applications because transparency and testability are critical at this point. If you want a framework that applies both to Web-side and native app, select React

React native is a library for building mobile-side native applications via JavaScript. It is the same as react.js, but instead of using a Web component, it uses a native component. If you have studied React.js, you will soon be able to 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);

The implication is that developers need only a set of knowledge and tools to develop Web applications and mobile-side native applications. If you want to do web-side development and mobile-side development at the same time, learning react is quite a bargain for you.

Ali's Weex is also a Cross-platform UI project, which is currently inspired by Vue, uses many of the same syntax, and plans to implement full integration Vue in the future, but the time and specifics of the integration are not yet determined. Because the HTML template is one of the core parts of Vue's design, and the existing features do not support custom rendering, it is difficult to see that the Weex relationship will be as close as react and react native in the current form of vue.js. If you want the largest biosphere, please use the React

There is no doubt that react is now much more popular than Vue-it downloads about 2.5 million times a month on NPM, and Vue only 225,000 times.

The benefits of popularity are not only a superficial reputation, but also more relevant technical articles, tutorials and more on stack overflow solutions and help; and with more tools and plug-ins that can be used in projects, developers can save a lot of effort without starting from scratch.

Both of these frameworks are open source, but react was born on Facebook, and its developers and Facebook pledged to maintain react. Vue was created by an independent developer Yu Yuxi and currently has only one full-time defender. While some companies are funding vue, the scale is no better than Facebook and Google.

However, due to the efforts of Vue's team, its small size and independence has not become a disadvantage. Vue has a fixed release cycle, and even more impressive, there are only 54 GitHub on Vue (open issue), and 3,456 closed issues (closed issue), compared to the number of react closed issues (3,447) , there are up to 530 problems to be solved. If you're satisfied with one of them, there's no need to change it.

To sum up, we find that the advantages of VUE include:

Flexible selection of templates and rendering functions

Simple syntax and project creation

Faster rendering speed and smaller volume

The advantages of react include:

More suitable for large applications and better testability

Both web-side and native app

Greater biosphere brings more support and tools

In fact, react and Vue are very good frameworks, they have more similarities than differences, and most of their best features are interlinked:

Using virtual DOM to implement fast rendering

Lightweight

Response-Type Components

Server-Side Rendering

Easy integration of routing tools, packaging tools, and state management tools

Excellent support and community

If you think we've missed something, please say it in the comments. Kaikaifa happy.

Article from http://www.cnblogs.com/Chen-XiaoJun/p/6246946.html