Downloaded 54 times
Uploaded byChris Bannon
A Smooth Transition to HTML5 Using MVVM
The document discusses transitioning to HTML5 using the MVVM development pattern, highlighting its benefits such as improved performance and cross-platform compatibility. Key principles for migration include focusing on business logic rather than code, utilizing the Knockout library for MVVM in JavaScript, and creating a clear separation between data, code, and UI for efficient development. It also addresses challenges developers may encounter during the transition, such as less mature JavaScript tools compared to Silverlight.
A Smooth Transition to HTML5 Using MVVM
- 1. A Smooth Transition to HTML5 UsingMVVM Development Patterns
- 2.
- 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.
- 6. Why Use HTML5? “Virtually every computingdevice 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 toHTML5 • Port your programming knowledge • Port your patterns & practices • Port your code conventions • Port your business logic, not your code
- 9. How to Migrate toHTML5
- 10. How Can YouPort 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 Knockoutfor MVVM in JavaScript
- 14. Porting the Model Usethe same Model/Datasource – Most JavaScript apps can use the same services
- 15. Porting the ViewModel Port theViewModel – 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 Portthe 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.
- 18. Shorter Development Cycles • MVVMseparates 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 • Lessoverlap between developers and designers • Each can focus on their specialty and deliver higher quality • Both can work simultaneously
- 22. Flexibility • Loose couplingbetween 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 thesame 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.
- 25. Development Tools JavaScript development toolsare not as mature as Silverlight’s – Compile-time error detection – Code re-factoring – IntelliSense (Code Auto-complete / Suggestions)
- 26. UI Controls Silverlight hasa 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 providesa 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.
- 29. Resources • Wijmo MVVMSupport http://wijmo.com/widgets/mvvm-support/ • Download Wijmo http://wijmo.com/downloads/ • Knockout http://knockoutjs.com/ • Contact Me @b4nn0n chrisb@wijmo.com
- 30.
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
- #21 Design the View (general appearance and behavior of the application)Design the ViewModel to support the ViewImplement the ViewModelImplement the View