What are the three mainstream frameworks for web front-end?

Three mainstream web front-end frameworks: 1. Angular is a front-end framework used to create a single application interface. It has the advantages of powerful modules and custom commands; 2. React is a user-friendly framework. A JavaScript development framework to build user interfaces, 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 easily integrated with other Library or existing project integration.

The operating environment of this tutorial: Windows 7 system, Dell G3 computer.

In the past ten years, the IT industry has developed rapidly, giving rise to many new professions, 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 by Misko Hevery and others in 2009, 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 a single application interface. 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

Features:

• 1. Good application structure

• 2. Two-way data binding

• 3. Instructions

• 4.HTML template

• 5. Can be embedded, injected and tested

Advantages:

• 1. Template function Powerful and rich, it 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 the instruction. After customizing the instruction, it can be used multiple times in the project.

• 4.ng modularity boldly introduces some things from Java (dependency injection), which can easily write reusable code, for agile development teams Very helpful.

• 5.angularjs is developed by Internet giant Google, which also means that it has a solid foundation and community support.

Disadvantages:

• 1. Angular is easy to get started with, but there are many concepts when you get deeper, and it is difficult to understand during learning.

• 2. There are very few documentation examples. The official documentation basically only describes the API, without any examples. In many cases, the specific how to use it comes from Google, or directly asks Misko, Angular author.

• 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 the usage principles of some authors, it is easy to write different codes, such as in js or in js. Thinking like jQuery there are many dom operations.

• 5.DI dependency injection requires explicit declaration if code compression is needed.

#2. React

React, produced by facebook, the official version was launched in 2013, later than angular It took 4 years, but thanks to its innovative VirtualDOM, it surpassed angularJS in terms of 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.

Features

• 1. Declarative design: React adopts a declarative paradigm, which can easily describe applications.

• 2. Efficiency: React minimizes interaction with the DOM by simulating the DOM.

• 3. Flexible: React works well with known libraries or frameworks.

Advantages:

• 1. Fast: During the UI rendering process, React passes the Micro-operations to implement local updates to the actual 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 By serving server-side responses instead of executing JavaScript, 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

Vue, as the last framework launched (2014), draws on its predecessors angular and react Features (such as VirtualDOM, two-way data binding, diff algorithm, responsive attributes, component development, etc.) and related optimizations have been made to make it more convenient to use, easier to get started, and less suitable for beginners.

Features:

• 1. Lightweight framework

• 2. Two-way data binding Defined

• 3. Command

• 4. Plug-in

Advantages:

• #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.

Disadvantages:

• 1. Newborn: Vue.js is a new project, not as mature as angular .

• 2. The impact 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. IE8 is not supported.

#Expand knowledge: What is the difference between Vue.js and other frameworks?

1. Differences from AngularJS

Same points:

Both support instructions: built-in instructions and custom instructions.

Both supports filters: built-in filters and custom filters.

all support two-way data binding.

does not support low-end browsers.

Differences:

1. AngularJS has a high learning cost, such as the addition of the Dependency Injection feature, while the APIs provided by Vue.js itself are 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 observation based on dependency tracking and uses asynchronous queue updates. All data is triggered independently.

For huge applications, this optimization difference is quite obvious.

2. Differences from React

Similar points:

React uses special JSX syntax, and Vue.js also recommends writing in component development The .vue special file format has some conventions on file content, and both need to be compiled before 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.

does not have built-in column number AJAX, Route and other functions into the core package, but is loaded as a plug-in.

Supports the features of mixins in component development.

Difference:

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 the template, which can operate the DOM very conveniently and quickly.

(Learning video sharing: web front-end)

The above is the detailed content of What are the three mainstream frameworks for web front-end?. For more information, please follow other related articles on the PHP Chinese website!