Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A Smooth Transition to HTML5 Using MVVM


Published on

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!

Published in: Technology
  • Be the first to comment

A Smooth Transition to HTML5 Using MVVM

  1. 1. A SmoothTransition toHTML5Using MVVMDevelopment Patterns
  2. 2. About: meChris
  3. 3. Wijmo• 40+ Widgets• Built on jQuery UI• Powered by HTML5• Themed with Themeroller• Supports MVVM
  4. 4. About: session• Philosophical (warning: lot’s of talking)• Share our approach on porting to HTML5 – General guidelines – Tools – Pitfalls• Show some code!
  5. 5. Real WorldExamples
  6. 6. Why UseHTML5?“Virtually everycomputing devicesupports HTML andJavaScript”
  7. 7. Benefits of UsingHTML5• Mobile• Performance• Shared code in multiple platforms – Mobile Web – Native Mobile (PhoneGap) – Desktop Web – Native Desktop (Win8)
  8. 8. Principles WhenMigrating to HTML5• Port your programming knowledge• Port your patterns & practices• Port your code conventions• Port your business logic, not your code
  9. 9. How to Migrateto HTML5
  10. 10. How Can You Portto 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. 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. 12. ExampleViewModel Usagevar myViewModel = { personName: ko.observable(Bob), personAge: ko.observable(123)};ko.applyBindings(myViewModel);<span data-bind="text: personName"></span>
  13. 13. MVVM ExamplesUsing Knockout forMVVM in JavaScript
  14. 14. Porting the ModelUse the same Model/Datasource – Most JavaScript apps can use the same services
  15. 15. Porting theViewModelPort 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. 16. Porting the ViewPort 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. 17. The Benefits ofUsing MVVM
  18. 18. ShorterDevelopment Cycles• MVVM separates development clearly between Data, Code and UI• Each layer can be developed in parallel and individually• Minimizes turnaround time
  19. 19. Improved Reliability& EasierMaintenance• 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. 20. More PredictableDevelopment 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. 21. Improved Quality• Less overlap between developers and designers• Each can focus on their specialty and deliver higher quality• Both can work simultaneously
  22. 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. 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. 24. ChallengesWhen Porting toHTML5
  25. 25. DevelopmentToolsJavaScript development tools are not asmature as Silverlight’s – Compile-time error detection – Code re-factoring – IntelliSense (Code Auto-complete / Suggestions)
  26. 26. UI ControlsSilverlight has a wider variety of UI controlsavailable 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. 27. Data AccessSilverlight provides a rich and mature set ofbusiness 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. 28. Questions?
  29. 29. Resources• Wijmo MVVM Support• Download Wijmo• Knockout• Contact Me @b4nn0n
  30. 30. Thanks forJoining!