Post on 16-Dec-2015
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.