Developing HTML5 Application using MVVM pattern
Download
Report
Transcript Developing HTML5 Application using MVVM pattern
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