preface

This is the first day of my participation in the wenwen Challenge

Back in the web1.0 era, when there was no front and back end of the program, programmers were writing the front and back end together, and the front and back end of the code was mixed together, as shown below

In this development mode, because there is no need to communicate and cooperate with other personnel during development, both the front and back end codes are written together. The advantages and disadvantages are as follows:

Advantages: Simple and quick

Cons: Code is hard to maintain

In order to make the development more convenient, the code is easier to maintain, and the responsibilities of the front and back end are clearer. MVC development pattern and framework were derived, and the front-end display appeared in the form of templates. When I was an intern, the development mode of the company I worked for was this development mode. The development mode is shown as follows:

With this layered architecture, the responsibilities of the front and back ends are clear and the code is easy to maintain. But the MVC here is limited to the back end, there is some separation between the front end and the back end, and the front end only completes the view layer in the back end development

Disadvantages:

  1. Front-end page development efficiency is not high
  2. Unclear responsibilities at the front and back ends

Since the advent of Gmail, Ajax technology has taken over the world. With Ajax, the responsibilities of the front and back end are much clearer. Because the front end can interact with the back end through Ajax, the overall architecture diagram changes to this one.

Through Ajax and background server data exchange, front-end developers, only need to develop the page this part of the content, data can be provided by the background. Ajax can also update parts of a web page without reloading the entire page, reducing server load and traffic consumption and improving the user experience. At that time, there began to be full-time front-end engineers, at the same time, the front-end class library gradually began to develop, such as the most famous jquery at that time.

Cons: Lack of a viable development model to accommodate more complex business needs, page content is mixed together, and once the application scale increases, the project becomes difficult to maintain. Hence the front-end MVC framework

Architecture evolution after back-end separation -MVC, MVP, MVVM

MVC

The FRONT-END MVC is similar to the back-end, with view, Controller and Model.

  • Model: Saves application data and synchronizes it with back-end data
  • Controller: Responsible for the business logic that modifies model data based on user behavior
  • View: Responsible for View display and visualization of data in model

The three forms the model shown here:

In actual development, we tend to see another pattern:

This mode is more flexible in development, backbone.js is this mode

However, this flexibility can lead to serious problems:

Data flow is chaotic. The diagram below:

View is big and Controller is thin: Because many developers write logic code in view, gradually the content in view gets bigger and the Controller gets thinner and thinner

As flawed as it is, there will be changes, and the front-end changes seem to have skipped the MVP model because Angular brought the MVVM framework to the front end early. MVP mode, while not common in front-end development, is still considered in native development like Android

MVP

MVP is very close to MVC. The P stands for Presenter, a middleman who is responsible for the flow of data between the View and the Model and prevents the View from communicating directly with the Model. We can look at the diagram

As we can see from the figure, Presenter is responsible for two-way interaction with Model, which is less flexible than MVC. View becomes passive View and itself becomes small. Although it is divided into View and Model, as the application grows larger, The Presenter is too large to maintain, and needs to be fixed. The answer may be found in the thinking of MVVM

MVVM

What is MVVM? MVVM can be decomposed into model-view-viewModel. ViewModel can be regarded as an advanced version of Presenter, as shown in the following figure:

ViewModel automatically responds to data changes in Model by implementing a set of data response mechanism;

At the same time, the ViewModel implements a set of update policies that automatically translate data changes into view updates

Modify the data in the Model by responding to interactions in the View with event listeners

This makes a lot of DOM manipulation code handy in the ViewModel

MVVM keeps the VIEW and Model loosely coupled while reducing the code that maintains their relationship, allowing users to focus on business logic while balancing development efficiency and maintainability

conclusion

  • All three are framework patterns designed to solve the problem of coupling Model and View.
  • MVC pattern appeared earlier and was mainly applied in the back end, such as Spring MVC, Asp.NET MVC, etc. It was also applied in the early front-end field, such as backbone.js. Its advantages are clear layering, while its disadvantages are data flow chaos and maintenance problems caused by flexibility
  • MVP mode is in the evolution form of MVC. Presenter, as the middle layer, is responsible for MV communication, which solves the coupling problem between the two. However, the bloated P layer will lead to maintenance problems
  • MVVM mode is the mainstream front-end mode at present, has a wide application in the front-end field, it not only solves the MV coupling problem, but also solves the maintenance of the mapping relationship between a large number of complex code and DOM operation code, in improving the development efficiency, readability while maintaining superior performance