1. Single Page Apps
HTML5, ASP.NET Web API, Knockout
Fabrizio Iezzoni
@fabrizioiezzoni

2. Thanks to the sponsors

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

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

5. SPA Architecture
Visible UI
Web UI
HTML/CSS
HTML/CSS/JS
Data services
JSON/XML Application layer Navigation
JavaScript APIs
Data access layer
JavaScript
Local storage
Server Client

6. 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)

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

8. 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/

9. SPAtube: ingredients
DOM jQuery others
UI Twitter Bootstrap Underscore.js
Data binding
MVVM Knockout.js Toastr
AJAX, data
push/pull, client Amplify.js Moment.js
storage, pub/sub
Nav / History Sammy.js
Dependency
resolution
Require.js

10. Please rate this session
Scan the code, go online, rate this session