The user interface often has a lot of cluttered code mainly due to the complicated logic it has to handle. Presentation templates are designed primarily with one goal in mind, to reduce complex code in the presentation layer and to make user interface code clean and manageable. In this article, I will present a discussion of 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 framework (commonly known as MVC) helps you build applications that are easier to test and maintain. It has three main components, namely:
- Model – this is the layer that represents the application data
- View – this represents the presentation or user interface layer
- Controller – this layer usually contains the business logic of your application
The main goal of the MVC design model is the separation of concerns to facilitate testability. The Model View Controller design pattern allows you to isolate issues and makes it easier to test and maintain your application code. In a typical MVC design, the request first arrives at the controller which binds the model to the corresponding view. In the MVC design model, the view and controller use the policy design, and the view and model are synchronized using the observer design. Hence, we can say that MVC is a compound pattern. The controller and the view are loosely coupled, and one controller can be used by more than one view. The view subscribes to model changes.
Model View Presenter
The Model View Presenter (MVP) design model also includes 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 model, the presenter refers to the view which makes it easier to poke fun at the view and unit testing of applications that leverage the MVP design model compared to the MVC design model is much easier. . In the MVP design model, the presenter manipulates the model and also updates the view. There are two variations of this design. These include the following.
- Passive view – in this strategy, the view does not know the model and the presenter updates the view to reflect the changes made to the model.
- Supervisory Controller – In this strategy, the view interacts directly with the model to tie data to data controls without presenter intervention. The presenter is responsible for updating the model. It manipulates the view only when necessary – if you need complex user interface logic to execute.
While these two variants promote testability of the presentation logic, the passive view variant is preferred over the other variant (supervisory controller) when it comes to testability mainly because you have all the updated view logic. inside the presenter.
The MVP design pattern is preferred over MVC when your application needs to support multiple user interface technologies. It is also best if you have a complex user interface with a lot of user interactions. If you want to have automated unit testing on your app’s UI, the MVP design pattern is well suited and preferred over traditional MVC design.
Model – View – ModelView (MVVM)
The Model – View – View Model (MVVM) is a variation of Martin Fowler’s Presentation Model design model. The MVVM is a refinement of the popular MVC design and the ViewModel in MVVM is used to facilitate the separation of presentations. In the MVVM, logic is stored in the presenter and the view is completely isolated from the model. Although the presenter does not know the view, the view knows the presenter – the presenter in MVVM is used to represent an abstract view of the user interface. A passive view implies that the view has no knowledge of the model. In the MVVM design model, the view is active and contains behaviors, events, and data binding information. Note that the view in MVVM is not responsible for handling state information – the view is instead synchronized with the view model. The view model in MVVM is responsible for separating presentations and exposes methods and commands to manage the state of a view and manipulate the model.
How do the view and the view model in MVVM communicate? Well, the view and the view model in MVVM communicate using methods, properties, and events. Bidirectional data binding or bidirectional data binding between the view and the view model ensures that the models and properties of the view model are synchronized with the view. The MVVM design pattern is well suited for applications requiring two-way data link support.