• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WebNetConf 2012 - Single Page Apps
 

WebNetConf 2012 - Single Page Apps

on

  • 1,622 views

 

Statistics

Views

Total Views
1,622
Views on SlideShare
1,622
Embed Views
0

Actions

Likes
1
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    WebNetConf 2012 - Single Page Apps WebNetConf 2012 - Single Page Apps Presentation Transcript

    • 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 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 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
    • 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