Single Page AppsHTML5, ASP.NET Web API, Knockout         Fabrizio 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 st...
SPAs are Everywhere• Gmail (and many other Google services like  Analytics, Docs, etc)• Windows Azure Management Portal• F...
SPA Architecture                                Visible UI    Web UI                                HTML/CSS  HTML/CSS/JS ...
Frameworks and Libraries• Building a SPA without the proper tools is hard• Many frameworks and libraries emerged:  – Angul...
Knockout.js• Developed and mantained by Steve Anderson  (formerly ASP.NET team member)• Open Source project (NOT Microsoft...
Demo app: SPAtube• Very simple but complete SPA• Youtube player with a simple database for  storing private playlists and ...
SPAtube: ingredients     DOM                  jQuery            others       UI            Twitter Bootstrap   Underscore....
Please rate this sessionScan the code, go online, rate this session
Upcoming SlideShare
Loading in …5
×

WebNetConf 2012 - Single Page Apps

1,420 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,420
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

WebNetConf 2012 - Single Page Apps

  1. 1. Single Page AppsHTML5, ASP.NET Web API, Knockout Fabrizio Iezzoni @fabrizioiezzoni
  2. 2. Thanks to the sponsors
  3. 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. 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. 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 storageServer Client
  6. 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. 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. 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. 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.jsstorage, pub/sub Nav / History Sammy.js Dependency resolution Require.js
  10. 10. Please rate this sessionScan the code, go online, rate this session

×