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
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: ingredients DOM jQuery others UI Twitter Bootstrap Underscore.js Data binding MVVM Knockout.js Toastr AJAX, data push/pull, client Amplify.js Moment.jsstorage, pub/sub Nav / History Sammy.js Dependency resolution Require.js
Please rate this sessionScan the code, go online, rate this session
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.