preface

Into the line more than three years, due to recent began to take over presents project, so far, is one of the three frameworks are rolled again, dare not say use skilled, but also have some use and selection of ideas, in the attempt to elaborate the advantages of the three framework to distinguish, deepen their understanding, at the same time, help you quickly get technology selection.

First of all, I would like to explain the usage of the three frameworks. Vue is the most widely used framework, followed by React, and Angular ranks the last. It is only more than three months, and it is totally passive learning. The 3 big frames that see the home that next big guy arranges first use case!

React: Ant Data Visualization, Airbnb, Feizhu, Alidayu, Xiami Music, Koubei Open Platform, Tooying, Ximalaya, Douyu, Zhihu, Douban, Meituan Takeout H5, Fangduoduo, Graphite Document, Modao, TalkingData, Xiaopiu, Teambition, Uber, Beqia, Tongdun Technology, Xinzhi Weather, Pinduo Duo (APP embedded H5), Didi Chuxing, Sentry, Tuniu, Youku, JD clothing + fresh + travel + money H5, Guayi finance H5, computing power matrix, Homelink H5, Ali Cloud management background, Coding, CodePen, Raspberry PI, 36krypton, Notion, GoDaddy, Zhcool Hailo, Plotly, MAC CRM, Tecan marketing calendar, Lu Class, netease Cloud reading PC + netease cloud music H5, Liepin.com, look cloud document editing page, NIKE official website, Dac Doctor, Where H5 multiple modules, elong H5 individual modules, rental car H5, Autohome car mall, PayPal China, Pocket, Friends, iH5…

Vue: Hungry yao, iQIYI, China’s ping an H5, Jane books, road tiger subsidy, the little red book, Letv mall, mobile phones, sohu, youku, potatoes, the Denver nuggets, weibo H5, barley nets H5, Vipshop H5, millet mall H5, mango TV mobile version, bi li bi li, wheat data and cloud, seven, OneAPM, Aladdin small program statistics, netease cloud letter + mobile phone netease, netease Mailbox H5 login page, today’s headline + watermelon video web edition, bei store (APP embedded H5), largest search vehicles, drops open source, gold open platform, jingdong spell buy + coupon redemption H5 + + new channel jingdong cloud, melon seeds used H5, earth rabbit, staging, BITMAIN, pig short rent H5, IT oranges, entrepreneurial H5, on loan, bond geeks technology + bond Geek time, open source China, minority, blue lake, baidu index, WeChat public platform, the big fish, cloud view (UC), and the guest post, against the bar, gome H5, gather beauty is superior touch-screen version, money cafe, try the guest, make the guest, snowball creeps of finance and economics, video buses, Hao123 touch-screen version, a car, ctrip H5 multiple modules, poor 9, a mobile phone…

AngularJS: Baidu Brain Map, Eolinker, Haizhi BDP, Aurora, Worktile, Smartisman official website, wechat Webpage version, iTunes Connect, Ali Cloud Management background, Jingzhundocking platform…

Vue React is pretty much par for the course, but Angular is a bit of a flop. Here are the three frameworks

Framework for dispute

First throw personal point of view, the three frameworks are good framework, they all have the ability to complete a large project, has a vibrant community (but presents almost in China, baidu search less than basic solution meet problem really is in a hurry), in fact, so long way, framework or struggle has always been a front-end engineer, the essential topics of SPAR verbally, At first I also like the vue, his response to the type of writing, concise syntax, and without the aid of tools simply introducing the CDN file can development ability, is really fascinating, but later I found that the react more flexible writing, everywhere can show the best practices, and more choices of novelty, even a CSS can give play to, Later, when I got to know Angular, I realized that it has great capabilities, better engineering, mandatory layering, dependency injection, and TS’s natural code-checking capabilities. So what is the best framework?

The answer is, there is no best framework, he is a good framework, mainly depends on the use of the framework of the person is good, strong, strong, not bad, but now most front-end code farmers are still fighting for their preferences. Frameworks just take over, wrap up, organize, and in that sense, frameworks are the same. The difference is paradigms and programming patterns, flexible functions, rigid object-oriented approaches, and the use of all kinds of thought tools to reduce our development time and optimize our development experience. The choice of frameworks is just faith, there is no good or bad, just like you believe in Buddhism and he believes in Christianity.

The characteristics of the three frameworks

vue

