Share via


MVVM Model View ViewModel Part - 1

Targeted Audience:

 

1. .NET Architects
2. .NET Application Designers
3. .NET Application Developers

 

Prerequisites:

 

1. .Net technologies.
2. Basic understanding of data binding in WPF, Silverlight.

 

Problem Statement:

 

1. Already using different patterns in application but still maintaining application is difficult.
2. Using VS Test, NUnit, MBUnit etc to test business logic layer, but still some defects are exist in the application as business logic involved in presentation layer.
3. Used Presentation Layer, Business Logic Layer, Data Access Layer in the application but still some times need to write some redundant code in presentation layer to consume or call other modules or other use cases.
4. Integration defects are getting injected when we make some changes in integrated modules.
5. Defect fixing and enhancements are taking more time to analyze the presentation tier logic and its integration dependencies and causing for opening new defects.

 

Root Cause of the Problem:

 

1. UI Layer, UI Logic, Presentation Logic, Business Logic are tightly coupled.
2. Presentation Layer is taking care of integrating modules or use cases.

 

Solution:

 

1. Chose a best Presentation Layer Pattern to separate the UI Layer, UI Logic and Presentation Logic and Business Logic as separate layers.
2. Enable loose coupling while developing modules or any use cases.

 

Benefits of using Presentation Pattern:
 

1. Modularity
2. Test driven approach

3. Separation of concerns

 

What are the presentation layer patterns available?

 

MVC (Model View Controller)
MVP (Model View Presenter) or (Model Passive View, Supervisor Controller)
MVVM (Model View ViewModel)

 

MVC vs MVP vs MVVM:

 

1. Model and View represents same in all the above 3 patterns?
Yes
2. Controller, Presenter, and ViewModel purpose is same in all the above 3 patterns?
Yes
3. Communication and flow of Model, View with Controller, Presenter, and ViewModel is same?
No, that is the reason these 3 patterns exists.
4. Are these patterns replacement of PL (Presentation Layer), BLL (Business Logic Layer) and DAL (Data Access Layer)
No, these patterns are for separating the UI and UI Logic from Presentation Logic
and enables the loose coupling.

 

Choose the best Presentation Layer Pattern: 

** **

MVP
1. Binding via a datacontext is not possible. (Windows Forms)
2. Complex UI Design (ASP.NET Web Forms)

MVC
1. Simple UI (ASP.NET MVC, Sharepoint)
2. Disconnected Model (View separation from all other layers)

Note: Here I am not focusing on MVC VM ( MVC ViewModel from MVC3) and ASP.NET MVVM with Dependency Injection.

Read more about ASP.NET MVVM http://aspnetmvvm.codeplex.com/

MVC ViewModel http://msdn.microsoft.com/en-us/vs2010trainingcourse_aspnetmvc3fundamentals_topic7.aspx

MVVM
1. Binding via a datacontext is possible.
2. Connected Model

The term MVVM was first mentioned by the WPF Architect, John Gossman, on his blog in 2005. It was then described in depths by Josh Smith in his MSDN article “WPF Apps with the Model-View-ViewModel Design Pattern”.

• Follows Single Responsibility Principle from OOPS SOLID Principles

(In some exceptions it can violate SRP)
• Separation of concerns
• Testable

Read more about OOPS SOLID Principles here http://gallery.technet.microsoft.com/OOPS-Principles-SOLID-017627d2/view/Reviews

  

How MVVM Pattern Works?: 

 

http://i1.gallery.technet.s-msft.com/mvvm-a18c737f/image/file/65130/1/mvvm.png

Observer the above flow diagram and communications between each component. 

 

Model:
• Represents the Data
• The Entity
• Not required to know where it gets its data from
• From a WCF service. WCF RIA Services, etc
• May contain validation
View:
• The UI, the User Control in Silverlight
• Handles UI look and feel
• Presentation of information
• Communicates with ViewModel through bindings
ViewModel:
• Main source of logic for the MVVM
• Connects the Model to the View through bindings
• Abstracts the View
• UI Friendly Entities, UI State, Actions
• Public properties that are bound to a View
• INotifyPropertyChanged and INotifyCollectionChanged talk to the View through bindings
• Listens for changes from the View through bindings
• Invokes services to communicate outside the MVVM triad

 

MVVM Principles:

 

1. The Simplicity Principle: 
   Each View should have a single ViewModel and a ViewModel should only service a single View
2. The Blendability Principle:
   The ViewModel should support Expression Blend.
3. The Designability Principle:
   The ViewModel should supply Design Time Data.
4. The Testability Principle: 
   The ViewModel and Models should be testable.
For more details http://practicalmvvm.com/Manifesto/

Some other protocols MVVM follows:

• View must be paired with a ViewModel somehow
• ViewModel is declared as a Static Resource in the View’s XAML
• Should Works well in Expression Blend

 

Benifits of MVVM:

1. Seperation of Concerns (View, ViewModel, Model)

2. Clean testable and manageable code. Can include presentation tier logic in unit testing.

3. No code behind code, so the presentation layer and the logic is loosely coupled.

4. Better way of databinding.

5. With Silverlight 4.0 we have new ICommand Support (earlier this was only present in the PRISM framework). I will cover this in next article Part 2.

Disadvantages?  

  1. Few people say For simple UI, M-V-VM can be overkill.  

2. Debugging would be bit difficult when we have complex databindings.

Steps to Implement MVVM:

1. Create a Simple Model (CustomerModel.cs) with required properties and implement PropertyChanged property of INotifyPropertyChanged.
2. Create a ViewModel (CustomerViewModel.cs) with required logic to bind Model to ViewModel.
3. Create a View (CustomerView.xaml) and bind the data with ViewModel.
4. Create an object to ViewModel and bind to View in MainWindow.xaml.cs.

Download the source code here http://gallery.technet.microsoft.com/MVVM-a18c737f