1.angular
1.1. Introduction:
Angular is the earliest framework,
Angularjs uses directives to encapsulate components, and react and vue use components.
Simple Application Server
USD1.00 New User Coupon
* Only 3,000 coupons available.
* Each new user can only get one coupon(except users from distributors).
* The coupon is valid for 30 days from the date of receipt.
1.2. Advantages:
1. The backer (google) has a stable maintenance team. And Google’s Adwords business uses angular. As a profitable business, Google will also make its environment more stable.
2. Angular+typescript, the two swords of google and Microsoft are combined. Angular fully supports typescript syntax. Typescript not only includes the syntax in es6, but also includes some new syntax,
The most important point is that it adds type rules, which greatly improves the readability and maintainability of the code. It also allows developers with a java or .net background to master it faster.
3. Complete. In fact, compared to react and vue, angular is more a framework, while react and vue itself can only be regarded as a library. Angular comes with almost all the functions that a page should have, such as routing, forms, ajax, templates, two-way data binding, and so on. Its native form module is very powerful. In addition to the basic functions of two-way binding, it also comes with verification. Developers do not need to find third-party libraries for these functions. Angular framework contains all of these, so for choice This is an advantage for people with difficulties.
4. Each framework has its own cli scaffolding, which can quickly build the prototype of the project. angular-cli comes with internationalization.
5. Each of its components is a folder, html, js, and css files are separated to make the code more clear.
Moreover, its various types of files exist separately, and any IDE can be used in development to check the code. You can use the built-in formatting function to make the code in the development process cleaner.
1.3. Disadvantages:
1. It is difficult to debug. Angular's code is clean and standardized, and it is easy to maintain and review, but its console error information is too bad. In most cases, it is impossible to see where the problem is. This adds to the debugging during the development process. It is very difficult. In the development of react and vue, it will be clearer to let developers know where the error is.
2. It is too heavy. It comes with a lot of modules, which solves the time spent by developers in choosing. After compression, it reaches 168k, which is more than three times that of vue50k. Even in version 4, some functions are split. , But it is still heavy
3. Learning cost. Angular has a lot of concepts, some of which are difficult to understand only through documentation, and unfriendly API documentation. Because there are too many things, so the api document content is also a lot, increasing the difficulty of reading. This makes it difficult for people who are new to angular to get started. It also caused a lot of psychological pressure. I didn't want to read the document when I saw it. There is also the api, which is in English.
2.React
2.1. Introduction:
React itself cannot be counted as a framework because of its limited functions, but it has a huge ecosystem, and countless developers all over the world are providing open source packages for it.
Maybe someone else has already done it for you for a difficult problem for developers, just introduce it.
2.2. Advantages:
1. Backstage (facebook)
2. Lightweight and small size should have been counted in the advantages of react and vue, but in a large project, for example, the general react uses react+redux+react-router or may also add sending requests For axios, if there are some other requirements, you need to add packages. The same is true for vue, vue+vuex+vue-router+vue-axios, which leads to the gradual reduction of the advantages of react and vue's small size. So in this regard, we should say that the assemblability of react and vue is stronger than angular, more flexible, and use what you want.
3. React's single-item data flow mechanism. Compared with angular two-way data flow, its various changes are predictable because it is one-way. Unlike two-way data flow, once the data flow becomes complicated, everyone will interact with each other. Trigger changes, and developers simply can't guess what you change in one place will change in other places.
4. React-native, an excellent mobile development framework, uses React's unique jsx grammar, which allows developers to write on the mobile terminal like writing PC pages, and it automatically adapts to different mobile terminal screen resolutions. The jsx syntax is to integrate HTML into js.
5. State, all data is stored in state and can only be changed using the setState method. Developers can store all the data in the state and let all the components go here to fetch the data. Of course, if there are too many components, the state of the top-level component will be too heavy. At this time, the public can be placed in the top-level state They are stored in their own state for private use. In this way, you only need to pay attention to each state during development and maintenance.
2.3. Disadvantages:
1. The flexibility of react leads to costly choices. Those who decide to use the framework should consider what functions the project has, and which packages are needed to see which packages are of higher quality, because the same There will also be many open source contributions for the function. The time cost of these tasks is also an issue that the project has to consider. This problem also exists on vue
2. React's jsx syntax is not difficult to learn, it should be simpler than ts. But its writing method is to combine html and js, which leads to some IDEs, you can not format it, if formatted, it will arrange html like js syntax. The readability of the code is worse. And when writing html in js, it is necessary to avoid the same keywords appearing between the two, such as class, in jsx, it must be written as className, but also in camel case
3. Use redux. Redux uses saga syntax when processing data streams. Developers have to learn how to write saga. Then, asynchronous and synchronous operations of saga are written in two functions separately, and written once in the component itself. When the data flows to the parent component, it is necessary to write it again. The writing method is more complicated. If you want to simplify it, you must use a front-end application framework-DVA, or add things to increase development efficiency.
4. Virtual DOM, Vue will track the dependencies of each component, without the need to re-render the entire component tree. For React, every time the state of the application is changed, all components will be re-rendered, so shouldComponentUpdate is required in React. This life cycle function method to control
3.Vue
3.1. Introduction:
One feature of vue is that each .vue file is a component. In this vue file, there are three tags of style, scripts, and template to contain css, js and html.
It is the last framework to appear, so in its implementation, it takes the strengths of the other two frameworks and goes to the shortcomings of the other two frameworks, drawing on many good design concepts,
For example, angular directives, two-way binding, and react component ideas.
3.2. Advantages:
1. Domestic framework, so it should be more friendly to domestic developers when learning it. So its learning cost is the lowest among the three frameworks. Chinese api documentation, I think this alone will allow domestic developers to save a lot of energy when learning Vue.
2. Vuex, completes the function of redux and is more convenient in writing, no longer need dva to help him write easily.
3. The volume of vue is the smallest among the three frameworks, and with its processing mechanism, its performance is the highest among non-large-scale projects. Vue has the advantages of react and angular on non-large projects, and is simpler and easier to use.
4. Vue will track the dependencies of each component without re-rendering the entire component tree
5. Vue implements two-way data binding, and react data flow is one-way
3.3. Disadvantages:
1. Vue's response system cannot detect the addition and deletion of attributes, as well as the modification of certain arrays. Developers sometimes ignore this.
2. After all, its development time is not as long as they are, and the ecological environment is smaller. Sometimes there are problems in the development and it is impossible to seek effective help on the Internet.
4. Comprehensive
4.1. Efficiency:
Angular, react, and vue are all mvvm modes, (model, view, view-model). Angular's data binding and manipulation of dom are completed through viewmodel. The high efficiency of react and vue's view-model is achieved by the virtual dom (virtual dom) provided by the framework itself. It is a js object. The changes in our data will be mapped to this virtual dom, and then the virtual dom will be real The dom of each framework is compared with each framework’s own algorithms to modify the real dom structure, which is more efficient than the operation of directly binding the real dom tree of the angular viewmodel
4.2. Background:
Angular is Google's upgrade and maintenance.
react is upgraded and maintained by facebook.
Vue is in charge of Chinese You Yuxi and his team.
4.3. Personal opinion:
The shortcomings of angular are more obvious, and its shortcomings that are difficult to debug will affect the progress of a project in the development process.
Vue's smaller ecological environment and few solutions also made it lose to react in the development of large projects.
So I think react is more suitable for use in a large-scale project.
A framework or library is always just a tool for development. No matter which one is used, a solid js foundation is required. No framework is out of it. We can not use the framework, but we can’t use js, as long as we master it well. , No matter which framework you can get started more easily
