Overall architecture idea: from the timeline, Web1.0 to Web2.0, from the back-end MVC, to the front-end MVC, and then to MVP to MVVM.Copy the code

1. “era

1.1 Unstructured Mode:

Many systems are based on server rendering, all data query, logic processing, display are completed in the server. Such as JSP, ASP.NET, PHP. The client displays the returned HTML, JS, and CSS directly.

  • Disadvantages: the server side is under great pressure, all processing is concentrated in the server side, the logic coupling degree of the front and back end of the code is too high, which is not conducive to maintenance
  • Advantages: The architecture is simple and easy to understand, the client is very thin, without too much processing, conducive to SEO

1.2 MVC Mode (Server) :

Server-side layered architecture MVC

  • M: Model Data Model layer
  • V: View View layer
  • C: Controller Controller logic layer

Common ones are SSH, springMVC, asp.net MVC

View renders data primarily using some template syntax.

At that time, there was no strict front and back end, so much learning content that they were not proficient in each, and gradually separated from the front end. At that time, the front end was simply to convert the design draft into HTML and simple JS interaction, commonly known as: cutting diagram son.

  • Advantages: Hierarchical architecture, clear responsibilities, and easy maintenance
  • Disadvantages: the front-end page development efficiency is not high, the responsibilities of the front and back end is not clear

2. Web2.0 era

2.1 No Architecture Mode:

Since the advent of Gmail, with Ajax technology, the responsibilities of the front and back end are clearer, and the front end can dynamically update and interact with the back end, which requests data from Ajax, based on the interface.

  • Advantages: The front end is more focused on the realization of the development page, data is provided through the background interface, ajax to achieve partial refresh, reducing the server load interaction and traffic consumption, user experience is improved. There are also libraries for manipulating the front-end UI, such as JQuery
  • Cons: Applications are getting larger due to the increasing complexity of front-end pages and businesses. The interoperation of data and dom becomes difficult to maintain.

2.2 MVC Mode (client) :

2.2.1 front-end MVC

  • Model: Is responsible for saving data
  • Controller: Is responsible for the business logic and changes to the model based on user behavior
  • View: Responsible for View display and visualization of model data

It’s all one-way flow

  • The view to inform the controller
  • The controller to change the model
  • The model notifies the View of updates

Disadvantages: To use, a new change requires implementing multiple layers of code. Inconvenient, for example: PureMVC.

2.2.1 Front-end MVC- Another pattern

  • Advantages: Flexible data flow, such as backbone.
  • Disadvantages: 1. Since both view and Controller can change model, Model does not know who changed it, and the project becomes chaotic. 2. Since View can also change model, a large amount of business is written in View, weakening controller. Controller becomes optional.

2.3 MVP Mode (Client) :

  • Model: Is responsible for saving data
  • View: Responsible for View display
  • Presenter: a middleman that handles the flow of data between a Model and a view. A Model and view do not interact directly with each other.

Advantages: More flexible than MVC, clearer relationship between View and model. They do not directly affect each other. Cons: All models and Views create a lot of interface code through Persenter to handle accept and update actions. Persenter is becoming more and more bloated. Maintenance trouble.

It's mostly in android native developmentCopy the code

2.3 MVVM Mode (Client) :

  • Model: Is responsible for saving the data and all the logic for the application
  • View: Responsible for View display
  • The ViewModel layer is a glue layer that contains dom listening + DOM operation encapsulation instructions.

The VM handles the updating of the View and Model layers automatically, mostly by being responsive, instead of persenter in MVP.

Advantages: Reduces a lot of DOM manipulation, decouples view and model, reduces the relationship between the maintenance layers, and only needs to focus on the logical processing of the data layer. Disadvantages: Because it is generated by the framework, if you need to do detailed optimization and transformation, you need to understand the implementation principle of the framework.

conclusion

  1. All three are frame models
  2. MVC appeared in the early stage of back-end development, such as Java SSH and SpringMVC. The front-end also had corresponding frameworks, such as backbene. js, mainly to solve the decoupling problem between View and model
  3. MVP is the evolution of MVC to solve the tedious problem of MVC development. Both view and model communicate through presenter, but since both are written in presenter, they will become bloated and difficult to maintain
  4. MVVM, VM is the evolution of Presenter, automatic processing of presenter originally to write a lot of logic, through the response + command mode, automatic processing update view and model problems. Greatly improve the development efficiency, and good performance.