A Smooth Transition to HTML5Using MVVM Development Patterns
@b4nn0n    chrisb@wijmo.comCHRIS BANNON
WIJMO – UI FOR THE WEB• 40+ Widgets• Built on jQuery UI• Powered by HTML5• Themed with Themeroller• Works Everywhere• Supp...
REAL WORLD EXAMPLES
WHY USE HTML5?“Virtually every computingdevice supports HTML andJavaScript”
BENEFITS OF USING HTML5• Mobile• Performance• Shared code in multiple platforms  – Mobile Web  – Native Mobile (PhoneGap) ...
PRINCIPLES WHEN MIGRATING TO HTML5• Port your programming knowledge• Port your patterns & practices• Port your code conven...
HOW TO MIGRATE TO HTML5
HOW CAN YOU PORT TO HTML5?Use a familiar development pattern: MVVM  – Widely used by Flex/Silverlight developers  – Use Kn...
WHAT IS MVVM?• Model  – Data for an application  – Example: Web service• ViewModel  – Pure code representation of UI Model...
EXAMPLE VIEWMODEL USAGEvar myViewModel = {    personName: ko.observable(Bob),    personAge: ko.observable(123)};ko.applyBi...
PORTING THE MODELUse the same Model/Datasource  – Most JavaScript apps can use the same   services
PORTING THE VIEW-MODELPort the ViewModel  – Create JavaScript Objects/Classes that match   their equivalents in C#  – Hook...
PORTING THE VIEWPort the View  – Create HTML markup that represents your UI    (similar to what you have in MXML/XAML)  – ...
THE BENEFITS OF USING MVVM
SHORTER DEVELOPMENT CYCLES• MVVM separates development clearly between Data, Code and UI• Each layer can be developed in p...
IMPROVED RELIABILITY / EASIER MAINTENANCE• ViewModels are testable• ViewModels easily integrate with Unit Tests• Unit Test...
MORE PREDICTABLE DEVELOPMENT CYCLES• Our steps in development:  – Design the View (general appearance and    behavior)  – ...
IMPROVED QUALITY• Less overlap between developers and designers• Each can focus on their specialty and deliver higher qual...
FLEXIBILITY• Loose coupling between Views and ViewModels• Multiple Views can use a single ViewModel• Easily make Mobile, D...
STANDARDIZATION• Use the same binding mechanisms in multiple applications• Once initially developed these assets can be re...
CHALLENGES WHEN PORTING TO HTML5
DEVELOPMENT TOOLSJavaScript development tools are not asmature as Flex/Silverlight’s  – Compile-time error detection  – Co...
UI CONTROLSFlex/Silverlight have a wider variety of UIcontrols available to developers  – Only basic elements in HTML to u...
DATA ACCESSFlex/Silverlight provide a rich and mature set ofbusiness data tools  – No concept of data queries  – Rich data...
QUESTIONS?
RESOURCES• Wijmo MVVM Support  http://wijmo.com/widgets/mvvm-support/• Download Wijmo  http://wijmo.com/downloads/• Knocko...
THANKS FOR JOINING!
Upcoming SlideShare
Loading in...5
×

A Smooth Transition to HTML5

1,613

Published on

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!

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,613
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Complete kit of UI widgets for HTML5 and jQuery developmentUnmatched Data Visualization  and Grid componentsHandcrafted CSS3 Themes and infinite possibilities  with ThemerollerWorks everywhere – devices and browsers supported40+ jQuery UI Widgets
  • Design the View (general appearance and behavior of the application)Design the ViewModel to support the ViewImplement the ViewModelImplement the View
  • A Smooth Transition to HTML5

    1. 1. A Smooth Transition to HTML5Using MVVM Development Patterns
    2. 2. @b4nn0n chrisb@wijmo.comCHRIS BANNON
    3. 3. WIJMO – UI FOR THE WEB• 40+ Widgets• Built on jQuery UI• Powered by HTML5• Themed with Themeroller• Works Everywhere• Supports MVVM
    4. 4. REAL WORLD EXAMPLES
    5. 5. WHY USE HTML5?“Virtually every computingdevice supports HTML andJavaScript”
    6. 6. BENEFITS OF USING HTML5• Mobile• Performance• Shared code in multiple platforms – Mobile Web – Native Mobile (PhoneGap) – Desktop Web – Native Desktop (Win8)
    7. 7. PRINCIPLES WHEN MIGRATING TO HTML5• Port your programming knowledge• Port your patterns & practices• Port your code conventions• Port your business logic, not your code
    8. 8. HOW TO MIGRATE TO HTML5
    9. 9. 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
    10. 10. 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
    11. 11. EXAMPLE VIEWMODEL USAGEvar myViewModel = { personName: ko.observable(Bob), personAge: ko.observable(123)};ko.applyBindings(myViewModel);<span data-bind="text: personName"></span>
    12. 12. PORTING THE MODELUse the same Model/Datasource – Most JavaScript apps can use the same services
    13. 13. PORTING THE VIEW-MODELPort 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
    14. 14. PORTING THE VIEWPort 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)
    15. 15. THE BENEFITS OF USING MVVM
    16. 16. SHORTER DEVELOPMENT CYCLES• MVVM separates development clearly between Data, Code and UI• Each layer can be developed in parallel and individually• Minimizes turnaround time
    17. 17. 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
    18. 18. 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
    19. 19. IMPROVED QUALITY• Less overlap between developers and designers• Each can focus on their specialty and deliver higher quality• Both can work simultaneously
    20. 20. 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
    21. 21. 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)
    22. 22. CHALLENGES WHEN PORTING TO HTML5
    23. 23. DEVELOPMENT TOOLSJavaScript development tools are not asmature as Flex/Silverlight’s – Compile-time error detection – Code re-factoring – IntelliSense (Code Auto-complete / Suggestions)
    24. 24. UI CONTROLSFlex/Silverlight have a wider variety of UIcontrols 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
    25. 25. DATA ACCESSFlex/Silverlight provide 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
    26. 26. QUESTIONS?
    27. 27. 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
    28. 28. THANKS FOR JOINING!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×