A Smooth Transition to HTML5

A Smooth Transition to HTML5
Using MVVM Development Patterns

@b4nn0n
chrisb@wijmo.com

CHRIS BANNON

WIJMO – UI FOR THE WEB

• 40+ Widgets
• Built on jQuery UI
• Powered by HTML5
• Themed with Themeroller
• Works Everywhere
• Supports MVVM

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

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

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

A Smooth Transition to HTML5

More Related Content

What's hot

Similar to A Smooth Transition to HTML5

More from Chris Bannon

Recently uploaded

A Smooth Transition to HTML5

Editor's Notes