consulting training debugging wintellect.com

Jeremy Likness Senior Consultant, Project ManagerTwitter: @JeremyLiknessBlog: http://csharperimage.jeremylikness.com/

MVVM for Modern App Dev

CodeStock is proudly partnered with:

Send instant feedback on this session via Twitter:

Send a direct message with the room number to @CodeStock d codestock 503 This session is great!

For more information on sending feedback using Twitter while at CodeStock, please see the “CodeStock README” in your CodeStock

guide.

RecruitWise and Staff with Excellence - www.recruitwise.jobs

Aspect is helping customer-centric organizations deliver a next-generation customer experience

through software solutions that fully exploit enterprise communications and collaboration

platforms with particular advantage to Microsoft-centric organizations.

wintellect.comconsulting training debugging

Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins – we pull out all the stops to help our customers achieve their goals through advanced software-based consulting and training solutions.

Consulting & Debugging• Architecture, analysis, and design services• Full lifecycle custom software development• Content creation• Project management• Debugging & performance tuning

Training• On-site instructor-led training• Virtual instructor-led training• Devscovery conferences

Design• User Experience Design• Visual & Content Design• Video & Animation Production

what we do

who we are

how we do it

consulting training debuggingdesign

wintellect.comconsulting training debugging

Agenda

• What is MVVM?• Why use MVVM?• 10 Reasons to Use MVVM• MVVM Frameworks• What is the Cost?• Demo: Portable Library • Demo: Web Applications• Questions

• What is MVVM?• Why use MVVM?• 10 Reasons to Use MVVM• MVVM Frameworks• What is the Cost?• Demo: Portable Library • Demo: Web Applications• Questions

wintellect.comconsulting training debugging

What is MVVM?

wintellect.comconsulting training debugging

What is MVVM?

• Do you ever have to start work on an application before the design team is ready?

• Do you make updates in parallel with the design team?

• Do you unit test your solutions?• Do you reuse code and components both within

and across projects?• Do you ever have to change the user interface, and

wouldn’t it be nice to do it without having to hit your code as well?

• MVVM solves these types of problems!

• Do you ever have to start work on an application before the design team is ready?

• Do you make updates in parallel with the design team?

• Do you unit test your solutions?• Do you reuse code and components both within

and across projects?• Do you ever have to change the user interface, and

wouldn’t it be nice to do it without having to hit your code as well?

• MVVM solves these types of problems!

wintellect.comconsulting training debugging

What is MVVM?

• Thing-Model-View-Editor• 12 May 1979 – Trygve Reenskaug

Thing

Something that is of interest to the user. It could be

concrete, like a house or an integrated

circuit. It could be abstract, like a new idea or opinions about a paper. It could be a

whole,like a computer, or a part, like

a circuit element.

A Model is an active representation of an

abstraction in the form of data in a computing

system.

To any given Model there is attached one or more Views, each View being capable of

showing one or more pictorial representations of the Model

on the screen and on hardcopy. A

View is also able to perform such operations upon the Model that is reasonabely

associatedwith that View.

An Editor is an interface between a user and one or more views. It provides the

user with asuitable command system, for example in the form of menus that may change dynamically

according to the current context. It provides the Views

with the necessary coordination and

command messages.

wintellect.comconsulting training debugging

What is MVVM? The Model

• Domain object• Application solution• Data/Information and/or Behavior• Possible persistence information (id, GUID, etc.)• Separate from “how it got there”• Let’s be specific:

• C# • VB• JavaScript • Etc.

• Domain object• Application solution• Data/Information and/or Behavior• Possible persistence information (id, GUID, etc.)• Separate from “how it got there”• Let’s be specific:

• C# • VB• JavaScript • Etc.

wintellect.comconsulting training debugging

What is MVVM? The View

• What the user “sees” / experiences• User-friendly format for presentation• Multiple inputs (gestures)• Behaviors• Events• Data-bindings• Let’s be specific:

• XAML• HTML5

• What the user “sees” / experiences• User-friendly format for presentation• Multiple inputs (gestures)• Behaviors• Events• Data-bindings• Let’s be specific:

• XAML• HTML5

wintellect.comconsulting training debugging

What is MVVM? The View Model• The “controller” – holds state• Doesn’t know about the view • Exposes methods and commands• Coordinates with services• “Owns” models, and knows how to retrieve/update

them• Might be used in multiple views• Can communicate with other view models• Let’s be specific:

• C#• JavaScript, etc.

• The “controller” – holds state• Doesn’t know about the view • Exposes methods and commands• Coordinates with services• “Owns” models, and knows how to retrieve/update

them• Might be used in multiple views• Can communicate with other view models• Let’s be specific:

• C#• JavaScript, etc.

wintellect.comconsulting training debugging

What is MVVM

Don’t deal with all of this

The Interface

Presentation Layer

What a View!

wintellect.comconsulting training debugging

What is MVVM? The View Model

wintellect.comconsulting training debugging

10 Reasons to Use MVVM

1. Separation of concerns/de-coupling.

2. Designer/developer workflow.

3. Unit testing.

4. Data-binding.

5. Code reuse.

6. Modularity.

7. Refactoring containment.

8. Extensibility.

9. Tools support (Windows Phone 7, MVVM Light, etc.)

10.Pattern vocabulary.

1. Separation of concerns/de-coupling.

2. Designer/developer workflow.

3. Unit testing.

4. Data-binding.

5. Code reuse.

6. Modularity.

7. Refactoring containment.

8. Extensibility.

9. Tools support (Windows Phone 7, MVVM Light, etc.)

10.Pattern vocabulary.

wintellect.comconsulting training debugging

10 Reasons to Use MVVM

1.Designer/developer workflow.

2.Unit testing.

1.Designer/developer workflow.

2.Unit testing.

wintellect.comconsulting training debugging

MVVM Frameworks

1. PRISM (Guidance/Quickstart)

2. MVVM Light

3. Jounce

4. Caliburn / Caliburn.Micro

5. Cinch

6. nRoute

7. Catel

8. Knockout.JS

9. Kendo UI

1. PRISM (Guidance/Quickstart)

2. MVVM Light

3. Jounce

4. Caliburn / Caliburn.Micro

5. Cinch

6. nRoute

7. Catel

8. Knockout.JS

9. Kendo UI

wintellect.comconsulting training debugging

How Much Does it Cost?

• Learning Curve (Developers)• Bigger down payment (architecture,

infrastructure)- Low interest rates and minimum

monthly payments!• Visibility (de-coupling can backfire)• Unnecessary complexity

• Learning Curve (Developers)• Bigger down payment (architecture,

infrastructure)- Low interest rates and minimum

monthly payments!• Visibility (de-coupling can backfire)• Unnecessary complexity

wintellect.com

demo

consulting training debugging

MVVM

consulting training debugging wintellect.com

Questions?

Jeremy LiknessSenior Consultant, Project ManagerTwitter: @JeremyLiknessBlog: http://csharperimage.jeremylikness.com/