Chasing the evolving web SESSION CODE: WEB203 Aaron Powell, @slace Readify Senior Developer, Technical Specialist (Web) Microsoft MVP – Internet Explorer (Development) Chasing the evolving web (c) 2011 Microsoft. All rights reserved.

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

Demo HTML5 Boilerplate

Recap – HTML5 Boilerplate Gets you started on a new project Includes defaults like CSS normaliser jQuery Google Analytics Folder structure

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

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

Demo Feature Detection

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

Complex Feature Detection @font-face Canvas Canvas Text WebGL HTML5 Audio HTML5 Video rgba hsla border-image border-shadow text-shadow Multiple Backgrounds background-size Opacity CSS animation CSS columns CSS gradients CSS reflections CSS 2D transforms CSS 3D transforms Flexible box model CSS transitions Geolocation API localStorage sessionStorage Web Workers applicationCache SVG Inline SVG SVG Clip Paths SMIL Web SQL DB IndexedDB Web Sockets Hash changed event History management Drap & Drop Cross-window messaging Touch Media Queries

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

Modernizr and YepNope.js Demo Modernizr and YepNope.js

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

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

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

Demo AmplifyJS

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

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

Demo KnockoutJS

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

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

Enrol in Microsoft Virtual Academy Today Why Enroll, other than it being free? The MVA helps improve your IT skill set and advance your career with a free, easy to access training portal that allows you to learn at your own pace, focusing on Microsoft technologies. What Do I get for enrolment? Free training to make you become the Cloud-Hero in my Organization Help mastering your Training Path and get the recognition Connect with other IT Pros and discuss The Cloud Where do I Enrol? www.microsoftvirtualacademy.com Then tell us what you think. TellTheDean@microsoft.com

(c) 2011 Microsoft. All rights reserved. Resources www.msteched.com/Australia Sessions On-Demand & Community www.microsoft.com/australia/learning Microsoft Certification & Training Resources http:// technet.microsoft.com/en-au Resources for IT Professionals http://msdn.microsoft.com/en-au Resources for Developers (c) 2011 Microsoft. All rights reserved.

(c) 2011 Microsoft. All rights reserved. 12/7/2018 2:44 AM © 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. © 2007 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.