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:



6 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Java developer learn from Java Training in Chennai. or learn thru Java Online Training in India . Nowadays Java has tons of job opportunities on various vertical industry.

    ReplyDelete
  2. I was very pleased to find this site.I wanted to thank you for this great read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you post. eddm® printing - every door direct mail® postcards

    ReplyDelete
  3. Great post, you have pointed out some fantastic points , I likewise think this s a very wonderful website. vpn dienst

    ReplyDelete
  4. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai

    ReplyDelete
  5. Your website is really cool and this is a great inspiring article. free printable wall art

    ReplyDelete