Vue this first I use most of the framework, is also a lot of stars, the framework of most general front-end old people prefer to use, I vaguely remember when we eat with our leading wine lead three cruise, I ask why you so like vue, led led front man, belongs to the first lines of a batch of front-end, work experience, in 78, he said, For us older folks, they came from IE6, and in the jquery era, they were very frustrated with the way jquery was developed to manipulate the DOM a lot, and then they used all three frameworks, and they found that vue’s template syntax was very friendly to them, and the idea of data-driven views, Hide the tedious steps of dom operation, as well as the gradual integration, he went on to say that old, learn not to move, VUE is simple, fast, the most important is, good recruitment (this year, most are leaders), and other advantages, really love.

Next, let’s talk more about what I think are the advantages of VUE

1. Response

A responsive system is quite convenient. Based on the variable data, Watcher is established for each attribute to listen. When the attribute changes, the corresponding virtual DOM is updated in a responsive manner. The specific principle is not described here.

2. Template syntax

In VUE, we can be as free as we would be writing HTML, thanks to vUE’s template syntax

<p>{{message}}</p>
Copy the code

Why did we say that the front-end elder likes to use Vue, because its template syntax, for the old front-end is quite friendly, because they are from HTML, so how did we template syntax come from?

Vue template is not HTML, so it must be converted into A JS code, which is called template compiler, vue template-compiler is used in the template compiler tool, then what does this tool do? Vue 2.0 template => ast => render

// Template code const compiler = require('vue-template-compiler')
const result = compiler.compile(`
  <div id="test">
    <div>
      <p>This is my vue render test</p>
    </div>
    <p>my name is {{myName}}</p>
  </div>`
)

console.log(result)
Copy the code

{// compile result ast: {type: 1,
    tag: 'div',
    attrsList: [ [Object] ],
    attrsMap: { id: 'test' },
    rawAttrsMap: {},
    parent: undefined,
    children: [ [Object], [Object], [Object] ],
    plain: false,
    attrs: [ [Object] ],
    static: false,
    staticRoot: false
  },
  render: `with(this){return _c('div',{attrs:{"id":"test"}},[_m(0), // This is my vue rendertest</p></div>
        _v(""), // Blank node </div> <p> between the newline content _c('p',[_v("my name is "+_s(myName))])  // <p>my name is {{myName}}</p>
    ])}`,
  staticRenderFns: [
    `with(this){return _c('div',[_c('p',[_v("This is my vue render test")])])}`
  ],
  errors: [],
  tips: []
}
Copy the code

Then we execute the render function, which returns a VNode, followed by the familiar diff algorithm, to update the view

3. Implement MVVM

The implementation of MVVM I think this is at least a good news, with data to drive the view, simplify the tedious dom manipulation, more focus on business logic, so that can save development time, and write easy to maintain code, so what is MVVM?

4, user-friendly, easy to use

Compared with React JSX, Angular RXJS, and dependency injection, Vue’s syntax style and API are quite friendly. The community also has some fixed solutions. Of course, vue’s performance optimization is quite good. We don’t need to manually optimize, don’t need to update the render component like react parent component to the child component also need to keep up with the new, in the end is still written by Chinese, there is a point of the mean meaning, leave the simple and choice to others, complex and helpless to their own……

5, weaken performance optimization, users only need to focus on logic

React and Angular Vue have fewer constraints than react and Angular Vue when developing in template format. Thanks to a responsive system, there are no performance optimizations. Because of the template syntax, Vue can be compiled in the development environment, which allows for performance optimizations such as In this section of VUE, I clearly know that the second name is a variable so that internal optimization will be targeted

<template>
    <ul>
        <li>0</li>
        <li>{{ name }}</li>
        <li>2</li>
        <li>3</li>
    </ul>
</template>
Copy the code

In React, because JSX is written in a flexible and uncertain way, there is no way to optimize performance at compile time

<ul>{ data.map((name, i) => <li>{i ! = = 1? i : name}</li>) }</ul>Copy the code

react

1. The design idea of immutable values is also the practice of functional programming

