Skip to content

Instantly share code, notes, and snippets.

@addyosmani
Created January 12, 2012 19:02
Show Gist options
  • Save addyosmani/1602405 to your computer and use it in GitHub Desktop.
Save addyosmani/1602405 to your computer and use it in GitHub Desktop.
MVP

#MVP

Model-view-presenter (MVP) is a derivative of the MVC design pattern which focuses on improving presentation logic. Whilst both MVC and MVP target the separation of concerns across multiple components, there are some fundamental differences between them. For the purposes of this summary we will focus on the version of MVP most suitable for web-based architectures.

##Summary

The P in MVP stands for presenter. It's a component which contains the user-interface business logic for the view. Unlike MVC, invocations from the view are delegated to the presenter, which are decoupled from the view and instead talk to it through an interface. This allows for all kinds of useful things such as being able to mock views in unit tests.

The most common implementation of MVP is one where the view is passive (dumb), containing little to no logic. MVP models are almost identical to MVC models and handle application data. The presenter acts as a mediator which talks to both the view and model, however both of these are isolated from each other. They effectively bind models to views, a responsibility which was previously held by controllers in MVC. Presenters are at the heart of the MVP pattern and as you can guess, incorporate the presentation logic behind views.

Solicited by a view, presenters perform any work to do with user requests and pass data back to them. In this respect, they retrieve data, manipulate it and determine how the data should be displayed in the view. In some implementations, the presenter also interacts with a service layer to persist data (models). Models may trigger events but it's the presenter's role to subscribe to them so that it can update the view. In this passive architecture, we have no concept of direct data binding. Views expose setters which presenters can use to set data.

The benefit of this change from MVC is that it increases the testability of your application and provides a more clean separation between the view and the model. This isn't however without it's costs as the lack of data binding support in the pattern can often mean having to take care of this task separately.

##Why use MVP over MVC?

MVP is generally used most often in enterprise-level applications where it's necessary to reuse as much presentation logic as possible. Applications with very complex views and a great deal of user interaction may find that MVC doesn't quite fit the bill here as solving this problem may mean heavily relying on multiple controllers. In MVP, all of this complex logic can be encapsulated in a presenter, which can simplify maintenance greatly.

As MVP views are defined through an interface and the interface is technically the only point of contact between the system and the view (other than a presenter), this pattern also allows developers to write presentation logic without needing to wait for designers to produce layouts and graphics for the application.

Depending on the implementation, MVP may be more easy to automatically unit test than MVC. The reason often cited for this is that the presenter can be used as a complete mock of the user-interface and so it can be unit tested independent of other components. In my experience this really depends on the languages you are implementing MVP in (there's quite a difference between opting for MVP for a JavaScript project over one for say, ASP.net).

At the end of the day, the underlying concerns you may have with MVC will likely hold true for MVP given that the differences between them are mainly semantic. As long as you are cleanly separating concerns into models, views and controllers (or presenters) you should be achieving most of the same benefits regardless of the pattern you opt for.

##MVP in JavaScript Frameworks

There are very few, if any architectural JavaScript frameworks that claim to implement the MVP pattern as most tend to opt for the MVC/MV* moniker instead. Some developers do however feel that Backbone.js better fits the description of MVP than it does MVC. The presenter more closely describes Backbone.View (the layer between View templates and the data bound to it) than a controller does, the model fits Backbone.Model and the views best represent templates (e.g Handlebars/Mustache markup templates).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment