Front-end framework management

This time I will bring you front-end framework management. What are the precautions for front-end framework management? Here are actual cases, let’s take a look.

The three most popular front-end frameworks today are Angular2+, Vue, and React. All of them use the ideas of componentization and modularization to make front-end development more standardized.

But the shortcomings are also obvious. In addition to incomplete documentation, lack of cases, and high learning costs, state management between components is also a big problem. Componentization is a good thing, but if the data flow between components is not properly handled, it will cause negative impacts such as project confusion and difficulty in maintenance.

Let’s first talk about why state management is needed:

For example, two lists refer to the same data source. The user makes changes to one of the lists, and the other list The data will also change accordingly. The solution when using angular1 is very simple, just use $rootScope. But when it comes to the three major frameworks, there is no concept of $rootScope. What should I do if I want to achieve synchronous update of data?

Some people may say that this is simple. When the user makes changes to the first table, we send a message to the second table and let it change the corresponding data. But what if there are 10 tables or 20 tables? Are you going to give notices one by one? If other components also use this data source, will they also be notified of updates?

So this solution may be feasible when the project is simple, but when the project becomes complex, problems will be exposed immediately. In order to prevent future projects from being overturned, we should still think about it from the beginning.

The concept of state management is to deal with complex data flow.

The three major frameworks implement state management methods:

Vue: Vuex

React: Redux (dva.js)

Angular2+: Redux ( ngrx)

Although the three major frameworks have different solutions for implementing state management, the underlying ideas are the same. Here’s a rough introduction: In order to achieve state management in the

project, has added several new modules: reducers, effects, services, models. If it is angular2+, there are also actions.

Let’s first talk about the functions of these modules:

models: data model. Stores the data itself and methods for modifying the data. In angular2+, models store entities. Those who have studied back-end should be familiar with it. It is a statement about data.

reducers: Responsible for synchronization operations. For example, the requested form data is stored in the data model, the user adds/delete a certain piece of data, and the original data is modified.

services: An encapsulation of the action of requesting data, generally including methods for obtaining data. Such as getList(), getUsers().

effects: Responsible for asynchronous operations. For example, after receiving the user's request action, call service to request data from the server. If it succeeds, it will call reducers to save the data. If it fails, it will perform another action.

angular2+ also abstracts a layer of actions, which is an encapsulation of various actions. For example, data is loaded, the data is loaded successfully, the user deletes the data, etc. Contains the type of data and payload (data used to modify the data)

A user operation, such as searching for the corresponding product, when the user presses the confirmation button, the entire process can be summarized as ：

The user issues instructions -> dispatch calls reducers to modify the status, and the corresponding component enters the loading state -> effects calls services to obtain data -> The data is obtained successfully, calls reducers to save the data and ends loading -> Rendering Go to View.

When reducers are called to update data, all views bound to the model will be updated synchronously, and each processing logic becomes quite clear. Although the project complexity will increase, it will definitely be much more convenient to maintain.

If you find it difficult to understand, you can start with these two cases:

vuex counter + list display: http://www.cnblogs.com/axel10/p/8536688.html

dva.js counter + list display: http://www.cnblogs.com/axel10/p/8503782.html

The most suitable one for getting started is Vue, then React (using dva.js), and the most difficult one is angular2+. Angular2+ involves Rxjs and TypeScript, and there are many knowledge points. No matter whether it is difficult or not, always remember to start from the shallower to the deeper, and don’t fantasize about reaching the sky in one step. If you are not even familiar with angular1, then please use angular1 well first, understand MVC ideas well, and then get involved in the three major frameworks. Otherwise, you are likely to get half the result with twice the result and waste a lot of time.

As a front-end engineer, if possible, it is recommended to learn a back-end language, such as java, c#, which will be of great help in understanding the front-end framework.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

What classes define components in React

Vue.js form input binding

The above is the detailed content of Front-end framework management. For more information, please follow other related articles on the PHP Chinese website!