Presentation on theme: "Developing HTML5 Application using MVVM pattern Pekka Ylenius."— Presentation transcript:
Developing HTML5 Application using MVVM pattern Pekka Ylenius
This presentation Presentation is for developers Not much for designers No CSS3 nor Canvas demos Contanins demos and code samples Generic info also
How I moved to client side Started moving to client side programming 3-4 years ago jQuery made it easy for everyone to program simple scripts Combining Asp.Net controls and jQuery components was painful Searched for way to do databinding with web Finally founded Knockout
Difference between HTML5 app and server side HTML pages HTML5 application loads once at statup / HTML pages are reloading after every click of button HTML5 app is like Excel or Word No need to send intall package with every document HTML5 app can work offline also Much better performance because only little or no data is transferred when working inside application
What is Model-View-ViewModel (MVVM) pattern Originated from Microsoft Targeted at HTML5, WPF, Silverlight, WP7, WP8 Based on MVC pattern Better unit testing No dependencies to MS technologies
Model-View-ViewModel Model is actual object saved to database In phonebook app Model would be one contact View is HTML page Everything that is made visible for user ViewModel is part if model that is exposed to web page Used to combine and parse information for View Used to restrict information from View Helper methods needed by UI When we live in browser DOM everything is accessible by user
Why MVVM Pattern separates different layers in specific way so work responsibility and work can be divided. View Because UI testing is the most difficult area of testing, amount of code in View is minimized. View does not have access to model, it only binds to data provided by ViewModel. It does not need to know how to save data or when move to different view. It just knows how to command ViewModel to save data. ViewModel Responsibility is to load and save models. And sometimes parse it ready for View. ViewModel does not know how to show data. It just offers interface for View to bind to.
Why to use MVVM with HTML5 app Basically for same reasons as in any other environments also. To have easy to read and testable applications. Actual data is not saved inside inputs but inside view- model Only one place for data Enables bi-directional binding of data Easy to load data from server and save back to server
KnockoutJS Knockout makes it possible to do bi-directional binding with HTML page Knockout comes with ASP.MVC and Web Pages projects Other options for Knockout exist also Knockout does only one narrow thing but does it well. And there are other libraries to fulfill other needs which I will present later also.
Knockout demo Live learning demo from Knockout website http://learn.knockoutjs.com/#/?tutorial=collections http://learn.knockoutjs.com/#/?tutorial=collections
SPA – Sigle Page Application Gmail is one example of SPA No page loadings when using application Uses inpage # URL for navigating inside application Searches and lists can be populated still use network connectivity
SPA CRM Application demo Simple CRM Application demo Hot Towel SPA template Knockout for data bindings Durandal for navigation and UI Breeze for data mangement
PhoneGap Library for using HTML5 applications in most of Phones and Tablets Common APIs for contacts, GPS, etc. http://phonegap.com/about/feature/ http://phonegap.com/about/feature/