Feb 14, 2014

GUI Design Patterns: MVC, MVP vs. MVVM

There are three famous GUI Design Patterns:
  • MVC: Model - View - Controller (e.g. ASP.NET, Java Swing and JavaFX, JSF)
  • MVP: Model - View - Presenter (e.g. WinForms, Java Swing and JavaFX, see Martin Fowler on GUI Architectures and the Presentation Model)
  • MVVM: Model - View - ViewModel (e.g. .NET WPF, Knockout JavaScript, JavaFX)
These GUI design patterns try to achieve
  • Modularity / Loose Coupling (through "separation of duties/concerns" and dependency injection)
  • Testability (test the different components independently)
  • Maintainability (e.g. changes can be made in one component without touching the others)

What's in common?
  • View: responsible for presentation in GUI (GUI components like buttons, labels etc. and layout & styling)
  • Model: data and behavior (domain objects and logic, services for database interaction)
  • Controller / Presenter / ViewModel: responsible for separation of the latter two (glue logic!)

What's different?

The associations between the three! (see the picture below) First of all, the MVVM pattern is just a specialization of the MVP, that is more loosely coupled through the concept of data binding.
The difference between MVP/MVVM and MVC is, that the View and the Model are completely decoupled - that's a good thing :-)
The black arrows represent a direct association, the red dotted arrows an indirect association (e.g. Observer Pattern/Events/Data Binding)

A good talk explaining this is "MVC,MVP and MVVM: A Comparison of Architectural Patterns" by Joseph Homnick:

1 comment: