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

Myself  Hardcore c# developer  Tried to avoid JavaScript as long as possible  Have been working a lot with SilverLight and ASP.Net (UpdatePanel was Ajax enough for me)  I started moving to Javascript word after Microsoft  SilverLight was ”killed”  Huge promoting for Windows 8 App development with Javascript  Azure Mobile Services support only Javascript serverside scripts  New Office Store is also HTML+Javascript only

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

Debugging Javascript  Painful at beginning  Visual Studio 2010 supported stepping inside Javascript code  Currently Google Chrome and Mozilla Firefox have excellent debuggers  Debug console helped tracing  Visual Studio 2012 has much better support for debugging Javascript  Currently debugging Javasript is almost as easy as debuggin c#

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 

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. 

PhoneGap demo  Moving previous CRM demo app to WP8