Single Page Apps

HTML5, ASP.NET Web API, KnockoutFabrizio Iezzoni @fabrizioiezzoni

Thanks to the sponsors

What’s a SPA?

• A rich and responsive web app built with HTML5, CSS and JavaScript

• Fits in a single page (but is not a strict requirement) providing a “fluid” experience without full page loadings

• All necessary code is loaded once (bootstrap)• Persists the state on the client

SPAs are Everywhere

• Gmail (and many other Google services like Analytics, Docs, etc)

• Windows Azure Management Portal• Facebook and Twitter• Hipmunk• Trello• CloudDocument• Apple iCloud

SPA Architecture

Server Client

Web UIHTML/CSS/JS

Data servicesJSON/XML Application layer

JavaScript

Visible UIHTML/CSS

Data access layerJavaScript

Local storage

Navigation APIs

available offline

Frameworks and Libraries

• Building a SPA without the proper tools is hard• Many frameworks and libraries emerged:– AngularJS, BackboneJS, BatmanJS, CanJS, Ember,

KnockoutJS, Meteor, Spine • All adopt some sort of MV* pattern• Templating: DOM-based vs string-based• Some components are integrated (or optional),

other must be added using external libraries (for example model/data storage or routing)

Knockout.js

• Developed and mantained by Steve Anderson (formerly ASP.NET team member)

• Open Source project (NOT Microsoft)• It’s part of the ASP.NET MVC 4 template• Model-View-ViewModel (MVVM) pattern• Commanding, Change Tracking, Templating and

Validation• All the rest must be integrated with other

libraries

Demo app: SPAtube

• Very simple but complete SPA• Youtube player with a simple database for

storing private playlists and membership data• Source code on GitHub:

https://github.com/popapps/SPAtube

• Live app on AppHarbor: http://spatube.apphb.com/

SPAtube: ingredientsjQueryDOM

UI Twitter Bootstrap

Data binding MVVM Knockout.js

AJAX, data push/pull, client

storage, pub/sub

Amplify.js

Nav / History Sammy.js

Dependencyresolution Require.js

Underscore.js

others

Toastr

Moment.js

Please rate this sessionScan the code, go online, rate this session