2015 front-end major frame comparisons (angular,vue,react,ant)

front-end popular frame competition

• Angular

• Vue

• React

• Ant-design

Angularjs

Angular is a framework for MVVM. It's all about MVVM. The most important scenario for angular is a single-page application, or a large number of data binding scenarios.

Characteristics

• Bidirectional data binding

• IOC Dependency Injection

• Instructions

The above points are really cool to use, casually designated a zone, with a controller, and then inside the things are in the Scrope, it is very convenient

If you want to see it, see https://github.com/i5ting/ionic_ninja/blob/master/angularjs/angularjs_sang.md.

In fact angular best practice is ionicframework, read ionic source code, just know what is called specification

Vue

Vue is a library of ViewModel in an MVVM written by a classmate. is for the first layer in MVVM. The application of the scene is relatively wide, just want to use the Vue function of the words.

• Extendable Data Bindings

• Plain JS Object Models

• API that simply makes sense

• Build UI by composing

• Mix & Matching Small libraries

This project is very active, the students of the energy is very vigorous ah.

From the original ViewModel to do today's various functions, to do addition is really a terrible thing.

Its guide says it can do building Larger Apps, see http://vuejs.org/guide/application.html

All kinds of routes, components, everything, it's really powerful.

But a lot of people can not make it, first of all, so many concepts to play dead one vote, and secondly, it has too many things to achieve, that is, there are too few things to reuse, if it is a small project play indifferent, if it is a large project, the level of the average programmer is difficult to hold.

This is like react out, very good, but there is no reusable thing, writing is very painful, so in the following I introduced react, gave a better solution based on react.

Reactjs

Https://github.com/facebook/react

Virtual DOM

Virtual DOM is the core concept of Reactjs, and I'm copying a paragraph to illustrate it

In web development, we need to manipulate the DOM in real time by reacting the changed data to the UI. Complex or frequent DOM operations are often the cause of performance bottlenecks (how high-performance complex DOM operations are often an important metric for measuring a front-end developer's skills).

React introduced the virtual DOM mechanism for this purpose: a set of Dom APIs was implemented with JavaScript on the browser side. All DOM constructs are made based on the react, and each time the data changes, react reconstructs the entire DOM tree, then compares the current entire DOM tree with the previous DOM tree to get the difference between the DOM structure, Then only the parts that need to be changed are actually updated in the browser DOM.

And react can batch the refresh of the virtual DOM, the two data changes in an event loop are merged, for example, if you change the node contents from a to B successively, and then from B to A,react, the UI does not change, and if you control it manually, This logic is often extremely complex. Although it is necessary to construct a complete virtual DOM tree every time, because the virtual DOM is memory data, the performance is very high, and the actual DOM operation is only the diff part, so it can achieve the purpose of improving performance. In this way, while ensuring performance, developers will no longer need to focus on how changes to one or more specific DOM elements can be updated, but only to be concerned about how the entire interface is being render in any given state of the data.

You may not understand that much, the example.

HelloWorld

 
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }});React.render(
  <HelloMessage name="John" />,
  document.getElementById(‘container‘));

First of all, this is a kind of html-like syntax, called JSX, can be understood as coffee,typescript and the like, need to compile

The core is React.render, which shows where the component is placed, such as the example above

<div id=‘container‘> ... </div>

So that the page can be split into n small pieces, each piece of fragmented, so-called modular (also the same as the building blocks)

A bit more complicated, and here's the component with the state.

