MVC, MVP and MVVM



MVC is so popular now days and the web development paradigm shifted to imitate web application as a WinForm application in terms of features and deeds, countess approach, patterns and where third parties are attempting to settle this matter. When I started my career with ASP and landed on MVC with lots of tests, the test which I developed during the progression of my development phase are now I am releasing in respect of all my colleges who is settling web applications endeavors.

When we say web application, since nature of application is stateless these are the basic challenges we face.

  • Managing and Maintaining UI state
  • Where to put logic ether in UI level or Execution side
  • UI and Data sync with business model.

*May be in your scenario you have faced more than this list.

As industry have multiple design patterns to scope design concerns and so for the scenarios where we have UI, logic and business model and we are looking to make coordination between in these. Let me short this, to optimize this scope or concern the patterns we have and call it is "Presentation design pattern” which is further divided into three patterns which i am going to focus in this blog.

image001.png

Above illustrated diagram shows how patterns are categories, intent is to show these all (MVC, MVP and MVVP) have different roles for your solutions don’t consider it each are alternatives for a problem. So, select based on your suitability.
Some brief over the technical terms we use for these pattern
View : Represents UI
Model : Represents business model instance or data
Controller: Represents unit where users request getting handled and responding response after the processing.
Presenter: Close to controller but objective is to sync view and delegate user request rather any business processing.
View Model: Subset of business model and aligned with what is visible and to notify model any change in model state.

MVC (Model - View - Controller)


image002.jpg

Fundamental of MVC is to separation of domain logic and UI logic between Model, View and Controller. Controller can have multiple views and responsible to sync views and business model through either observer pattern or other way (like in ASP.NET MVC case). This pattern is very useful when you need full control over UI logic at UI end. The only challenge we have in this pattern is unit testing because you can test controller but what about views which is totally isolated from controller even there could be possibilities where your views interacts or switch controller based on user state. Why I considered views for unit testing is view equally participating business flow to get completed. Controller is testable but to test busing flow we would need View as well.

Guidelines
·         Request should come to the controller
·         Controller should be binding the model with the view
·         Business logic should be driven from controller.


MVP (Model - View - Presenter)


image003.jpg

It's close to MVC elements but the only difference is here we have presenter in place of controller for this pattern. Here, Presenter not only accepts the UI request but the main role is to sync the view and delegate the task to model. Presenter is always being a mockup of a view. For each view there is presenter we can’t have a presenter which handle multiple view. Presenter always delegates request to corresponding models and updating the view based on the response or user request. There are two variations of this patter one has logic in presenter and another just updating and making UI logic inside it. For Example: WPF, Silverlight and ASP.NET have multiple types of binding system which imitate as presenter in these application types.

Guidelines - MVP-Supervising controller pattern ( SC )
·         User state should be stored in the view.
·         Presenter owns the complex presentation logic.
·         Simple UI binding logic is taken care by using binding technologies.
·         Presenter is mock of view (find the enclosed solutions to see what is the intent.)
·         View should not be aware of the presenter or any reference.
·         View can connects with model using bindings as provided in WPF, Silverlight and ASP.NET.

Guidelines - MVP - Passive view (PV)
·         User state should be stored in the view.
·         UI Logic should be in presenter.
·         View is isolated from the model
·         Presenter is mock of view (find the enclosed solutions to see what is the intent)
·         View should not be aware of the presenter or any reference.

 

MVVM (Model - View - ViewModel)

 

image004.jpg

MVVM talks about new viewmodel which we should have for the view or say view will be directly using or updating this viewmodel not the business model directly. ViewModel can have logics in-placed to control user state or user request. This pattern is more close to how WPF and Silverlight work or it’s easy to get this pattern used for these type of application as framework designed in that way but for ASP.NET and MVC user knockouts is filling this gap. So, exemplify this pattern I have included knockoutjs.
Guidelines
·         Model is the base.
·         UI State is stored in the viewmodel.
·         Logic is stored in model.
·         Model should be not aware of view, viewmodel model has this capability
   
As I said each pattern has different goal so don’t consider these are alternative option of each other.

I Hope you have liked it, leave some comments so that i consider your points while writing for next topic.

Solution download link
https://onedrive.live.com/redir?resid=D239A814B06F4679%213960

In enclosed solution I have covered MVP, MVC and MVVP pattern through knockoutjs.
To scope above details I just took the diversified approach to get the pattern solution along with other real project components. Here is the list what is extra in my solution.

MVC solution (Start from home controller)
1.       How to use editor/display template in ASP.NET MVC
2.       How to use custom display template in MVC view
3.       How to use redirect action along with object
4.       How to use enumerable model in view
MVP solution (Start from Default.aspx)
5.       How to use System.Web.UI.Page as presenter
6.       How to convert ASP.NET WebForm into MVP pattern
MVVM Solution (MVVM\Knockout\Lab4\loading-data-webservice.htm)
7.       How to consume webservice.asmx through javascript
8.       How to setup get/post webmothod in webservice
9.       How to respond or receive JSON at webservice end
10.   How to consume service data as model and converting into ViewModel for Knockoutjs,

Comments

Popular posts from this blog

Difference between Parse/TryParse/ParseExact/TryParseExact

Setup Hangfire in visual studio solution | Hello World Application