WebNetConf 2012 - Single Page Apps
-
Upload
pop-apps -
Category
Technology
-
view
1.053 -
download
1
Transcript of WebNetConf 2012 - Single Page Apps
![Page 1: WebNetConf 2012 - Single Page Apps](https://reader035.fdocuments.net/reader035/viewer/2022062703/554f8f52b4c905d25b8b510f/html5/thumbnails/1.jpg)
Single Page Apps
HTML5, ASP.NET Web API, KnockoutFabrizio Iezzoni @fabrizioiezzoni
![Page 2: WebNetConf 2012 - Single Page Apps](https://reader035.fdocuments.net/reader035/viewer/2022062703/554f8f52b4c905d25b8b510f/html5/thumbnails/2.jpg)
Thanks to the sponsors
![Page 3: WebNetConf 2012 - Single Page Apps](https://reader035.fdocuments.net/reader035/viewer/2022062703/554f8f52b4c905d25b8b510f/html5/thumbnails/3.jpg)
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
![Page 4: WebNetConf 2012 - Single Page Apps](https://reader035.fdocuments.net/reader035/viewer/2022062703/554f8f52b4c905d25b8b510f/html5/thumbnails/4.jpg)
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
![Page 5: WebNetConf 2012 - Single Page Apps](https://reader035.fdocuments.net/reader035/viewer/2022062703/554f8f52b4c905d25b8b510f/html5/thumbnails/5.jpg)
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
![Page 6: WebNetConf 2012 - Single Page Apps](https://reader035.fdocuments.net/reader035/viewer/2022062703/554f8f52b4c905d25b8b510f/html5/thumbnails/6.jpg)
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)
![Page 7: WebNetConf 2012 - Single Page Apps](https://reader035.fdocuments.net/reader035/viewer/2022062703/554f8f52b4c905d25b8b510f/html5/thumbnails/7.jpg)
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
![Page 8: WebNetConf 2012 - Single Page Apps](https://reader035.fdocuments.net/reader035/viewer/2022062703/554f8f52b4c905d25b8b510f/html5/thumbnails/8.jpg)
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/
![Page 9: WebNetConf 2012 - Single Page Apps](https://reader035.fdocuments.net/reader035/viewer/2022062703/554f8f52b4c905d25b8b510f/html5/thumbnails/9.jpg)
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
![Page 10: WebNetConf 2012 - Single Page Apps](https://reader035.fdocuments.net/reader035/viewer/2022062703/554f8f52b4c905d25b8b510f/html5/thumbnails/10.jpg)
Please rate this sessionScan the code, go online, rate this session