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


View is HTML page


In phonebook app Model would be one contact
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 viewmodel

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
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/
PhoneGap demo

Moving previous CRM demo app to WP8