What is MVP and MVVM?

It is very common to talk about the MVC (Model-View-Controller) pattern. But the acronyms MVP (Model-View-Presenter) and MVVM (Model-View-View-Model) are very little cited. What are they and what is their relationship with MVC?

Author: Gabriel Rodrigues, 2014-06-16
Source

2 answers

Recap what you probably already know:

Model

  • contains the connection to the database or how to access the data
  • has the necessary logic to process the data in the database or other source
  • processes the data obtained from the source and puts it in the necessary form so that the other layers can use it properly.

Data relevant to the system is processed here.

Some of these functions may be in a separate layer, but only the model communicates with it.

View

  • has all the design and formatting of the user interface
  • usually has UI specific validations
  • processes the data obtained in the UI to be made available appropriately to other layers.

Is where there really is a way to present the data. And only visual presentation is made. There is no processing of the system data.

What differentiates the 3 patterns of architecture is the communication between layers and how the third layer is organized and executed.

MVP

MVP is an evolution of MVC that communicates bidirectionally with the other layers, preventing the model from having to communicate directly with the view without going through the Controller and the latter is fundamental for user interaction. MVP decouples functions and makes the architecture even more modular.

  • the layer Presenter is aware of everything that occurs in the other two layers and makes them aware of what she is doing
  • user interaction is primarily done by View, and it can delegate to Presenter certain tasks
  • there is a one-to-one relationship between these layers. In this interface there is a reference from the view to the Presenter but not the opposite.

Is possible to link data from view with the model through data binding. This occurs in the variation Supervising Controller, as opposed to the variation Passive View where the View essentially has only the UI design.

The view can contain code to manipulate the UI.

Because of total decoupling, testing becomes a simpler task.

Windows Forms is an example of MVP.

See more at MSDN Magazine

MVVM

MVVM is a small evolution of MVP on one side and a throwback on the other. In it the viewmodel is not aware of what occurs in the view but it is aware of what occurs in the viewmodel. In the case of the model both are aware of what occurs in each.

The name is given because it adds properties and operations to the model to meet the needs of the view , so it creates a new template for viewing.

You can associate multiple views to one ModelView. It is common for views to be defined declaratively (HTML / CSS, XAML, etc.).

The data binding is done between the View and the viewmodel.

With this pattern you can reduce the amount of code to maintain. Some automations are possible by having all the necessary information in the viewmodel .

viewmodel is only a model more suitable for a specific view (or more than one).

Is a pattern that is closely related to WPF. Its creation is credited to one of the developers of WPF. Although this standard is not mandatory, it is adopted by almost all programmers using WPF. KnockoutJS is an example for web. It is also often used with AngularJS.

This illustration from the Microsoft documentation shows how communication occurs:

MVVM

See more at MSDN Magazine

Conclusion

It is interesting to follow the recommendation of the adopted technology and implement the standard that experts consider the most suitable for it. But this should not be done blindly. It is necessary to assess the specific situation. You can get away a little from what preaches the pattern when there is a reason for this. Of course if you need to change a lot, maybe the standard and maybe even the technology be wrong for the problem. Break a rule if it benefits the application.

One of the most relevant sources on the subject is the Martin Fowler website. I also like of this blog for the examples.

 54
Author: Maniero, 2020-09-04 13:13:43

Basically, the difference is that MVC has the architecture based on Controllers, whereas MVVM has the architecture based on ViewModels, and MVP has an extra presentation layer, called Presenter.

And what is the difference between them?

The Controller exposes the pure model , exactly the data representation that should be persisted on base. In the case of MVVM, what is exposed is a viewmodel , i.e. a another representation of data that is processed before it is saved. In MVP, the Presenter layer mediates between Model and View, acting as an observer of both. Are exposed to the View events that do the reception and processing of data by the model layer.

Ok, but how does this work?

Since there is no Controller in the case of MVVM and MVP, what happens is that all data harmonization logic and relationships between entities (primary layer function Controller) is all resolved in View (presentation).

Specifically speaking of the MVP, there is intense two-way communication:

  • model sends information to the View ;
  • View responds to the model that was successfully mounted.

Or else:

  • View sends data to model for a query or persistence of dice;
  • model answers whether operation was successful or not.

When is it recommended to use?

For cases of systems where the View can be intensely enriched (as in systems that use a lot of JavaScript, for example), both Designs work well.

MVP has a slight advantage over MVVM by enabling the mock Layer View for unit testing.

There is an easy disadvantage to notice, that it is in the case where there are multiple layers of presentation (e.g. HTML/CSS/JavaScript and REST API). In this case, MVVM and MVP become even unviable.

Known Examples

 34
Author: Leonel Sanches da Silva, 2014-06-16 16:53:44