Differences Among MVC, MVP, and MVVM Design Patterns

Introduction

During software development, we build solutions those addresses needs of customers and solve problems of users and businesses. To achieve this, different technologies and architecture patterns—such as Model-View-Controller (MVC), Model-View-ViewModel (MVVM), and Model-View-Presenter (MVP)—are used. All these design patterns help when developing applications that are loosely combined, easy to test and maintain, and formalized best practices that facilitate reusable object-oriented development and easier to maintain and change than an application’s architecture.

Architecture Patterns

An Architectural Pattern is a way of solving a recurring architectural problem. On the other hand, an Architectural Style is just a name given to a recurrent architectural design. A single architecture can contain several architectural styles, and each architectural style can make use of several architectural patterns. Architecture patterns most often apply to the runtime structure of the system. Following are commonly used architectural patterns.

Model View Controller (MVC) Pattern

The Model View Controller (MVC) is one of the first architectural patterns developed for Web applications. A MVC pattern allows us to develop applications with separation of concern, which, in turn, improves testability, maintainability, and extendibility with minimum effort. In a traditional application development, we used to create a view using a window or user control, or page and write all logical code in a code-behind file, making the code a part of the view definition class itself. This approach increased the size of the view class and created a very strong dependency among UI, data binding logic, and business operations. The MVC architecture pattern is designed to reduce the code at the user interface (UI) level, making code ‘cleaner’ and more manageable.

With a MVC pattern, a Web application is composed of the following:

  • Model (data): The Model handles data and business logic. There are no dependencies among the Model and the Controller or View.
  • View (interface to view and manipulate data): The View presents the data to the user in the supported format and required layout.
  • Controller (operations and actions performed on the data): The Controller is responsible for determining which View is displayed in response to any action, including when the application loads. In MVC, every action in the View basically calls to a Controller along with an action.

MVC Design Pattern
Figure 1: MVC Design Pattern

Following is the sequence of steps executed during the MVC application request life cycle.

  1. User hits the URL in browser.
  2. Incoming request directed to Controller.
  3. Controller processes request, identifies, and forms a data Model.
  4. Model is passed to View.
  5. View transforms Model into appropriate output format.
  6. Response is rendered in browser.

MVC Application Flow
Figure 2: MVC Application Flow

Model View Presenter (MVP) Pattern

The MVP pattern is similar to the MVC pattern. The only change is that the controller is replaced by the presenter. The View displays and manages the page controls. The Presenter is responsible for addressing all user interface events on behalf of the view. It receives input from users via the View, and then process the user’s data through the Model that passes the results back to the View.

In the case of MVP, the view binds to the Model directly through data binding. In this case, it’s the Presenter’s job to pass off the Model to the View so that it can bind to it. The Presenter will also contain logic for gestures such as pressing a button or perform navigation. MVP is a complex pattern to implement for advanced solutions, but certainly has great benefits if implemented as a well-designed solution. This pattern is commonly used with ASP.NET Web Forms and Windows Forms applications.

MVP Design Pattern
Figure 3: MVP Design Pattern

Model View ViewModel (MVVM) Pattern

MVVM is refined from MVC; it supports two-way data binding between View and ViewModel. This allows automatic propagation of changes inside the state of ViewModel to the View.

The MVVM pattern includes three key parts:

  • Model: Represents the data with validation and business logic.
  • View: View is active with behaviors, events, and data binding. View synchronizes with the ViewModel, which enables the separation of the presentation and exposes methods and commands to manage and manipulate the Model.
  • ViewModel: Separates the View from the Model, and exposes methods and commands to manipulate the data (Model). ViewModel does not need a reference to a view. The view binds its control value to properties on a ViewModel.

MVVM Design Pattern
Figure 4: MVVM Design Pattern

Conclusion

I hope this article has given you good information about the major differences among the three patterns. The MVC pattern is most popular and is used for ASP.NET, iOS, and Android development. The MVP pattern is mostly used for ASP.NET Web Forms applications, and MVVM is used for WPF and Silverlight development.

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read