View
1.053
Download
1
Category
Tags:
Preview:
Citation preview
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
Recommended