SESSION CODE WEB 203 Aaron Powell slace Readify

SESSION CODE: WEB 203 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 – http: //blogs. msdn. com/b/ie/archive/2011/04/12/nativehtml 5 -first-ie 10 -platform-preview-available-fordownload. aspx ► Chrome release – 12 weeks – https: //docs. google. com/present/view? id=dg 63 dpc 6_4 d 7 v kk 6 ch&pli=1 ► Firefox release – 14 weeks – https: //developer. mozilla. org/devnews/index. php/2011/04/ 07/new-development-channels-and-repositories-for-rapidreleases/

Demo HTML 5 BOILERPLATE

Recap – HTML 5 Boilerplate ► Gets you started on a new project ► Includes defaults like – – CSS normaliser j. Query Google Analytics Folder structure

HTML 5, CSS 3, ES 5 ► 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 – 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 Text Web. GL HTML 5 Audio HTML 5 Video rgba hsla border-image border-shadow text-shadow Multiple Backgrounds background-size Opacity CSS animation CSS columns CSS gradients CSS reflections CSS 2 D transforms CSS 3 D transforms Flexible box model CSS transitions Geolocation API local. Storage session. Storage Web Workers application. Cache SVG Inline SVG Clip Paths SMIL Web SQL DB Indexed. DB 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 CSS 3 features ► Lots of complex Java. Script ► Still have to decide how to deal with the feature

Demo MODERNIZR AND YEPNOPE. JS

Recap - Yep. Nope. JS ► Asynchronous loader – Loads CSS & Java. Script ► 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 – local. Storage? – session. Storage? – Cookies? ► Cross-component communication?

Demo AMPLIFYJS

Recap - Amplify. JS ► Pub/ Sub ► Storage ► Simplified Request/ Response – Easier for Java. Script 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 - Knockout. JS ► MVVM in Java. Script ► Declarative binding ► Automatic event wire up ► Very familiar when coming from Silverlight/ WPF

Thank You ► http: //html 5 boilerplate. 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. Tell. The. Dean@microsoft. com

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

© 2010 Microsoft Corporation. All rights reserved. Microsoft, 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.