As we know, performance optimization in React is left to the developer. Therefore, by default, when the parent component of React is updated, the child component must be updated. In this way, we need to use some optimization tools provided by React, such as SCU, pureComponent, memo, etc. We know ShouldComponentUpdate(SCU) can be used to block the spread of updates. But the React component doesn’t implement it by default, so it’s up to the developer to decide whether to optimize the application’s performance. In this method, you can check if the component’s state or props has been modified, and return false if not, so that the component and its children will not be rerendered. Here’s the problem: If the data is mutable and has been directly modified, SCU will always return false, which causes the component to never be re-rendered. The idea of Immutable values runs through React from the start, and it even took two years to develop a js library for Immutable values. This is also the idea of functional programming.

All in JS

In React, everything is JS, and the so-called JSX is just a syntactic sugar. Thanks to this development experience, many developers feel more comfortable writing. It does not have the restrictions of various template syntax in VUE, and has high freedom of writing. React is all about components, and a large project is built with components stacked like building blocks

Active community, prosperous ecology

This is the most proud of the react, he knows what he should do, the rest were handed over to the community to do, he doesn’t like vue, ecological community is relatively stable, basically a set down the whole community was recognized some relatively fixed, while in the react in the court, such as in the state of public data management has the story, Mobx, and the recent concent are also refreshing, such as CSS is also full, sass, less, CSS in JS style-components, such as, Redux-thunk, Redux-Saga, etc., not to mention react based DVajs, a library designed to replace Redux, and umi, designed to replace CRA. Use React with caution. There are too many choices and you won’t know how to react. Due to react’s open way of thinking (corresponding to the VUE doctrine of the Mean in China), various wheels emerge in an endless stream, people’s enthusiasm for research continues to grow, the front end is becoming more and more important, and salaries are getting higher and higher. I think a lot of big companies choose React just because React is easy to toss around. They are all technical masters. Who doesn’t want to make big news?

4. Develop cross-platform capabilities at multiple ends

Thanks to RN, once you’ve learned the react syntax, you’ll even be able to hand-pump an app, which Vue can’t. Because of this, you’ll notice that events in React are self-written, not native to the browser. It is because he needs to use his own written a set of synthetic event mechanism to achieve cross-end events, the principle is actually very simple

5. Fiber

React16 also includes Fiber, a rendering mechanism that separates Reconcilation’s characters into execution units, known as Fiber, Then use the requestIdleCallback method to execute each fiber while the main process is idle, as follows:

angular

Since Angular has only been around for three months, I don’t know much about its principles.

Provides a complete end-to-end solution

Before said presents is large and complete, because, he didn’t need to use the power of the community, only depend on oneself can achieve a product from start to launch the solution, for example, he provides comprehensive unit testing solution, here you are in the new component will give you a test of ts, in, for example, he will provide all the necessary services development, Like HTTP services, router services, and public data management services, Angular is more like a back-end language, with strict type checking, embracing TS, mandatory layering, and better engineering, object-oriented programming. Angular is tall and complex. The Official Angular library gives you everything you need. With the Angular stack, you don’t have to waste much time and effort on component selection (as opposed to React).

Some differences and connections between the three frameworks

contact

When I was learning the three frameworks, I found that IT took me one month to learn VUE, maybe 20 days to learn React, and 15 days to learn Angular. Actually, they are all connected. Once this idea is in place, the difficulty of learning the three frameworks will be gradually reduced. Although angulr is more difficult to learn than React and React is more difficult to learn than Vue, let’s talk about their connection next

1. Componentization

All three frameworks advocate componentization, so when you’re developing vue projects with componentization in mind, you can consciously separate presentation components from container components. React and Angular development will be much easier

Both are data-driven views

React is functional. Angular and Vue are declarative. However, the idea of data-driven view remains unchanged. React uses setState assignments, while Vue and Angular use explicit and direct assignments. Both end up changing values to trigger page updates

3. Common development routines

For example, they all have parent-child component transfer, data management framework, front-end routing, and slots. In Anguar, they are called projection components, while in React, they are called composition. Can implement some so-called hoc functions

So when you master one of the frames, then in other frames to meet similar business scenarios, only Baidu only Baidu other frame similar usage can, here I finally understand just into the line is, the leadership told me, learn procedures, is to learn ideas. With thought, there will be no barriers between the frames.

The difference between

As far as I know, there are only so many connections. In fact, these connections can deal with daily business development. The reason why many people feel it is difficult to learn the three frameworks is that the knowledge extended outside the framework is endless. Node, NPM, webpack, middleware is waiting for you all to know a little, because each frame are embracing community is different, so we need to learn, he is different, but, when you give these are carried out to understand, discovery, in fact, most of them use ways and ideas are also have similarities, then talk about the difference

