Three mainstream web front-end frameworks: 1. Angular, a front-end framework used to create a single application interface, with powerful module functions and custom commands; 2. React, a JavaScript used to build user interfaces Development framework, mainly used to build UI; 3. vue, is a progressive JavaScript framework for building user interfaces. Vue’s core library only focuses on the view layer, and is very easy to learn and integrate with other libraries or existing projects. .
The operating environment of this tutorial: Windows 7 system, Dell G3 computer.
In the past ten years, the IT industry has developed rapidly and many new professions have emerged, such as UI designers, development engineers, software testing engineers, etc. Among the many high-profile new professions, Web front-end engineers are one of them. So what are the three mainstream frameworks for web front-end?
The three mainstream web front-end frameworks are Angular, React, and Vue.
1. Angular
AngularJS was created in 2009 by Misko Hevery and others, and was later acquired by Google. It is an excellent front-end JS framework that is used in many products. It is not only a front-end development framework with advanced concepts, but also an end-to-end solution. It follows the MVC pattern in architectural design and advocates loose coupling of data and logical processing components. AngularJS realizes the natural extension of HTML through instruction technology, and realizes two-way automatic synchronization of data model and display view through compilation technology, alleviating complex DOM operations. In addition, it also provides good support for front-end automated testing technology.
Angular is a front-end framework for creating single application interfaces. It has many core features such as data binding, services, directives, dependency injection, etc. It has powerful module functions and has the advantages of custom commands
characteristic:
1. Good application structure
2. Two-way data binding
3.Instructions
4.HTML template
5. Can be embedded, injected and tested
advantage:
1. The template is powerful and rich in functions, and comes with an extremely rich set of angular instructions.
2. It is a relatively complete front-end framework, including services, templates, two-way data binding, modularization, routing, filters, dependency injection and other functions;
3. Customize instructions. After customizing instructions, you can use them multiple times in the project.
4. ng modularization boldly introduces some things from Java (dependency injection), which makes it easy to write reusable code, which is very helpful for agile development teams.
5.angularjs is developed by Internet giant Google, which also means that it has a solid foundation and community support.
shortcoming:
1. Getting started with angular is easy, but once you get deeper into it, there are many concepts, which are difficult to understand during learning.
2. There are very few examples in the documentation. The official documentation basically only talks about the API without any examples. In many cases, you can get the specific instructions from Google, or directly ask Misko, the author of Angular.
3. The compatibility with IE6/7 is not particularly good, but you can use jQuery to write your own code to solve some problems.
4. There are few best practice tutorials on the application of instructions. Angular is actually very flexible. If you don't follow some authors' usage principles, it is easy to write different codes. For example, there are many DOM operations in js that are similar to jQuery.
5. DI dependency injection requires explicit declaration if code compression is required.
2.React
React, produced by Facebook, was officially launched in 2013, 4 years later than angular. However, thanks to its innovative VirtualDOM, it surpassed angularJS in performance. Once it was launched, it became very popular. It has many features, including VirtualDOM, JSX, Diff algorithm, etc., supports ES6 syntax, and uses functional programming. The threshold is slightly higher, but it is also more flexible, allowing more development possibilities.
characteristic
1. Declarative design: React adopts a declarative paradigm, which makes it easy to describe applications.
2. Efficient: React minimizes interaction with the DOM by simulating the DOM.
3. Flexible: React works well with known libraries or frameworks.
advantage:
1. Fast speed: During the UI rendering process, React implements partial updates to the actual DOM through micro-operations in the virtual DOM.
2. Cross-browser compatibility: Virtual DOM helps us solve cross-browser problems. It provides us with a standardized API, which is no problem even in IE8.
3. Modularization: Write independent modular UI components for your program, so that when there is a problem with one or some components, you can easily isolate it.
4. One-way data flow: Flux is an architecture for creating a one-way data layer in JavaScript applications 5. Isomorphic, pure JavaScript: Because search engine crawlers rely on server-side responses rather than JavaScript execution, Pre-rendering your app helps with SEO. 6. Good compatibility: For example, RequireJS is used for loading and packaging, while Browserify and Webpack are suitable for building large applications. They make those difficult tasks less daunting. Disadvantages: React itself is just a V, not a complete framework, so if you want a complete framework for a large project, you basically need to add ReactRouter and Flux to write large applications.
3.Vue
As the last framework launched (2014), Vue draws on the features of its predecessors angular and react (such as VirtualDOM, two-way data binding, diff algorithm, responsive properties, component development, etc.) and makes relevant optimizations to make it usable. More convenient, easier to get started, and less suitable for beginners.
characteristic:
1.Lightweight framework
2. Two-way data binding
3.Instructions
4. Plug-in
advantage:
1. Simple: The official documentation is very clear and easier to learn than Angular.
2. Fast: Update DOM in asynchronous batch processing.
3. Composition: Compose your application with decoupled, reusable components.
4. Compact: ~18kbmin+gzip, and no dependencies.
5. Powerful: expressions do not need to declare dependent deducible properties (computedproperties).
6. Module-friendly: It can be installed through NPM, Bower or Duo. It does not force all your code to follow Angular's various regulations, and the usage scenarios are more flexible.
shortcoming:
1. Newborn: Vue.js is a new project, not as mature as angular.
2. The influence is not very big: I googled it and found that the diversity or richness of Vue.js is less than that of some other famous libraries.
3. Does not support IE8.
Extended knowledge: What is the difference between Vue.js and other frameworks?
1. Differences from AngularJS
Similarities:
Both support instructions: built-in instructions and custom instructions.
Both support filters: built-in filters and custom filters.
Both support two-way data binding.
Neither supports low-end browsers.
Differences:
1. The learning cost of AngularJS is high, such as the addition of Dependency Injection feature, while the API provided by Vue.js itself is relatively simple and intuitive.
2. In terms of performance, AngularJS relies on dirty checking of data, so the more Watchers, the slower it becomes.
Vue.js uses dependency tracking-based observation and uses asynchronous queue updates. All data is triggered independently.
For large applications, this optimization difference is quite obvious.
2. Differences from React
Similar points:
React uses special JSX syntax, and Vue.js also recommends writing .vue special file format in component development. There are some conventions on file content, and both need to be compiled for use.
The central idea is the same: everything is a component, and component instances can be nested.
All provide reasonable hook functions, allowing developers to customize their needs.
Column AJAX, Route and other functions are not built into the core package, but are loaded as plug-ins.
The features of mixins are supported in component development.
Differences:
React relies on Virtual DOM, while Vue.js uses DOM templates. The Virtual DOM used by React will perform dirty checks on the rendered results.
Vue.js provides instructions, filters, etc. in templates, which can operate the DOM very conveniently and quickly.
The above is the detailed content of the three mainstream web front-end frameworks. For more information, please pay attention to other related articles on this site!