var Input = React.createClass({
  getInitialState: function() {
    return {value: ‘Hello!‘};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

React.render(<Input/>, document.body);

3 Concepts related to views

• Props (attribute, is the attrs on element, change the Name property, become plural, namely Props)

• State (the basic of the view component is known, the button has three states, normal,highlight,selected, including most UI frameworks in Extjs,jquery are stateful.) ）

• Event (in fact, it should be counted as a DOM event, the above example put onchange handler compiled HandleChange method, thanks to JSX)

Knowing the above, you can write the code, because

• Attribute, which solves the definition problem of the view, that is, the semantic description

• State, which is a poor state machine for view, determines UI and behavior based on state

• event, which is the behavior of the elements in the view

In the case of a separate view, the above is actually enough, but often we use it with the view and the Viewcontroller.

But Reactjs does not have this, that is to say, the view and controller are in the components, such as iOS but often we use the view and Viewcontroller there are many life cycle methods, these are also implemented in REACKJS

The life cycle of a component

The life cycle of the component, the other name is the state callback, and the only difference between the state mentioned above, the state is the element inside it, and the component's life cycle is its own

The life cycle of a component is divided into three states:

• Mounting: The real DOM is inserted

• Updating: is being re-rendered

• Unmounting: The real DOM has been removed

React provides two processing functions for each State, the will function is called before it enters the state, and the DID function is called after it enters the state, with three states totaling five processing functions.

• Componentwillmount ()

• Componentdidmount ()

• Componentwillupdate (Object Nextprops, Object nextstate)

• Componentdidupdate (Object Prevprops, Object prevstate)

• Componentwillunmount ()

In addition, the REACT provides two special state processing functions.

• Componentwillreceiveprops (Object Nextprops): Called when a loaded component receives a new parameter

• Shouldcomponentupdate (Object Nextprops, Object nextstate): Called when the component determines whether to re-render

FAQs

1) The most frequently asked questions: Can I integrate with jquery, for example?

Reactjs is very small and does not provide the functions of JQ, which can be said to be complementary, can be combined with the use

2) react better than angular?

Reactjs is a component best practice, but Angularjs's MVVM and other useful features, it is not, so better use can not say, let's think of the merits of it

Summarize

To summarize, about Reactjs, I did not speak virtual DOM, but mainly about 4 concepts

• Property

• State

• Event

• Life cycle

If you master these 4 points, you can actually use the Reactjs, such as the general view is to be used with Ajax, this time, as long as the component's life cycle can be processed, in fact, it is the above things, here is not wordy.

TODO (Reactjs advanced article)

• Add a bit of routing and data one-way flow of things

• or a server-side rendering of data request logic or something.

• It would be better if we could use Redux and express as an example.

Ant-design

Https://github.com/ant-design

Characteristics

• Refine your interactive language and visual style from enterprise back-end products.

• Rich and functional React UI components.

• Modular development model based on React.

• Backed by the NPM ecosystem.

• The Webpack-based debug build scheme supports ES6.

Let's change the story.

• Based on the react of components

• Code in NPM, modular

• Built with Webpack, more flexible

As for ES, that's just a gimmick.

Through NPM, can be better and nodejs combination, the use of node's ecology to expand, in fact, Bower and similar, but not friendly to Package.json, so I am very optimistic about this way.

After JS unification, NPM is not just Nodejs package Manager, but JS Package Manager

In addition, its interface design is very good, the modularization is also very good, I like very much, the only drawback is that its version of the Nodejs is too high, it will make a small number of people do not adapt.

The road of the whole stack

• JS is the first choice

• Rails is good, too.

• Other, it's going to be a long time

Summarize

Everyone may have doubts, so the technology is very good, my project should not go on it?

Look at the project dimension first

• Small items, no matter, can be early adopters, pits and rewrite as simple as

• Big project, can't hurt Ah, if immature or not good ecology, when cautious, stand the temptation

From the perspective of the human dimension

• Cows, no matter, anyway time and ability can squeeze out, can learn a lot of things, but also to play in many nights

• The rest of us.

I'm not using Vue in my company project, but I'm in favor of Evan's approach, which, while not advocating wheel building, is, in turn, not a technical person's passion.

Life is endless, toss and how will stop, the front-end or JS field changes more and more quickly, we are ready to meet may be the opportunity may be a disaster tomorrow, come on!

2015 front-end major frame comparisons (angular,vue,react,ant)