1 / 25

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. Why?. IE 10 Platform Previews – 8 to 12 weeks

wendell
Download Presentation

Chasing the evolving web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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 • 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/

  3. Demo HTML5 Boilerplate

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

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

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

  7. Demo Feature Detection

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

  9. Complex Feature Detection

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

  11. Demo Modernizr and YepNope.js

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

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

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

  15. Demo AmplifyJS

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

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

  18. Demo KnockoutJS

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

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

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

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

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

More Related