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

Learning or to learn, with more, there will be more understanding of the development of the choice when it is easy to come up.

The authors also made a summary of this:

If you prefer to use (or want to use) a template to build your app, use Vue
If you like simple and "can-do" things, please use Vue
If your app needs to be as small and fast as possible, use Vue
If you plan to build a large application, use the React
If you want a framework that applies to both web-side and native apps, choose react
If you want the largest ecosystem, use react
If you are satisfied with one of them, there is no need to change

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

In 2016, react grew rapidly on both the web and mobile side, steadily leading its main competitor, Augular, and 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 had a huge impact in the entire JavaScript community, which has been proven by the fact that it has risen 25,000 stars in GitHub.

It has to be said that react and Vue are similar in scope: They are lightweight, component-based frameworks that focus on building the user interface's view layer, both for simple projects and for large-scale, complex projects that use cutting-edge technology.

As a result, many Web developers struggle to decide which framework to choose from. Can the two distinguish between good and bad? Or what are their strengths and weaknesses that need our attention? Or do they actually have the same kind of people?

Two frameworks, two advocates

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

To balance this, I invited my friend Alexis Mangin to participate in the discussion. He is an excellent JavaScript developer, and is a react iron powder. Like me, he also frequently uses react in various projects, including web-side and mobile-side projects.

One day he asked me, "Why are you so fond of using vue instead of react?" "It was hard to give a good answer because I didn't know much about react," he said. So I suggested to him that we take a day to bring our own laptops together to explore the benefits of our respective favorite frameworks.

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

After much discussion and mutual learning, we have reached the following six key points:

If you prefer to use (or want to use) a template to build your app, use Vue

The default option for the Vue app is to put the markup into the HTML file. Data-binding expressions use angular-like double-brace (moustache) syntax, whereas directives (special HTML attributes) are used to add functionality to a template.

Here 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=
       >reverse Message</button></div> 
   

// JS New Vue ({  '#app',  data: {    'Hello vue.js!   },  methods: {    reversemessage:function () {      this]. Message.split ("). Reverse (). Join (');}}  );

Instead of using templates, react applications require developers to create Dom in JavaScript with JSX. The following are the same applications implemented with react:

// HTML<div id="app"></div>

//JS (pre-transpilation)classApp 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 veteran developers like to use templates, however, because templates are better able to separate functionality from layout and provide the possibility of using template engines like pug.

However, the cost of using a template is that you need to learn all the HTML extension syntax, whereas the Render function requires only standard HTML and JavaScript to be used. And compared to templates, rendering functions are easier to debug and test. However, you should not miss Vue because you have already provided the option to use templates or render functions in Vue2.0.

If you like simple and "can-do" things, please use Vue

A simple Vue project can be used without translation directly in the browser, which makes using Vue in a project as easy as using 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 application data ("state"):

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

 This . SetState ({     this. State.message.split ("). Reverse (). Join (')}); 

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

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

   //The Vue instance this. Message.split ("  ). Reverse (). Join (');

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

However, Vue's response system still has some pits, such as its inability to detect the addition and deletion of attributes, and some array changes. This is to be solved using the react-like set method in the Vue API.

If your app needs to be as small and fast as possible, use Vue

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

Vue's core developers have provided a benchmark test to show that Vue's rendering system is faster than react, with specific benchmark settings and comparisons to other frameworks, see vuejs.org. The test method is to render a list of 10,000 items 100 times, as a result.

From a practical point of view, this benchmark is only relevant to the edge situation, and most applications do not do so frequently, so this should not be considered an important comparison point. However, the page size is related to all items, and the Vue is once again better than react, which is only 25.6KB after the current version is compressed. To achieve the same functionality with react, you need to react DOM (37.4KB) and react with Addon library (11.4KB), a total of 44.8KB, almost twice times the size of Vue. Although you do get a richer API from react, doubling the volume doesn't give you double functionality.

If you plan to build a large application, use the React

Comparing the two with a simple application of vue and react, like the beginning of the article, might make a developer more inclined to 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 the expansion of the application to a larger scale. Templates are prone to difficult-to-notice run-time errors and are not easy to test, refactor, and decompose.

In contrast, JavaScript templates can be organized into components of code that are well decomposed and use dry (don ' t repeat yourself-avoid repeating code) principles, making them more reusable and testable. Vue also has component systems and render functions, but react's rendering system is more configurable and includes features such as shallow rendering, which can be used in conjunction with react test tools to greatly improve the testability and maintainability of the code.

While react's immutable (immutable) application status may not be as simple as vue, it still shines in large applications, as transparency and testability become critical at this point.

If you want a framework that applies to both web-side and native apps, choose react

React native is a library for building mobile-native applications through JavaScript. It is the same as react.js, but uses native components instead of using Web Components. If you have studied React.js, you will soon be able to get started react Native and vice versa.

//JSImport React, {Component} from 'react'; import {appregistry, Text, View} from 'react-native';classHelloWorld 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-native applications. If you want to do web-side development and mobile development at the same time, learning react is quite a bargain for you.

Ali's Weex is also a cross-platform UI project that is currently inspired by Vue, uses many of the same syntax, and plans to implement fully integrated Vue in the future, but the timing and specifics of integration are not yet determined. Since 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 relationship between Weex and Vue.js will be as close as react and react native in the current form.

If you want the largest ecosystem, use 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 superficial fame, but also more relevant technical articles, tutorials and more answers and help on stack overflow, as well as more tools and plugins that can be used in projects, and developers can save a lot of effort without starting from scratch.

Both frameworks are open source, but react was born on Facebook, with its own funding, and its developers and Facebook are committed to maintaining react. Vue is created by independent developer Yu Yuxi, who currently has only one full-time maintainer. While some companies are funding vue, the scale is no better than Facebook and Google.

But because of the efforts of Vue's team, its small size and independence did not become a disadvantage. Vue has a fixed release cycle, and even more remarkable is that there are only 54 pending issues (open issue) on GitHub, and 3,456 for closed issues (closed issue), compared to react's number of closed issues (3,447) , there are as many as 530 problems to solve.

If you are satisfied with one of them, there is no need to change

To summarize, we found that the benefits of Vue include:

• Flexible selection of templates and rendering functions

• Simple syntax and project creation

• Faster rendering speed and smaller volume

React's advantages include:

• More suitable for large applications and better testability

• For both web-and native apps

• More support and tools from a larger ecosystem

In fact, react and Vue are very good frameworks, where similarities are much more different, and most of their best features are interlinked:

• Use virtual DOM for fast rendering

• Lightweight

• Responsive components

• Server-Side Rendering

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

• Excellent support and community

If you think we have something missing, please note in the comments. Kaikaifa Happy!

Read more: Vue.js author's comments on this article please poke here

The translation of some of the terms is referenced from: The column by pine nuts

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