A Smooth Transition to HTML5
Download as PPTX, PDF1 like1,255 views
The document discusses migrating to HTML5 using MVVM development patterns, highlighting the benefits of HTML5 for mobile and cross-platform applications. It provides practical steps for porting programming knowledge, patterns, and code using MVVM, with a focus on improving development cycles and application reliability. Additionally, it outlines challenges faced during migration, including limitations of JavaScript development tools and UI controls compared to Flex/Silverlight.
More Related Content
Similar to A Smooth Transition to HTML5 (20)
A Smooth Transition to HTML5
- 1. A Smooth Transition to HTML5 Using MVVM Development Patterns
- 2. @b4nn0n [email protected] CHRIS BANNON
- 3. WIJMO – UI FOR THE WEB • 40+ Widgets • Built on jQuery UI • Powered by HTML5 • Themed with Themeroller • Works Everywhere • Supports MVVM
- 5. WHY USE HTML5? “Virtually every computing device supports HTML and JavaScript”
- 6. BENEFITS OF USING HTML5 • Mobile • Performance • Shared code in multiple platforms – Mobile Web – Native Mobile (PhoneGap) – Desktop Web – Native Desktop (Win8)
- 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. HOW TO MIGRATE TO HTML5
- 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. 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. EXAMPLE VIEWMODEL USAGE var myViewModel = { personName: ko.observable('Bob'), personAge: ko.observable(123) }; ko.applyBindings(myViewModel); <span data-bind="text: personName"></span>
- 12. PORTING THE MODEL Use the same Model/Datasource – Most JavaScript apps can use the same services
- 13. 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
- 14. 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)
- 15. THE BENEFITS OF USING MVVM
- 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. 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. 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. IMPROVED QUALITY • Less overlap between developers and designers • Each can focus on their specialty and deliver higher quality • Both can work simultaneously
- 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. 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. CHALLENGES WHEN PORTING TO HTML5
- 23. 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)
- 24. 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
- 25. 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
- 26. QUESTIONS?
- 27. RESOURCES • Wijmo MVVM Support http://wijmo.com/widgets/mvvm-support/ • Download Wijmo http://wijmo.com/downloads/ • Knockout http://knockoutjs.com/ • Contact Me @b4nn0n [email protected]
Editor's Notes
- #4: 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
- #19: Design the View (general appearance and behavior of the application)Design the ViewModel to support the ViewImplement the ViewModelImplement the View