building web front ends using single page applications
TRANSCRIPT
Building web front ends
using Single Page Applications
Dave VoylesTechnical Evangelist
Email: [email protected]
@DaveVoyles
Agenda
1)Building the GeekQuiz front-end
Single Page ApplicationsOverview and frameworks
Client Browse
r
WebServer
Request: http://site.com/products/
Response: Full pageHTMLCSS
ImagesJavascript
Comparison: standard page requests
Request: http://site.com/products/6
Response: Full pageHTMLCSS
ImagesJavascript
Client Browse
r
WebServer
Request: http://site.com/products/
Response: Full pageHTMLCSS
ImagesJavascript
Comparison: Single Page Application
Request: http://site.com/products/6
Response: Tiny bit of data{product}
Declarative Bindings
Automatic UI refresh
Dependency Tracking
Templating
Knockout.js
Custom Tag
Attributes
Powerful Directives
Declarative Style
Strict Separation
AngularJS
<!doctype html> <html ng-app="app"> <body> <tabs> <pane title="Localization"> Date: {{ '2013-04-01' | date:'fullDate' }} <br> Currency: {{ 123456 | currency }} <br> Number: {{ 98765.4321 | number }} <br> </pane> <pane title="Pluralization"> <div ng-controller="BeerCounter"> <div ng-repeat="beerCount in beers"> <ng-pluralize count="beerCount“ when="beerForms"> </ng-pluralize> </div> </div> </pane> </tabs> </body></html>
Ember is a framework
Convention over config
URLs are important
Ember.js
DemoBuilding the GeekQuiz front end w/ Angular
Summary Building the GeekQuiz front end
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.