Exploring the MVC, MVP, and MVVM design patterns

The user interface often contains a lot of cluttered code primarily because of the complicated logic it needs to handle. The presentation patterns are design primarily with one objective in mind, reducing the complex code in the presentation layer and making the code in the user interface clean and manageable. In this post, I will present a discussion on the MVC, MVP, and MVVM design patterns and highlight when one should be the design of choice over the other.

Model View Controller

The Model View Controller (commonly known as MVC) framework helps you to build applications that are easier to test and maintain. It comprises of three major components, namely:

1. Model — this is the layer that represents the application’s data
2. View — this represents the presentation or the user interface layer
3. Controller — this layer typically contains the business logic of your application

The primary objective of the MVC design pattern is separation of concerns to facilitate testability. The Model View Controller design pattern enables you to isolate the concerns and makes your application’s code easier to test and maintain. In a typical MVC design, the request first arrives at the controller which binds the model with the corresponding view. In the MVC design pattern, the view and the controller makes use of strategy design and the view and the model are synchronized using the observer design. Hence, we may say that MVC is a compound pattern. The controller and the view are loosely coupled and one controller can be used by multiple views. The view subscribes to the changes in the model.

Model View Presenter

The MVP (Model View Presenter) design pattern also comprises of three components – the model, the view and the presenter. In the MVP design pattern, the Controller (in MVC) is replaced by the Presenter. Unlike the MVC design pattern, the Presenter refers back to the view due to which mocking of the view is easier and unit testing of applications that leverage the MVP design pattern over the MVC design pattern are much easier. In the MVP design pattern, the presenter manipulates the model and also updates the view. There are two variations of this design. These include the following.

1. Passive View — in this strategy, the view is not aware of the model and the presenter updates the view to reflect the changes in the model.
2. Supervising Controller — in this strategy, the view interacts with the model directly to bind data to the data controls without the intervention of the presenter. The presenter is responsible for updating the model. It manipulates the view only if needed — if you need a complex user interface logic to be executed.

While both these variants promote testability of the presentation logic, the passive view variant is preferred over the other variant (supervising controller) as far as testability is concerned primarily because you have all the view updated logic inside the presenter.

The MVP design pattern is preferred over MVC when your application needs to provide support for multiple user interface technologies. It is also preferred if you have complex user interface with a lot of user interaction. If you would like to have automated unit test on the user interface of your application, the MVP design pattern is well suited and preferred over the traditional MVC design.

Model – View – ViewModel (MVVM)

The Model – View – ViewModel (MVVM) is a variation of Martin Fowler’s Presentation Model design pattern. The MVVM is a refinement of the popular MVC design and the ViewModel in MVVM is used to facilitation Presentation Separation. In the MVVM the logic is stored in the presenter and the view is completely isolated from the model. While the presenter isn’t aware of the view, the view is aware of the presenter — the presenter in MVVM is used to represent an abstract view of the user interface. A passive view implies that the view doesn’t have any knowledge of the model. In the MVVM design pattern, the View is active and contains behaviors, events and data binding information. Note that the view in MVVM is not responsible for managing the state information — the view is rather synchronized with the viewmodel. The viewmodel in MVVM is responsible for presentation separation and exposes methods and commands to manage the state of a view and manipulate the model.

How does the view and the viewmodel in MVVM communicate? Well, the view and the viewmodel in MVVM communicates using methods, properties and events. The bi-directional databinding or the two way databinding between the view and the viewmodel ensures that the models and properties in the viewmodel is in sync with the view. The MVVM design pattern is well suited in applications that need support for bi-directional databinding.