Transcript
Page 1: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

MVC, MVP and MVVM: A Comparison of Architectural PatternsJoe [email protected] Knowledge

DPR305

Page 2: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

What This Session Is And What It Is Not

It is:An investigation of how different software architecture patterns relate to different Microsoft developer technologiesA what to use where discussion

It is not:An exhaustive architectural discussion of software patterns with a bunch of mental pontifications.

Page 3: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

Overview

What, why, how of Model-view-controller(C) or presenter(P) or View Model(VM) architecture patternsModel-View-Controller (MVC) pattern

ASP.Net MVC 3 exampleModel-View-Presenter (MVP) pattern

Web Forms/SharePoint exampleModel-View-ViewModel (MVVM) pattern

Silverlight exampleWhat to use where

Page 4: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

What is Model/View/(C or VM or P)

Patterns that describe a modular approach to software developmentModules include:

Model – DataView – Presentation LayerC or VM or P – Glue Logic

They are based upon a “Separation of Duties”Seen in many other types o,f system frameworks

How is this different from nTier development in the 90’s - anybody remember Distributed interNet Architecture (DNA)

Page 5: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

Why Model-View-(C or VM or P)

The Patterns all have similar goals, however, achieve them in different waysThe Patterns goals are to increase:

ModularityFlexibilityTestabilityMaintainability

Page 6: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

Model-View-Controller (MVC)

First described in 1979 for Smalltalk at Xerox PARCController is centerpiece that decouples the Model and ViewControl flow:

User interaction eventController handles event and converts it to a user action the Model can understandModel manages the behavior and data of the application domainThe View interacts with the Controller and Model to generate a user interface

Page 7: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

Client/Server (DNA) vs MVC

Controller

ModelView

Client-----------------------

Business Objects

Server-----------------------Business Objects

Data

Page 8: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

MVC Observer Pattern

Controller

ModelView

Page 9: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

demo

ASP.Net MVC 3

Page 10: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

Model-View-Presenter (MVP)

MVP originated in early 1990sMVP is a derivative of MVCTwo types of implementation

Passive ViewSupervising Controller

Presenter assumes the functionality of the MVC ControllerView is responsible for handling UI eventsModel becomes strictly a Domain ModelMore User Interface centric

Page 11: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

MVC vs MVP (Passive)

Presenter

ModelView

Controller

ModelView

Page 12: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

MVP – Supervising Controller Pattern

Presenter

ModelView

Page 13: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

SharePoint 2010 Developer Guidance

MVP Class Diagram and Flow of Execution for the SandBox Execution Model

Page 14: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

demo

MVP Using ASP.Net Web Forms

NameTitleGroup

Page 15: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

Model-View-ViewModel (MVVM)

Largely based on MVCSpecialization of the MVP pattern known as the Presentation ModelBuilt specifically for the WPF and Silverlight environmentsModel and View works just like MVCViewModel is a “Model of the View”

It extends the Model with Behaviors the View could useData Binding between View and ModelPasses commands between the View and Model

Page 16: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

MVP (Passive) vs MVVM

ViewModel

ModelView

Presenter

ModelView

Page 17: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

demo

MVVM Using Silverlight

NameTitleGroup

Page 18: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

What To Use Where

Model-View-Controller (MVC) patternASP.Net MVC 3 Disconnected Web Based Applications

Model-View-Presenter (MVP) patternWeb Forms/SharePoint, Windows Forms UI state logic already wired up

Model-View-ViewModel (MVVM) patternSilverlight, WPFTwo way data-binding

Page 19: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

ARC Track Resources

http://www.microsoft.com/visualstudio http://www.microsoft.com/visualstudio/en-us/lightswitch http://www.microsoft.com/expression/http://blogs.msdn.com/b/somasegar/http://blogs.msdn.com/b/bharry/http://www.microsoft.com/sqlserver/en/us/default.aspxhttp://www.facebook.com/visualstudio

Page 20: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

Resources

www.microsoft.com/teched

Sessions On-Demand & Community Microsoft Certification & Training Resources

Resources for IT Professionals Resources for Developers

www.microsoft.com/learning

http://microsoft.com/technet http://microsoft.com/msdn

Learning

http://northamerica.msteched.com

Connect. Share. Discuss.

Page 21: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

Complete an evaluation on CommNet and enter to win!

Page 22: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

Scan the Tag to evaluate this session now on myTech•Ed Mobile

Page 23: MVC, MVP and MVVM:  A Comparison of  Architectural Patterns

Recommended