Don’t ask me about MVC, MVP, MVVM again


There are a lot of similar discussions on the Internet. such as

Ruan YifengDiagram of MVC, MVP and MVVM

Liao XuefengMVVM

Situ Zhengmei:Each with a sentence to summarize the differences between MVC, MVP, MVVM


However, what is said is often conceptualized and vague, which is difficult for beginners to understand. This article uses the simplest example to explain these three, after reading this article, you will not be entangled with this question again


The origin and purpose of framework

1. Framework is a reusable design component

Framework is born for large-scale reuse, for large-scale projects. Small projects do not need frameworks because they do not require large-scale reuse.

It should be very easy to reuse components and migrate projects.

2. The framework provides a fixed and structured way to organize code.

The goal of the framework is to accumulate knowledge effectively. Therefore, the relevant technology should be fixed in a fixed format, in the form of code, document, model and so on.

It is shown as follows: the framework specifies the structure level of code (high cohesion and low coupling), as well as the relationship between each level; interaction and control process.

This may be a bit abstract, simple to understand: the framework is to specify the structure hierarchy, what each layer is used for. Then you program according to the paradigm of the framework, which helps you deal with the interaction and control between layers.




View layer: user interface

Controller layer: business logic and routing

Model layer: data structure, data storage

Take JSP as a page template development as an example, other ASP / PHP are similar (for convenience, V is used to represent view, C is used to representcontroller, m stands for model. The same applies to the following examples.)

View layer:

JSP page templates belong to this layer.

Controller layer:

A servlet that responds to user actions of JSP pages and processes them. Servlets need to obtain some data structures and data from the model, and transfer the data to the model layer for saving. Therefore, the data flow is from C to m, and M can also go to C.

The routing function in servlet processing will tell the server which JSP page to display next after processing. This is just the routing function. There is no interaction and data transmission between the servlet and the “JSP page to be displayed next”. So V to C is single.

Model layer:

This layer mainly defines the basic data structure and data storage. In JSP page template, we need to get the latest data assembly page from m layer, so it is m to v.

At this point, we should have a better understanding of the MVC framework.


There are other variants of MVC framework, which are all based on this pattern. The C and M layers must be two-way. I can’t agree with the one-way mode, and I can’t think of any scenario where one-way can solve all problems.

In complex business, C layer must read data processing business from m layer. If this is not true, then all the C layer can do is routing. We can imagine how thin the C layer will be and how thick the m layer will be. This is certainly not the goal of the framework, nor is it a good framework.




View layer: user interface

Presenter layer: business logic and routing

Model layer: data structure, data storage


Why MVP? From the MVC process, we can see that the V layer data is obtained from the m layer. What does it mean to interact directly at the top and bottom?

There is no problem when there is no division of labor between the front end and the back end. The developers of layer V are the developers of layer M. therefore, they know the data structure of M and know how to obtain what data they want.

However, the v-layer is becoming more and more complex, the emergence of local page rendering with Ajax and the division of work between the front and rear end lead to the v-layer developers focusing more on interaction design, and have no energy to control the details of layer M.

At this time, the V layer hopes that there is a specific interface to return the agreed data. These data may be very different from the data in the m layer, and there should be an intermediate layer to provide it. The previous MVC C C layer is more suitable for this. So it becomes the p layer, which not only does the work of layer C, but also provides various functional interfaces for layer V.

Now layer V and layer m are completely separated. Both front and back-end developers can focus on what to do.




View layer: user interface, response to ViewModel change processing

ViewModel layer: interface business logic and routing

Model layer: background business logic, data structure, data storage


MVVM is more like a front-end programmer’s self-interest. Of course, its emergence is also necessary, the complexity of the front-end exponential rise. For example, you can see a pure front-end graphical programming system like scratch. The code amount is tens of millions of behavioral units. It is necessary to design a framework for such a huge system. MVVM was born for this.

In the view of MVVM, layer m is not the key. You can regard the whole background as m layer.

Layer V is the user interface, and perceives the change of VM layer data. Layer V will follow the change (you don’t need to know how layer V perceives the change of VM layer data, which is what the framework helps you do).

The VM layer is the point. In the framework, the VM layer defines the direct data structure required by the V layer (so it carries the word model). The events and data changes of the V layer will flow through the framework to the VM layer for processing, business logic processing, data change and interaction with m layer.

Angular, Vue and react are all similar. Simple understanding: in the front-end development, the template is the V layer, the background belongs to the m layer, and the part developed according to the paradigm of the framework is the VM layer.

If you are careful, you may see that the VM layer contains“Routing”Function. In the framework of MVC and MVP, routing belongs to the server function. With the rise of single page, routing has been brought into the front-end functional circle. Smart you should think about it,The MVVM framework is also built for single pages

Of course, these MVVM frameworks support server-side rendering. Once they are used for server-side rendering, the frameworks will lose the responsiveness of layer V, and they will directly program and practice a template engine, which can no longer be called MVVM framework.



At this point, you should have a good understanding of the three frameworks.

Both MVC and MVP are designed to simplify the server-side rendering view. MVVM is designed to simplify front-end page development.

The above example is described as a web page. Similarly, it is possible to extend it to other view interaction applications.

As a digression, the difference between framework and library is obvious. The library only provides extended functions, while the framework specifies the code layering and requires you to code according to its structure. That’s why jQuery is not a framework.