How difficult is it to port 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. We take advantage of tools like KnockoutJS and Wijmo to make the process even easier. 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!

1. A Smooth
Transition to
HTML5
Using MVVM
Development Patterns

2. About: me
Chris Bannon
@b4nn0n
chrisb@wijmo.com

3. Wijmo
• 40+ Widgets
• Built on jQuery UI
• Powered by HTML5
• Themed with Themeroller
• Supports MVVM

4. About: session
• Philosophical (warning: lot’s of talking)
• Share our approach on porting to HTML5
– General guidelines
– Tools
– Pitfalls
• Show some code!

5. Real World
Examples

6. Why Use
HTML5?
“Virtually every
computing device
supports HTML and
JavaScript”

7. Benefits of Using
HTML5
• Mobile
• Performance
• Shared code in multiple platforms
– Mobile Web
– Native Mobile (PhoneGap)
– Desktop Web
– Native Desktop (Win8)

8. Principles When
Migrating to HTML5
• Port your programming knowledge
• Port your patterns & practices
• Port your code conventions
• Port your business logic, not your code

9. How to Migrate
to HTML5

10. 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

11. 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

12. Example
ViewModel Usage
var myViewModel = {
personName: ko.observable('Bob'),
personAge: ko.observable(123)
};
ko.applyBindings(myViewModel);
<span data-bind="text: personName"></span>

13. MVVM Examples
Using Knockout for
MVVM in JavaScript

14. Porting the Model
Use the same Model/Datasource
– Most JavaScript apps can use the same
services

15. 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

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

17. The Benefits of
Using MVVM

18. Shorter
Development Cycles
• MVVM separates development clearly
between Data, Code and UI
• Each layer can be developed in parallel
and individually
• Minimizes turnaround time

19. 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

20. 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

21. Improved Quality
• Less overlap between developers and
designers
• Each can focus on their specialty and
deliver higher quality
• Both can work simultaneously

22. 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

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

24. Challenges
When Porting to
HTML5

25. Development
Tools
JavaScript development tools are not as
mature as Silverlight’s
– Compile-time error detection
– Code re-factoring
– IntelliSense (Code Auto-complete /
Suggestions)

26. 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

27. 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

28. Questions?

29. 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

30. Thanks for
Joining!