Template vs JSX

React vs. Vue. The biggest difference between Angular and React is how templates are written. Vue and Angulr encourage you to write templates that resemble regular HTML. It’s written pretty much like a standard HTML element, with a few more attributes. React, on the other hand, advocates all in JS and uses JSX as its original writing style. However, they are all syntactic candy in essence, and are all executable functions after compilation.

Virtual DOM vs Incremental DOM

For underlying rendering, both Vue and React use virtual DOM. Angular does not use Incremental DOM. For details, see Angular Ivy: Incremental DOM and Virtual DOM

Functional programming, declarative programming

In React, immutable values run through the framework. If you want to change data, you have to call the API to change it. That’s the idea of functional programming. This method of direct assignment, and the API method of assignment, in fact, just different usage, is data-driven in nature

Community complexity

Angular and Vue give you almost everything you want. React is more about self-reliance, which is why it’s so hard for people with choice problems.

Introduction to the difficulty

Angular’s most engineered framework, which embraces RXJS and TS (I still don’t understand ts generics), is also the most difficult

React is also easy to get started with, especially after hooks were introduced in 16. It’s called the API terminator, but it’s also difficult to get started with Vue because the community is so active and new stuff keeps coming out and the Chinese documentation is so obscure

Vue is relatively easy to get started with because it was written in China, has a complete Chinese documentation, a stable community, and a friendly template syntax.

What are the three frameworks

For learning

For study, I study is the use of three frameworks are, after all, the cunning is no burden, but still pay attention to react, and vue, after all, at home, the two ready to eat meal, the three frameworks are learning, is due to my feeling is that realize the three frameworks are a little and shortcomings, because thoughts have similarities, so, When I write react, I know why REdux is used in the react project. When I write react, I use redux in the react project. When I write react, I use redux in the react project. It is recommended that all data be stored in redux. For example, when using React, static types such as prop-types should be introduced to prevent weird bugs. Therefore, I suggest that in terms of study, there is time to study all three frames.

For individual projects

For individual projects, the three frames are of great power. If you are engaged in private work, you must use the frame you are most familiar with, because my previous experience is that it is too tired to use things that have not been used before, and there are many pits. Do a long time, private work this money, not as high as the company overtime overtime pay, not worth the loss. But if it’s your own project, feel free to use whatever you want, because some people find vue’s lousy commands too hard to use

For corporate projects

For the company’s projects, we should be cautious. We should consider the existing team resources, project requirements and technical risks, as well as the company’s recruitment costs. In fact, for the three frameworks, we can hold the large projects. The design is good, and the three frameworks are all capable of large projects. The main technology selection is still a human problem.

1. Vue is a very good choice if the project is urgent and the overall technical strength of the front-end team of the company is weak, because it is quick and easy to recruit people

Angular is the best choice for a very large project with a large staff, strong technology and strong learning ability. Angualr is the best choice for maintenance, but angualr, which I have been writing for more than three months, can’t be maintained if the overall level of the front-end team is uneven. At the end of the day, you’ll spend three hours looking for code and three minutes writing it (don’t ask why).

3. If the technical strength of the team is good, but the time is limited, react and VUE are good choices. Of course, REACT and VUE are more recommended, because the writing is more cool, the sense of achievement is self-evident! The reason for not recommending Angualr is that NG is too limited for a project. Ts, RXJS, decorators, dependency injection… The cost of learning is simply too high

4. If you are concerned about compatibility, don’t use jquery at all.

For example, the company’s structure is back-end, so he must first choose Angualr. Then, as the front end leader, he can only follow orders. For example, the company’s previous project was React, so when there was a new project, Whether to increase the learning cost of team members is also an issue to consider. In short, there should not be a chain of contempt when selecting technologies. Some people think Angular is awesome and despise react and Vue, and they think ts, RXJS, decorators, dependency injection, etc. These ideas are not designed by you, and if the selection, the basic programmer requirements of nature also improved a level, the name is to screen more excellent people, but also think about why excellent people why in this year when a soldier. So do not parrot, listen to what others say, that he is good, in fact, for the company, the right is the most important, is not necessarily the best.

The last

Finally concluded, in fact, the three frames, but also can only be used in the stage, the summary is more general, old rules wrong place please big guy message advice.