a smooth transition to html5
DESCRIPTION
How difficult is it to port Flex and Silverlight applications to HTML5? That is the question we hear every day at ComponentOne. Instead of speculating about it, we decided to sit down and try it. Today we will discuss the process and tools we used when doing so. The approach we took was to use the MVVM pattern (from Silverlight) when developing the HTML5/JavaScript version. By choosing this method we were able to port our data access and UI layers quite easily. Our developers were able to minimize the cost of learning new paradigms in this migration by reusing most of their knowledge. What we ended up with was nearly identical applications in Silverlight and HTML5. Come learn how you can smoothly transition to HTML5!TRANSCRIPT
![Page 1: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/1.jpg)
A Smooth Transition to HTML5Using MVVM Development Patterns
![Page 3: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/3.jpg)
WIJMO – UI FOR THE WEB
• 40+ Widgets
• Built on jQuery UI
• Powered by HTML5
• Themed with Themeroller
• Works Everywhere
• Supports MVVM
![Page 4: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/4.jpg)
REAL WORLD EXAMPLES
![Page 5: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/5.jpg)
WHY USE HTML5?
“Virtually every computing
device supports HTML and
JavaScript”
![Page 6: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/6.jpg)
BENEFITS OF USING HTML5
• Mobile
• Performance
• Shared code in multiple platforms
– Mobile Web
– Native Mobile (PhoneGap)
– Desktop Web
– Native Desktop (Win8)
![Page 7: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/7.jpg)
PRINCIPLES WHEN MIGRATING TO HTML5
• Port your programming knowledge
• Port your patterns & practices
• Port your code conventions
• Port your business logic, not your
code
![Page 8: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/8.jpg)
HOW TO MIGRATE TO HTML5
![Page 9: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/9.jpg)
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
![Page 10: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/10.jpg)
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
![Page 11: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/11.jpg)
EXAMPLE VIEWMODEL USAGE
var myViewModel = { personName: ko.observable('Bob'), personAge: ko.observable(123)};ko.applyBindings(myViewModel);
<span data-bind="text: personName"></span>
![Page 12: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/12.jpg)
PORTING THE MODEL
Use the same Model/Datasource
–Most JavaScript apps can use the same
services
![Page 13: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/13.jpg)
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
![Page 14: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/14.jpg)
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)
![Page 15: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/15.jpg)
THE BENEFITS OF USING MVVM
![Page 16: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/16.jpg)
SHORTER DEVELOPMENT CYCLES
• MVVM separates development clearly
between Data, Code and UI
• Each layer can be developed in
parallel and individually
• Minimizes turnaround time
![Page 17: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/17.jpg)
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
![Page 18: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/18.jpg)
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
![Page 19: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/19.jpg)
IMPROVED QUALITY
• Less overlap between developers
and designers
• Each can focus on their specialty and
deliver higher quality
• Both can work simultaneously
![Page 20: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/20.jpg)
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
![Page 21: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/21.jpg)
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)
![Page 22: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/22.jpg)
CHALLENGES WHEN PORTING TO HTML5
![Page 23: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/23.jpg)
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)
![Page 24: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/24.jpg)
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
![Page 25: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/25.jpg)
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
![Page 26: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/26.jpg)
QUESTIONS?
![Page 27: A Smooth Transition to HTML5](https://reader033.vdocuments.us/reader033/viewer/2022050905/54c6bdcb4a7959c4648b459a/html5/thumbnails/27.jpg)
RESOURCES
• Wijmo MVVM Support
http://wijmo.com/widgets/mvvm-support/
• Download Wijmo
http://wijmo.com/downloads/
• Knockout
http://knockoutjs.com/
• Contact Me
@b4nn0n