2. CHASING THE EVOLVING WEB Aaron Powell, @slace Readify Senior Developer, Technical Specialist (Web) Microsoft MVP – Internet Explorer (Development) SESSION CODE: WEB203 (c) 2011 Microsoft. All rights reserved.

4. Why? ► IE 10 Platform Previews – 8 to 12 weeks – http://blogs.msdn.com/b/ie/archive/2011/04/12/native- html5-first-ie10-platform-preview-available-for- download.aspx http://blogs.msdn.com/b/ie/archive/2011/04/12/native- html5-first-ie10-platform-preview-available-for- download.aspx ► Firefox release – 14 weeks – https://developer.mozilla.org/devnews/index.php/2011/04/ 07/new-development-channels-and-repositories-for-rapid- releases/ https://developer.mozilla.org/devnews/index.php/2011/04/ 07/new-development-channels-and-repositories-for-rapid- releases/ ► Chrome release – 12 weeks – https://docs.google.com/present/view?id=dg63dpc6_4d7v kk6ch&pli=1 https://docs.google.com/present/view?id=dg63dpc6_4d7v kk6ch&pli=1

5. HTML5 BOILERPLATE Demo

6. Recap – HTML5 Boilerplate ► Gets you started on a new project ► Includes useful building blocks – CSS normaliser – jQuery – Google Analytics – Folder structure

7. HTML5, CSS3, ES5 ► Some browsers have partial implementations ► Browser prefixes often used ► New releases support more features ► Older browsers still exist ► Clients still want them supported

8. What Works? ► User Agent sniffing – Bad – User Agent can be faked – Locks into the idea of “Browsers I understand” ► Feature detection – Query the browser to find out what it supports – Harder for the browser to lie

9. FEATURE DETECTION Demo

10. Recap – Feature Detection ► Don’t user agent sniff – User agents can be faked ► Query the browser for support ► If support doesn’t exist use a polyfill or shim – Polyfill – adds existing functionality – Shim – replicate functionality the best way you can

11. Complex Feature Detection @font-faceCanvasCanvas TextWebGLHTML5 AudioHTML5 Videorgbahsla border-imageborder-shadowtext-shadow Multiple Backgrounds background-sizeOpacityCSS animationCSS columns CSS gradientsCSS reflectionsCSS 2D transformsCSS 3D transformsFlexible box modelCSS transitionsGeolocation APIlocalStorage sessionStorageWeb WorkersapplicationCacheSVGInline SVGSVG Clip PathsSMILWeb SQL DB IndexedDBWeb Sockets Hash changed event History management Drap & Drop Cross-window messaging TouchMedia Queries

12. Complex Feature Detection ► How do you detect – @font-face – New input attributes – New input types – CSS3 features ► Lots of complex JavaScript ► Still have to decide how to deal with the feature

13. MODERNIZR AND YEPNOPE.JS Demo

14. Recap - YepNopeJS ► Asynchronous loader – Loads CSS & JavaScript ► Can be used to load files conditionally

15. Recap - Modernizr ► Modernizr does feature support ► Use full version in development – Generate a custom build for production ► Modernizr can be extended to add your own tests

16. Simplifying Common Tasks ► Working with AJAX – $.ajax? – Caching? – RESTful? ► Browser storage – localStorage? – sessionStorage? – Cookies? ► Cross-component communication?

17. AMPLIFYJS Demo

18. Recap - AmplifyJS ► Pub/ Sub ► Storage ► Simplified Request/ Response – Easier for JavaScript unit tests ► Each part available separately

19. Stateful applications ► Server style coding, but in the browser – Handling hashbangs – Binding data to UI – Creating data modules

20. KNOCKOUTJS Demo

21. Recap - KnockoutJS ► MVVM in JavaScript ► Declarative binding ► Automatic event wire up ► Very familiar when coming from Silverlight/ WPF

22. Making It Pretty ► Awesome SVG library ► SVGs make for very powerful graphics ► JavaScript API

23. RAPHAEL Demo

24. Recap - Raphael ► Awesome SVG library ► SVGs make for very powerful graphics ► JavaScript API

25. Thank You ► http://html5boilerplate.com http://html5boilerplate.com ► http://modernizr.com http://modernizr.com ► http://yepnopejs.com http://yepnopejs.com ► http://amplifyjs.com http://amplifyjs.com ► http://knockoutjs.com http://knockoutjs.com ► http://raphaeljs.com http://raphaeljs.com ► Me: – @slace – me@aaron-powell.com me@aaron-powell.com – http://www.aaron-powell.com http://www.aaron-powell.com

26. © 2010 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. (c) 2011 Microsoft. All rights reserved.