2. Agenda 1)Modern web standards overview 2)JavaScript library overview 3)Building a Single Page Application SPA

3. Modern Web Standards HTML5 + CSS3 = Magic!

4. HTML5

5. Not a marketing message What is HTML5? A new standard for a new web A language with support on a variety of devices

6. Why do you care? Browsers have become really powerful Standards mean you can target features, not browsers

7. HTML5 examples: http://www.contrejour.ie/ https://photosynth.net/ http://hover.ie/

8. Visual Studio Online

9. Map of Web Browser Standards Standard Standards Body

11. Building with standards Modern.ieCan I Use Compat Inspector Modernizer CSS Resets (Normalize.css) 11

12. New HTML5 Markup Elements From this: To this: Native tags DOM parsing is quicker than class searching Standard Tags

13. Demo Modernizer Compat Inspector

14. JavaScript Library Overview

15. Who Uses jQuery? Over 59 million sites 66.2% of the top 10k

16. jQuery – why so popular? Easy to learn Loads of Plugins Powerful DOM Selection Lightweight Community Support

17. jQuery Fundamentals Find something, Do something Functional Syntax DOM Manipulation Changing of events $(‘div’).hide(); This will be hidden So will this Even this $(function() { $('.submit').click(function(){ alert('post form'); }); $(function() { $('.submit').click(function(){ alert('post form'); }); $(function() { $('.submit').click( function(){ $('.submit').css('color', '#ff0000'); $('#container').append($(' Clicked! ').click(function(){ alert('foo'); })); });

18. Demo jQuery

19. Single Page Applications Overview and frameworks

20. Comparison: standard page requests

21. Comparison: Single Page Application

22. Knockout.js

23. AngularJS Date: {{ '2013-04-01' | date:'fullDate' }} Currency: {{ 123456 | currency }} Number: {{ 98765.4321 | number }} <ng-pluralize count="beerCount“ when="beerForms">

24. Ember.js

25. Demo Building a Single Page Application - SPA

26. Questions?