Vernacular MVC, MVP, MVVP

Vernacular MVC, MVP, MVVP

Note that the origin and function of MVC, MVP and MVVP are explained purely through examples, without involving a specific language. Specific to various languages and software systems reflect different, but the principle is the same. The principle is the most important

Suppose to develop a soft fate index software, the software is as follows:

It is an app that calculates the fate index by clicking a button after entering the names of boys and girls. Of course, the software itself is very simple, but in order to better demonstrate, it is impossible to give a real example of a large project, because the software itself is too simple, the actual design of the architecture is very weak, so you have to imagine the software is very complex! Otherwise, it’s tempting to think that there’s no use in designing architecture this way.

The initial stage

In the initial stage, programmer Xiao Ming wrote this software without thinking about anything, directly started the code code, the results used to display the page code, used to obtain the user input content code, get the user input content to calculate the fate index code, and so on code business all written in a file. Completed the development of this software.

As a result, After a period of time, Xiao Ming left his job and Xiao Hua took over his code. When Xiao Hua saw this code, he silently shed tears. There were more than 10,000 lines of code in a file, and codes with various functions were mixed together, which was a complete hotchpoach. So Xiao Hua decided to write it all over again, because it was impossible to maintain the mess and it was more expensive to change it than to write it!

MVC

Here’s how Xiaohua classifies the program:

• The first is the page, which can be pulled out separately
• Some logic related to page judgment, such as: clicking a button will not do business calculation if nothing is filled in. The operation to invoke specific business logic after taking user input
• Specific calculation of fate index business (need to query a large number of data)

The page part is represented by V, which is only responsible for page-related operations, such as button placement, page changes and updates after calculation results, and other page-related operations.

The logic on the control page and the operations that invoke specific business logic are represented by C, in which the only responsibility is to receive instructions from V, then invoke business logic, and operation V

Computing specific data-related business logic is denoted by M.

Xiao Hua wrote the code in this way, which was highly readable and separated from each other. It was no longer a hodgepodge. And the division of labor is also easy, write pages to write pages, write business logic to write business logic and so on.

The flow chart above looks like this:

Of course, you can also see other designs on the Internet, all kinds of have, in fact, this depends on the author is how to think, there is no standard answer. The main idea is that it’s layered, it’s not a hodgepodge anymore, and it’s up to you to figure out how they relate to each other.

MVC actually comes closest to this when it’s really used on a large scale

That is, if you don’t touch the complex logic or the data, some simple logic will be handled directly by the Controller, and then the Controller will act on the View. The other thing is that in MVC, the View can communicate directly with the Model.

Of course, if you had to sever the relationship between Model and View, that would be MVP.

That was the beginning of MVC

M means Model is dedicated to doing logic related to data (networked data, local data, complex logic)

V indicates that the View is specifically used to control the page

C means that the Controller takes input from the user, operates on M and V, and essentially calls methods in M and V

MVP

After a period of time, Xiao Hua found that although this architecture was much better than the previous hodgepotch, there was too much mutual dependence between M, V and C. Since View could communicate directly with Model, it caused View to depend on both Controller and Model. The Controller also relies on the View and the Model. The coupling was still too high, so further optimization was carried out. Let M and V completely cut off contact, only through P to communicate.

P then operates on the Model, does business calculations in the Model, and tells Presenter to update the View.

public void updateView(a){
    view.setText("xxxxxx");
}
Copy the code

The Presenter is dependent on the View, so the Presenter can’t unit test it until the page is ready (otherwise it can’t call the methods in the page). The View layer is optimized so that Presenter can only rely on this interface (the interface is easy to write) so that the page can be tested when it is still complete.

Coupling is also reduced through interfaces that other pages can implement.

MVVM

After the MVP has been using it for a while, it still takes a lot of annoying code to get Presenter to call the View method to set up the interface.

Can you tell a View a data structure, and then the View will automatically change according to that data structure?

So you have something called the ViewModel, which you can bind to the View layer. If the ViewModel changes, the View changes immediately.

So what is a ViewModel? Continuing with the above example, the ViewModel looks something like this:

public class SalaryViewModel{
    String sex; // Gender, corresponding to the relevant field in View
    String index; // Marriage index, corresponding to the relevant field in View
  
    / /...
}
Copy the code

When the user clicks the “compute” button on the interface, all they need to do is make changes to the ViewModel. The View will update as the ViewModel changes, so you don’t have to manually set it up.

ViewModel and View binding problem, need to develop a framework to bind the two, Microsoft WPF and Silverlight, Android and other frameworks and systems can achieve the mapping and binding between View and ViewModel.

At this point, the design of the entire architecture is very reasonable, the code is relatively easy to maintain, and the readable lines are relatively high!

conclusion

It is emphasized again that all the above are the design ideas of MVC MVP and MVVP. Specific programs in different languages are reflected differently, and there is no accurate definition. The specific writing method should be defined according to the developer’s own ideas. The goal is to make the different functions of the code independent, readable, and easy to expand and reuse.

Any talk of architecture that does not combine the project with the actual problem is hooliganism

Remember that you can’t just build for the sake of building. If your project is small, moving a messy architecture will only increase your code volume and lead to redundancy. In this case, it is better to refine several methods to make it easier to view and maintain.

At the beginning, all the code mixed together was very redundant and not easy to maintain (of course, if you did some kind of separation and stratification when writing, then this is one of your architectural ideas). In order to solve this problem, WE proposed the MVC architectural mode, which greatly solved the situation of mixing together. However, at the beginning of this thought design, M and V could communicate with each other, resulting in too many dependencies, and then MVP appeared. After the emergence of MVP, the communication between M and V was solved, and the relationship between M and V was completely lost, and P informed V to modify. Later, it was too troublesome for P to inform V to modify it every time, so the idea was to directly modify the view in V through ViewModle when the data in M changed. At this time, MVVM appeared.

The following article explains how these patterns work in Android development.