(c) 2011 Microsoft. All rights reserved.

CHASING THE EVOLVING WEB

Aaron Powell, @slaceReadify Senior Developer, Technical Specialist (Web)Microsoft MVP – Internet Explorer (Development)

SESSION CODE: WEB203

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

► Firefox release – 14 weeks– https://developer.mozilla.org/devnews/index.ph

p/2011/04/07/new-development-channels-and-repositories-for-rapid-releases/

► Chrome release – 12 weeks– https://

docs.google.com/present/view?id=dg63dpc6_4d7vkk6ch&pli=1

HTML5 BOILERPLATEDemo

Recap – HTML5 Boilerplate

► Gets you started on a new project► Includes useful building blocks– 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– 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

FEATURE DETECTIONDemo

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

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?

AMPLIFYJSDemo

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

KNOCKOUTJSDemo

Recap - KnockoutJS

► MVVM in JavaScript► Declarative binding► Automatic event wire up► Very familiar when coming from

Silverlight/ WPF

Making It Pretty

► Awesome SVG library► SVGs make for very powerful graphics► JavaScript API

RAPHAELDemo

Recap - Raphael

► Awesome SVG library► SVGs make for very powerful graphics► JavaScript API

Thank You

► http://html5boilerplate.com► http://modernizr.com► http://yepnopejs.com► http://amplifyjs.com► http://knockoutjs.com► http://raphaeljs.com► Me:

– @slace– me@aaron-powell.com– http://www.aaron-powell.com

(c) 2011 Microsoft. All rights reserved.

© 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.