A Smooth Transition to HTML5Using MVVM Development Patterns

CHRIS BANNON

@b4nn0n

chrisb@wijmo.com

WIJMO – UI FOR THE WEB

• 40+ Widgets

• Built on jQuery UI

• Powered by HTML5

• Themed with Themeroller

• Works Everywhere

• Supports MVVM

REAL WORLD EXAMPLES

WHY USE HTML5?

“Virtually every computing

device supports HTML and

JavaScript”

BENEFITS OF USING HTML5

• Mobile

• Performance

• Shared code in multiple platforms

– Mobile Web

– Native Mobile (PhoneGap)

– Desktop Web

– Native Desktop (Win8)

PRINCIPLES WHEN MIGRATING TO HTML5

• Port your programming knowledge

• Port your patterns & practices

• Port your code conventions

• Port your business logic, not your

code

HOW TO MIGRATE TO HTML5

HOW CAN YOU PORT TO HTML5?

Use a familiar development pattern:

MVVM

–Widely used by Flex/Silverlight developers

– Use Knockout for MVVM in JavaScript

– Use UI controls with MVVM support for

quicker development

WHAT IS MVVM?

• Model

– Data for an application

– Example: Web service

• ViewModel

– Pure code representation of UI Model

– Example: JavaScript Class or Object

• View

– Visible and Interactive UI

– Example: HTML, CSS & JavaScript UI

EXAMPLE VIEWMODEL USAGE

var myViewModel = { personName: ko.observable('Bob'), personAge: ko.observable(123)};ko.applyBindings(myViewModel);

<span data-bind="text: personName"></span>

PORTING THE MODEL

Use the same Model/Datasource

–Most JavaScript apps can use the same

services

PORTING THE VIEW-MODEL

Port the ViewModel

– Create JavaScript Objects/Classes that

match their equivalents in C#

– Hook up observability using Knockout

– Remember to focus on porting business

logic, not code

PORTING THE VIEW

Port the View

– Create HTML markup that represents your

UI (similar to what you have in MXML/XAML)

– Add data-bind attributes to bind markup to

the View-Model

– Use data-bind attributes to turn markup

into UI Controls (like Wijmo widgets)

THE BENEFITS OF USING MVVM

SHORTER DEVELOPMENT CYCLES

• MVVM separates development clearly

between Data, Code and UI

• Each layer can be developed in

parallel and individually

• Minimizes turnaround time

IMPROVED RELIABILITY / EASIER MAINTENANCE

• ViewModels are testable

• ViewModels easily integrate with Unit

Tests

• Unit Tests become assets to the project

during the lifecycle of the application

• Maintenance made easier with automated

tests

MORE PREDICTABLE DEVELOPMENT CYCLES

• Our steps in development:

– Design the View (general appearance and

behavior)

– Design the ViewModel to support the View

– Implement the ViewModel

– Implement the View

• This allows us to more easily estimate

time/cost for each step

IMPROVED QUALITY

• Less overlap between developers

and designers

• Each can focus on their specialty and

deliver higher quality

• Both can work simultaneously

FLEXIBILITY

• Loose coupling between Views and

ViewModels

• Multiple Views can use a single

ViewModel

• Easily make Mobile, Desktop or other

custom Views against a single

ViewModel

STANDARDIZATION

• Use the same binding mechanisms in multiple

applications

• Once initially developed these assets can be reused in

new applications

– Markup

– Styles

– UI Controls

– Common Input Forms

– Libraries (Globalization, shared functions, etc)

CHALLENGES WHEN PORTING TO HTML5

DEVELOPMENT TOOLS

JavaScript development tools are not

as mature as Flex/Silverlight’s

– Compile-time error detection

– Code re-factoring

– IntelliSense (Code Auto-complete /

Suggestions)

UI CONTROLS

Flex/Silverlight have a wider variety of

UI controls available to developers

– Only basic elements in HTML to use

– Usually need to use a library of UI

Controls

–More difficult to create controls in HTML

than in Flex/Silverlight

DATA ACCESS

Flex/Silverlight provide a rich and mature set

of business data tools

– No concept of data queries

– Rich data features are not native to collections

(arrays)

– Must use ajax to call services and consume data

QUESTIONS?

RESOURCES

• Wijmo MVVM Support

http://wijmo.com/widgets/mvvm-support/

• Download Wijmo

http://wijmo.com/downloads/

• Knockout

http://knockoutjs.com/

• Contact Me

@b4nn0n

chrisb@wijmo.com

THANKS FOR JOINING!