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:

• The full talk with code demo in .NET can be found here http://channel9.msdn.com/Events/TechEd/NorthAmerica/2011/DPR305
• A cut short version is on Youtube: