Niraj Bhatt – Architect's Blog

Ruminations on .NET, Architecture & Design

MVC vs. MVP vs. MVVM

An important FAQ. The answer actually depends on where the person is coming from. MVC is a fundamental pattern which has been tweaked quite a bit to fit into various platforms. For instance if you had asked anybody how to implement an MVC in ASP.NET (prior to release of ASP.NET MVC framework) you would get very different answers. So let’s start with basic. The common motivation behind all 3 is separation of concerns, cutting flab from UI (good for UI designers), swapping UIs (for instance windows to web), make UI easy for Unit Testing, etc. Have a look at the below diagram, I have taken it from CAB documentation.

MVCMVP

MVC: Three components – View (your UI), Model (your business entities / data – that view is displaying) & Controller (contains the logic that alters the model depending on the action triggered by UI, typically implementing a Use Case). It’s widely known that MVC is a compound pattern (View and Controller have Strategy implementation, View itself can be a Composite implementation & View and Model are synched through Observer). In this case Controller doesn’t know anything about View, and the idea is that a View can switch Controllers (for instance depending upon who has logged to the system) & a single controller can be used by multiple Views. View subscribes to the changes done to the model & hence both are sync from the data perspective. One of the disadvantages of MVC is that it’s difficult to unit test. Controller manipulates the data but how about asserting those changes from a view perspective. For instance on click of a button you raise an event to controller, and controller modifies the value in model. This value modification changes the font size / color in View. Unit testing this scenario is slightly difficult in MVC.

MVP: Again three components. But dependencies change (look at arrows in the diagram). Over here we replace Controller with Presenter (one which presents the changes done in model back to view). The main difference between both is that Presenter refers back to the view while Controller doesn’t. Normal pattern found here is to create an abstraction of the View (in terms of properties / events) & Presenter refers to it. This makes the mocking of View much easier & hence the Unit Testing aspect. Presenter here hence takes the responsibility of not only manipulating model but also updating the view. Of course the implementations of MVP differ in real world in terms of how much thin the view is, some prefer keeping basic logic still inside view & taking complex logic in presenter, while others prefer keeping the entire logic in Presenter. Martin fowler describes 2 variations on MVP on these lines namely – Supervising Controller & Passive View described below

(A Passive View handles this by reducing the behavior of the UI components to the absolute minimum by using a controller that not just handles responses to user events, but also does all the updating of the view. This allows testing to be focused on the controller with little risk of problems in the view.

Supervising Controller uses a controller both to handle input response but also to manipulate the view to handle more complex view logic. It leaves simple view behavior to the declarative system, intervening only when effects are needed that are beyond what can be achieved declaratively.)

MVVM: Model–View-ViewModel talks of creating a new model (in addition to your domain model). This model normally adds additonal properties from the prespective of View (as we understand that View has controls in addition to data which it’s displaying). For instance if View had a property IsChecked and Presenter was setting in classic MVP, in MVVM Presenter will have that IsChecked Property which View will sync up with (doesn’t it look like Strategy pattern has been replaced with Observer?). So now a Presenter becomes more like a combo of – View Properties & Model properties which would be synchronized with View. So why not rename Presenter to ViewModel? Do that and you get MVVM. MVVM is attractive for platforms which support bi-directional binding with less effort. Also a minor tradeoff is ViewModel unlike Presenter can stand on its own (Presenter normally requires a View’s interface). Martin fowler describes similar pattern called Presentation Model & Josh Smith captures MVVM implementation for WPF / Silverlight in this article.

MVVM

ASP.NET MVC: So what has MVC got to do with ASP.NET MVC? First, Web works on a different model. Here, user interacts with HTML in browser and send a request back to the server for processing (for client side Ajax you might go just for data). As the interaction is normally stateless, when the request comes back to the server we need to recreate our View, load the model back & manipulate both of them as required. There are 2 variations on how handle this recreation – Page Controller & Front Controller. Make Page the decision maker – in this widely implemented pattern HTTP request is specific to physical page on server (.aspx for instance) & page in turn creates itself (builds the view from postback data) decides what model it needs and triggers the manipulation (events in codebehind file) it requires. As you see here the distinction between View & Controller becomes blur & is little difficult to separate. This where ASP.NET MVC comes in which behaves like a Front Controller – where Controller is the decision maker. Here all HTTP requests are mapped to methods on the Controller Class. Controller class recreates the model & view as required and does the manipulations. This makes unit testing easier as we can directly instantiate the front controller class & invoke methods on it to perform the assertions.

I can add code snippets to above explanations if you feel they would help you understand things better. I will look forward to your comments :) .

About these ads

