CODEWITHSUNDEEP
c#wpfmodel-view-controllermvvm
Konrad Viltersten
Konrad Viltersten

Reputation: 39200

Combining MVVM and MVC in a picture

This might be a little off-topic so I'm fully prepared to hit the delete button at any time.

I've been asked to explain to the customer's team the difference between MVVM and MVC. Apparently, they prefer pictures because my 60 minutes of talking and exemplifying with source code gave nothing but grunts and sighs but the image below made them smile and reward me with a wave of noise of satisfied "ahaa".

Now, the same customer's requested that I explain how one could merge (not saying it's a good idea) the two patterns together. Personally, I haven't done that before and I'd be restrictive to recommend it. However, such an image would be a great aid to get the said "ahaas". After googling, binging and what not, I came up empty. Lazy... hrmp... efficient as I am, I wonder if someone has a corresponding picture laying around.

So, I'm looking for an extension of the visual description: from MVC-MVVM to MVC-MVVM-MVVMC (or whatever the acronym for the last one might be).

enter image description here

Upvotes: 1

Views: 1345

Answers (2)

Martin Liversage
Martin Liversage

Reputation: 106906

Using the terms from your diagrams my explanation of MVVM is as follows:

  • The view is bound to the view-model. E.g. the view depends on the view-model but not vice versa. The data is passed back to the view via data binding which may be implemented by "firing events" (like your dashed arrows). However, it is important to note that it is the view-model that defines the "events" as properties etc. that the view can bind to and not the view that exposes a set of events. The later would create a dependency to the view.

  • The view-model manipulates the model. However, another important function of the view-model is that it keeps the UI state which is not represented by the model (e.g. current selection etc.).

Here is a feeble attempt to draw this in ASCII:

User Interaction
       |
       |
       V
 +------------+
 |    View    |
 +------------+
      | ^
      | . Is bound to
      V .
 +------------+
 | View-Model |
 +------------+
       |
       | Manipulates
       V
 +------------+
 |   Model    |
 +------------+

Upvotes: 1

Johnny Graber
Johnny Graber

Reputation: 1467

On http://geekswithblogs.net/dlussier/archive/2009/11/21/136454.aspx you find a nice picture that explains the 3 patterns in one single graphic. But please ask Darcy Lussier before you use this picture.

If your clients prefere to read the MSDN Magazine there was an article on the evolution of those patterns towards the use in a WPF application: http://msdn.microsoft.com/en-us/magazine/dd419663.aspx#id0090009

Upvotes: 1

Related Questions