a smooth transition to html5 using mvvm

A Smooth Transition to HTML5

Using MVVM Development Patterns

About: me

Chris Bannon@b4nn0nchrisb@wijmo.com

Wijmo

• 40+ Widgets

• Built on jQuery UI

• Powered by HTML5

• Themed with Themeroller

• Supports MVVM

About: session

• Philosophical (warning: lot’s of

talking)

• Share our approach on porting to

HTML5

– General guidelines

– Tools

– Pitfalls

• Show some code!

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 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 Usagevar myViewModel = { personName: ko.observable('Bob'), personAge: ko.observable(123)};ko.applyBindings(myViewModel);

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

MVVM Examples

Using Knockout for MVVM in JavaScript

Porting the Model

Use the same Model/Datasource

–Most JavaScript apps can use the same

services

Porting the ViewModel

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 XAML)

– Add data-bind attributes to bind markup to

the View-Model

– Use data-bind attributes to turn markup

into UI Controls (like jQuery UI 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 Silverlight’s

– Compile-time error detection

– Code re-factoring

– IntelliSense (Code Auto-complete /

Suggestions)

UI Controls

Silverlight has 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 Silverlight

Data Access

Silverlight provides 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!