70 responses to “MVC vs. MVP vs. MVVM

  1. Pingback: ASP.NET MVC Archived Blog Posts, Page 1

  2. Pingback: DotNetShoutout

  3. Pingback: Dew Drop – July 24, 2009 | Alvin Ashcraft's Morning Dew

  4. Craig Cox July 24, 2009 at 11:08 pm

    Hey great post but I think it would be helpful to post code examples or give examples of where it would be beneficial to use each pattern

  5. Pingback: Twitted by theChrisMarsh

  6. nirajrules July 25, 2009 at 5:44 pm

    Thanks Craig. Even I thought the same. But then decided against it to try explain them in a single para (as this is what I was looking for all this time). Code for these patterns are already there (I have linked few of them above), but I should be able to put few ones from my side soon.

  7. Nirmal July 27, 2009 at 8:09 pm

    If you could add code snippets that would help. If it is not possible on this site then please email me.
    The information was very helpful.
    Thanks.

  8. Skelly September 18, 2009 at 12:17 am

    Thanks for this post.. it is the best pattern comparison that I have found.

  9. Cordus October 27, 2009 at 5:48 pm

    You have found out thoughts. Please add code snippets to explain! ;)
    Good post btw!

  10. Pingback: design patterns / Architectural Patterns / UX patterns « .Net Trails

  11. NT December 21, 2009 at 4:32 pm

    Any chance of posting the code samples to help clarify the differences? Thanks for the article.

  12. Ink December 27, 2009 at 10:27 pm

    I am new to these patterns and still trying to sort out when to use what and where. For example, can MVVC be used for WinForms, WPF, or Silverlight?

  13. Pingback: May 2010 be your Best Year so far!!! « Niraj Bhatt – Architect’s Blog

  14. Muhammad Haadi January 24, 2010 at 1:51 pm

    Assalam-o-Alaikum!

    The pictorial representation of MVC and MVP is excellent.

  15. Pingback: XAMLCast – 2a Temporada – Episódio 7 – Silverlight Viewport, Visual Studio 2010 RC, MVVM - redeRIA | Agregador de noticias, artigos, tutoriais Flex, Flash, JavaFX, AJAX e Rich internet applications em geral!

  16. Sandeep May 25, 2010 at 2:02 am

    Hi Niraj,

    It will be great if you can explain same thing with some practical coding…

  17. Sandeep May 27, 2010 at 7:10 pm

    Nice article… very clear and to the point

  18. Rajita June 4, 2010 at 3:12 pm

    Nice article. Would love to see some code snippets going along with the explanations.

  19. andy June 15, 2010 at 2:24 pm

    Thank you for this cool articles – samples would be really cool, a few of C#/Java pseudo-code would do it!

    Thanks,
    Andy

  20. Pingback: Techie: Sabarinathan Arthanari » Blog Archive » Silverlight: Past, Present & future

  21. Jenny July 13, 2010 at 9:02 pm

    Thank you so much. This really cleared it up for me. Great job!

  22. Vibhas July 26, 2010 at 4:08 pm

    The diagrams are self-explanatory and upto the mark!
    Good job..Thanks.

  23. Pingback: MVVM or MVP for Winforms? « Suresh Kumar Veluswamy's Blog

  24. Amol October 14, 2010 at 7:34 am

    Excellent article describing the differences in clear and concise manner.

    Cheers!

  25. Sachin Kainth November 4, 2010 at 12:25 am

    Kamaal kar thi yaar.

  26. Nitin November 27, 2010 at 1:00 am

    gud to compare all those in 1 article.gud 1. it helped me.tx

  27. Pooja January 21, 2011 at 1:57 am

    Great Article!! Can you please add code snippet?

  28. Giribabu February 3, 2011 at 12:49 pm

    Nice article if possible send me code snippet using MVVM pattern in ASP.NET, i not able to find proper code snippet using ASP.NET

  29. Shilpa March 2, 2011 at 10:22 pm

    great explanation! thanks. It would be wonderful to see code snippets for these. If not possible to pos them, please let me know the sites I can refer for it.

  30. Pingback: Weekly Links– 2010_09 :MS-Joe (Joe Stagner)

  31. Deepak Aggarwal March 14, 2011 at 1:51 pm

    Great article..
    Awesome if we can have same application developed in all 3 flavors.

  32. Pingback: WPF: Von Spaghetticode zu MVVM – Teil 3 von 10 « UBTBlog

  33. SRIHARI AKULA June 9, 2011 at 5:37 pm

    Superb neat, clean comparision explanation of three.

  34. Jonathan Allen June 14, 2011 at 10:56 pm

    Your diagrams for MVC don’t make any sense in this context.

    Models cannot raise events in Web MVC because there is no view to recieve the event until its time to render the page. Therefore the diagram must be of Classic MVC.

    However the text is clearly talking about the loosely coupled Web MVC design, a design that simply wouldn’t work for a rich client UI where you need to handle events from specific controls on the view.

    I think it is a real shame that the creators of the web pattern choose the name MVC. The Classic MVC pattern from SmallTalk was all about tightly coupled view-controller pairs that shared common models. The Web MVC pattern is about as far from that as you can get.

  35. nirajrules June 21, 2011 at 9:40 am

    Allen I guess you are referring to Page Controller which is slight variation over classic MVC. Diagrams listed are from a classic standpoint and web specific details are discussed later.

  36. Miraj Baldha July 25, 2011 at 5:33 pm

    Nice article,

    As you are here gives difference between MVC and MVVM, I am looking for a solution in Web. Actually i have created an one WinApplication uses MVVM, now i would like to reuse viewmodel in Asp.Net MVC, so have you any about using it? in MVVM have to use System.Windows.Input.ICommand ,but in case of Asp.net we can not, so have you idea about using same application logic in Web and Windows?

    Thanks

  37. Steve Osborne August 10, 2011 at 2:21 am

    Excellent article. It has also helped for interviews.

  38. VolpeRossa August 29, 2011 at 1:10 pm

    thank you vey clear!

  39. Pingback: Android – MVC vs MVP | mobileFriends

  40. ranjithkumarpachari October 10, 2011 at 11:02 am

    Itis Very Clear……please give me how to interact with EF 4.0……….

  41. Ashok Guduru October 25, 2011 at 7:22 pm

    Well and good. It is easy to understand the diffs between MVC/MVP and MVVM. But I would like to see more on differences between MVVM and PM (Fowler’s). There are lots of misunderstanding between them as folks are mixing these two.

    Thanks
    Ashok

  42. wooncherk November 4, 2011 at 11:31 pm

    thanks for this article! :P

  43. dmitry November 7, 2011 at 4:28 pm

    thank you for article! clear and simple view of this mv-models!

  44. Pingback: Applying the MVVM pattern to create SharePoint list-driven interactive tools « SPMatt

  45. Ashish Thakur January 2, 2012 at 3:12 pm

    Thanks Niraj…indeed a good article to differentiate between MVC, MVP & MVVM.

    Couple of things we will love to have on this article…

    1) Some details information on PRISM (with code snippet).
    2) Code snippet for all the above described patterns.

  46. Pingback: Visualforce Variety of MVC | Sundog

  47. Pingback: Separating the view in Visual Studio GUI Applications using Design Patterns

  48. Vishwanath Nayak February 15, 2012 at 12:44 pm

    I agree also with Ashish.It would help us to understand the actual implementation.

  49. gr8ful2u2 February 20, 2012 at 11:01 pm

    The MVC2 pattern name was used to distinguish it from classic MVC.

  50. Pingback: MVVM, MVP and MVC software patterns againts 3-Layered architecture « Merroun

  51. Petrunov April 3, 2012 at 6:46 pm

    really good explanation!

  52. sanjay April 17, 2012 at 5:52 pm

    really a good article.

  53. Jay May 6, 2012 at 10:43 pm

    This is another article discussing MVVM and ASP.NET MVC

  54. Pingback: MVC Vs MVP | Jinal Desai

  55. Pingback: Separating the view in Visual Studio GUI Applications using Design Patterns | PHP Developer Resource

  56. Pingback: MVP and MVC, whats the real difference?

  57. Tiago Freitas Leal June 14, 2012 at 4:07 am

    Nice post. You might like to know that at http://mvvmfx.codeplex.com/ you will find some useful MVVM stuff fow Windows Forms:
    1) a databinding library with converters that can also bind an Action to a property change
    2) a command binding library that can bind an Action to any input event of any UI component

  58. Pingback: Quick Take on MVC x MVP x MVVM « Stack 24/7

  59. Pingback: Knockout jQuery « TechnoBuzz

  60. OOP September 13, 2012 at 2:24 am

    Good article! although would like to add one thing. In MVP, view and presenter should communicate through an interface which is missing from diagram.

  61. Aashish singh sajwan December 28, 2012 at 3:01 pm

    Nice Article very helpful to understand all three pattern.

  62. Faysal Ahmed January 21, 2013 at 9:27 am

    Reblogged this on Faysal Ahmed.

  63. pawanchawla Chawla March 21, 2013 at 4:51 pm

    It was really nice to read all about MVC etc.! Kindly send me code snippets through mail if it is convenient at your end.

  64. Sid May 31, 2013 at 8:10 pm

    Hi Niraj, great article! It’d also be helpful if you could provide examples of types of applications or situations you would use these patterns in. For ex., I’ve seen MVVM being used in Silverlight applications, and have seen both MVC and MVP being used in a hybrid of ASP.NET/SharePoint type applications. However, I’m not sure if I know exactly why certain types of applications warrant that particular pattern. It might help users/followers if they are able to determine which pattern is best for the type of application they are about to implement.

  65. Pingback: Applying the MVVM pattern to create SharePoint list-driven interactive tools using Knockout | SharePointDevWiki.com

  66. Pingback: Design Patterns: MVC, MVP, and MVVM | Agile Software Architecture: Design for Changes

  67. kaniartur December 8, 2013 at 12:15 am

    Great article, one note/question – classic MVC is saying that all user interactions are handled by Controller directly – in your diagram it looks that View is passing it to Controller – which one you think is correct?

  68. nirajrules December 10, 2013 at 11:30 pm

    Kaniartur – please look at the ASP.NET MVC section of my post. I won’t say that is classic MVC, but most of they web frameworks work that way.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 175 other followers

%d bloggers like this: