creating applications using the model-view-view model pattern

37
Creating Applications using the Model-View- ViewModel Pattern Matt Casto [email protected] http://twitter.com/ mattcasto

Upload: matt-casto

Post on 07-May-2015

5.119 views

Category:

Technology


0 download

DESCRIPTION

Need a new acronym for your resume? The Model-View-ViewModel (MVVM) pattern is a variation of Model-View-Presenter (MVP) that is tailored for modern UI development platforms where the View is the responsibility of a designer rather than the developer. This has lead to the pattern becoming very popular with WPF and Silverlight application developers lately. This presentation will walk you through creating a business application from scratch in both WPF and Silverlight using the MVVM pattern.

TRANSCRIPT

Page 1: Creating Applications Using The Model-View-View Model Pattern

Creating Applications using the Model-View-ViewModel Pattern

Matt [email protected]

http://twitter.com/mattcasto

Page 2: Creating Applications Using The Model-View-View Model Pattern

Developing Software is HARD

Page 3: Creating Applications Using The Model-View-View Model Pattern

Developing Software is HARD

Page 4: Creating Applications Using The Model-View-View Model Pattern

Patterns Help … but its still HARD!

Page 5: Creating Applications Using The Model-View-View Model Pattern

Model – View – ViewModel

Page 6: Creating Applications Using The Model-View-View Model Pattern

Model – View – Controller

Page 7: Creating Applications Using The Model-View-View Model Pattern

Model – View – Controller•Regarded as the first pattern to

seperate UI, Data & Logic concerns•Controller handles all logic,

including Mouse & Keyboard events

Page 8: Creating Applications Using The Model-View-View Model Pattern

Model – View – Presenter

Page 9: Creating Applications Using The Model-View-View Model Pattern

Model – View – Presenter•Variation of MVC• Tailored for modern UI that handles

Mouse & Keyboard events better•Presenter depends on View

Page 10: Creating Applications Using The Model-View-View Model Pattern

Presentation Model

Page 11: Creating Applications Using The Model-View-View Model Pattern

Presentation Model•Published by Martin Fowler in 2004•View is a rendering of the

Presentation Model

Page 12: Creating Applications Using The Model-View-View Model Pattern

Presentation Model“Probably the most annoying part of Presentation Model is the synchronization between Presentation Model and view. It’s simple code to write, but I always like to minimize this kind of boring repetitive code. Ideally some kind of framework could handle this, which I’m hoping will happen someday with technologies like .NET’s data binding.”

– Martin Fowler

Page 13: Creating Applications Using The Model-View-View Model Pattern

Model

Page 14: Creating Applications Using The Model-View-View Model Pattern

Model – Your Data

Page 15: Creating Applications Using The Model-View-View Model Pattern

Model – Your Data• Entities• Service Proxy•POCO

Page 16: Creating Applications Using The Model-View-View Model Pattern

Model – Your DataView

Page 17: Creating Applications Using The Model-View-View Model Pattern

Model – Your DataView – User Interface

Page 18: Creating Applications Using The Model-View-View Model Pattern

Model – Your DataView – User Interface

•XAML (WPF)•XAML w/ Code Behind (Silverlight)

Page 19: Creating Applications Using The Model-View-View Model Pattern

Model – Your DataView – User InterfaceViewModel

Page 20: Creating Applications Using The Model-View-View Model Pattern

Model – Your DataView – User InterfaceViewModel – The View’s Model

Page 21: Creating Applications Using The Model-View-View Model Pattern

Model – Your DataView – User InterfaceViewModel – The View’s Model

• State•Operations•Not Dependent on the View

Page 22: Creating Applications Using The Model-View-View Model Pattern

You’re probably already doing something very close to this

Page 23: Creating Applications Using The Model-View-View Model Pattern

You probably could be doing something very close to this

Page 24: Creating Applications Using The Model-View-View Model Pattern

Why do I care about MVVM?

Page 25: Creating Applications Using The Model-View-View Model Pattern

Why should you care about MVVM?

Page 26: Creating Applications Using The Model-View-View Model Pattern

Patterns are a set of guidelinesPatterns are not a set of rules

Page 27: Creating Applications Using The Model-View-View Model Pattern

Benefits of MVVM

Page 28: Creating Applications Using The Model-View-View Model Pattern

Benefits of MVVM

• Loose Coupling• Testable Code• Maintainable Code

Page 29: Creating Applications Using The Model-View-View Model Pattern

Developers and Designers

Page 30: Creating Applications Using The Model-View-View Model Pattern

DEMO

WPF vs Silverlight

Page 31: Creating Applications Using The Model-View-View Model Pattern

DEMO

Adding Validation

Page 32: Creating Applications Using The Model-View-View Model Pattern

DEMO

Unit Testing

Page 33: Creating Applications Using The Model-View-View Model Pattern

DEMO

Commands

Page 34: Creating Applications Using The Model-View-View Model Pattern

Enterprisey Solutions

• Component Application Guidance• Caliburn• Roll Your Own

Page 35: Creating Applications Using The Model-View-View Model Pattern

Sources• WPF Apps With The Model-View-ViewModel Design Pattern – Josh Smith

http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

• Model-View-ViewModel In Silverlight 2 Apps – Shawn Wildermuthhttp://msdn.microsoft.com/en-us/magazine/dd458800.aspx

• ViewModel Pattern in Silverlight using Behaviors – Nikhil Kotharihttp://www.nikhilk.net/Silverlight-ViewModel-Pattern.aspx

• Using RoutedCommands with a ViewModel in WPF – Josh Smithhttp://www.codeproject.com/KB/WPF/VMCommanding.aspx

• Presentation Model – Martin Fowlerhttp://martinfowler.com/eaaDev/PresentationModel.html

Page 36: Creating Applications Using The Model-View-View Model Pattern
Page 37: Creating Applications Using The Model-View-View Model Pattern

THANKS!!

Matt [email protected]

http://twitter.com/mattcasto