Chasing the evolving webWUX202

Aaron PowellSenior Developer, Technical SpecialistReadify

Why?

IE 10 Platform Previews – 8 to 12 weekshttp://blogs.msdn.com/b/ie/archive/2011/04/12/native-html5-first-ie10-platform-preview-available-for-download.aspx

Firefox release – 14 weekshttps://developer.mozilla.org/devnews/index.php/2011/04/07/new-development-channels-and-repositories-for-rapid-releases/

Chrome release – 12 weekshttps://docs.google.com/present/view?id=dg63dpc6_4d7vkk6ch&pli=1

Demo

HTML5 Boilerplate

Recap – HTML5 Boilerplate

Gets you started on a new projectIncludes defaults like

CSS normaliserjQueryGoogle AnalyticsFolder structure

HTML5, CSS3, ES5

Some browsers have partial implementationsBrowser prefixes often usedNew releases support more featuresOlder browsers still existClients still want them supported

What Works?

User Agent sniffingBadLocks into the idea of “Browsers I understand”User Agent can be faked

Feature detectionQuery the browser to find out what it supportsHarder for the browser to lie

Demo

Feature Detection

Recap – Feature Detection

Don’t user agent sniffUser agents can be faked

Query the browser for supportIf support doesn’t exist use a polyfill or shim

Polyfill – adds existing functionalityShim – 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

Complex Feature Detection

How do you detect@font-faceNew input attributesNew input typesCSS3 features

Lots of complex JavaScriptStill have to decide how to deal with the feature

Demo

Modernizr and YepNope.js

Recap – Modernizr & Yepnope.js

Modernizr does feature supportYepnope.js allows conditional loading of featuresModernizr is extensible

Making It Pretty

SVGs are sexyGreat for complex dynamic graphics

CanvasPositioning, manipulating, tracking objects can be trickyCan’t talk HTML5 without it

Demo

Raphael and EaselJS

Recap - Raphael

Awesome SVG librarySVGs make for very powerful graphicsJavaScript API

Recap - EaselJS

EaselJS for CanvasJavaScript APIs

Simplifying Common Tasks

Working with AJAX$.ajax?Caching?RESTful?

Browser storagelocalStorage?sessionStorage?Cookies?

Cross-component communication?

Demo

AmplifyJS

Recap - AmplifyJS

Pub/ SubStorageSimplified Request/ ResponseEach part available separately

MVCVVMVP

Server style coding, but in the browserHandling hashbangsBinding data to UICreating data moudles

Demo

Knockout and Backbone

Recap – Knockout

MVVM in JavaScriptDeclarative bindingVery familiar when coming from Silverlight/ WPF

Recap - Backbone

MVC in JavaScriptUses JavaScript for building whole page

Links

http://html5boilerplate.comhttp://modernizr.comhttp://yepnopejs.comhttp://raphaeljs.comhttp://easeljs.comhttp://amplifyjs.comhttp://knockoutjs.comhttp://backbonejs.comMe: @slace / me@aaron-powell.com / http://aaron-powell.com

Evaluate your sessionson CommNet and go inthe draw to win instantprizes

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