preface

In the Web 1.0 era, there was no concept of a front end, you just wrote the back end together. The code on the front and back ends was mixed together, like the PHP development front and back ends, and then derived from the MVC development pattern and framework.

“Age

At first the MVC

The target

Data, view, and business logic control layers; This allows the code to be cut into independent modules.

advantages

The use of this layered architecture, actually clear, easy to maintain the code.

There is some separation of the front and rear ends, but it is not clear

The original MVC was limited to the server side (the back end), rendering on the server side. The front-end only completes the View layer in the back-end development (just writes the template file, and writes the dynamic content according to the template syntax);


The Model layer provides data queries.


The View layer is parsed through the template engine. Parses it into actual HTML content, and the browser renders it

disadvantages
  1. Front-end page development efficiency is not high

The front end appears as a static page; Very few JS interactions; It is inefficient to hand code to the back-end programmer, who is using the template syntax to make it dynamic.

  1. Front and rear end blame is not clear

Is generally a programmer, before and after the end of the catch, will also be a lot of, front-end compatibility, back-end syntax and so on.

Web2.0 era

With the advent of Google’s GMAI, Ajax technology became popular around the world, making the responsibilities of the front and rear end much clearer. The front end can interact with the back end through Ajax.

The front end: Using HTML, CSS, JavaScript (to write the Ajax request in JS), the front end fetching the data through the Ajax request, the front end interacting and rendering.

The back-end: Just return the basic structure of the data to the front end.

Data interaction with the back-end server through Ajax; The front end only needs to develop the content of the page, and the data is provided by the back end. Ajax enables page implementations to partially refresh, reducing server-side load and traffic consumption. This is why we have full-time front-end engineers, and at the same time, a variety of front-end libraries have slowly developed, such as the early jQuery

advantages

Flow consumption is smaller, local refresh; User Experience Enhancement

disadvantages

The development model carries more complex business requirements, and once the application scales up, it can still be difficult to maintain because HTML, CSS, and JS are all mixed together. So we need design patterns and frameworks. The front-end MVC will follow

MVC

MVC framework is divided into front-end MVC and back-end MVC; The front-end MVC is similar to the back-end, simulating the architecture of the back-end; The Model is responsible for saving the application data and synchronizing it with the background data. The Controller is responsible for the business logic and modifying the Model data according to the user’s behavior. Responsible for the presentation of the view and the visualization of the data in the model

Let’s have a look at a model

It was really hard to draw. It took ten minutes to draw one picture. It’s not very nice either. It’s because I don’t use the software very much. If there is any mistake, it must be my fault. Hahahahaha

The View is going to notify the Controller through events, and the Controller is going to change the Model, and the Model is trying to somehow notify the View to update.


It works in theory, but often in practice, it doesn’t work that way. Because the development process is not flexible. For example: a small event operation, must go through such a process, then the development is not convenient.

In a real scenario, it might be another pattern, like this:

Let’s draw a picture. Let’s find it on the Internet.



Backbone. js framework is like this.

View can operate Model, Model change can also View; Thus the controller layer is very thin, dispensable; (inside the controller becomes a simple data monitoring and call)

Cons: Error difficult to locate, data cluttered

‘Because of the MVC framework defects, there is the MVVM framework. The first was the MVVM framework pattern used by AngularJS. MVP front-end development is not common, but in Android native development, developers still take it into account. `

MVP

An MVP is very similar to an MVC, and as you can see, there can be a lot of confusion. An MVP is used as a middleman, a sort of middleman for the flow of data between the View and the Model, and if the data and the View must interact, it must go through a middleman.

Presenter is responsible for two-way interaction with the Model, and two-way interaction with the View.


If the business is more complex, Presenter is bulky and cumbersome, which makes it difficult to maintain.

MVVM

MVVM can be decomposed into (Model-View-ViewModel); ViewModel can be thought of as a progression to a Presenter.



The ViewModel, which is basically the glue layer, the core idea is to simplify

1. When data changes, how to know the change? Through the data responsive mechanism, how to know the change of the data with a certain mechanism, and automatically respond to the change of the data and update it automatically; The internal knows the change of the data, does not need the user to operate.

  1. Update, used to do DOM manipulation, using JQ; Data change to do DOM operation to update (code, inefficient); So there is a virtual DOM way to do the update, according to the precise DIFF algorithm to do the comparison; Achieve efficient results.

Data driven through reactive and virtual DOM. If the data changes, the direct view updates; Developers only need to modify the data, not manipulate the DOM; Don’t worry about anything else. `

How does the view layer change the data layer? As before, for data listening, the template engine has a syntax for event handling, which makes it easy to write out how to do these event listening

advantages

The ViewModel automatically responds to changes in the data in the Model by implementing a data-responsive mechanism. The ViewModel also has a set of update strategies to automatically convert the data into View updates and modify the data in the Model through the interaction of the user in the View in response to the event listening so that the developer can focus on the business logic. Take into account development efficiency and maintainability

conclusion

The three frameworks, which reflect the development of the Web front end, are responsible for:

  1. Layer code
  2. Responsibilities (front and back end) division
  3. Solve maintainability issues
  4. Solve the coupling problem between Model and View

MVC gets up early and focuses on the back end; Backbone. js is an early application.

Advantages: Clear layering (at first, clearer than before)


Disadvantages: data flow chaos, maintainability problems with flexibility

The MVP mode is an evolutionary form of MVC. Persenter, as the middle layer, is responsible for MV communication and solves the coupling relationship between the two. However, the overstaffing of the middle layer will lead to maintenance problems

The MVVM pattern is now more extensive in the front-end domain. It not only solves the coupling problem of MV, but also solves a lot of complex code and DOM operation code to maintain the mapping relationship between them. Improved development efficiency.