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.
More Related Content
Similar to A Smooth Transition to HTML5 Using MVVM
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