Single Page Apps or SPAs are rich, responsive web applications built with HTML5, CSS, and JavaScript that load all necessary code at once and persist state on the client without full page reloads. Many popular web apps like Gmail and Facebook use SPA architecture. Frameworks like AngularJS, BackboneJS, and KnockoutJS help build SPAs using common patterns like MVC/MVVM and provide templating, data binding, and other functionality. The document provides an example SPA called SPAtube built with KnockoutJS, jQuery, Bootstrap and other libraries that demonstrates a simple SPA for storing YouTube playlists.

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