1 / 32

Using JavaScript to Build HTML5 Applications

Using JavaScript to Build HTML5 Applications. Jonathan Carter joncart@microsoft.com www.lostintangent.com @lostintangent. What questions are we going to address?. Prologue What does “HTML5” even mean? Why should you care about it? What are some development considerations? Story

elyse
Download Presentation

Using JavaScript to Build HTML5 Applications

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. Using JavaScript to Build HTML5 Applications Jonathan Carter joncart@microsoft.com www.lostintangent.com @lostintangent

  2. What questions are we going to address? Prologue • What does “HTML5” even mean? • Why should you care about it? • What are some development considerations? Story • Is JavaScript ready for mainstream usage? • What kind of scenarios can JavaScript enable?

  3. HTML, CSS and JavaScript have been around forever ….

  4. They have been great for building web sites ….

  5. But they’ve required lots of hacks to do complex things ….

  6. “HTML5” strives to make them usable for building real applications

  7. So HTML5 is an umbrella term for… • HTML (v5+) Increased semantics, multimedia, graphics, etc. • CSS (Level 3+) Richer selectors, layout systems, animations, fonts, etc. • JavaScript (ECMAScript 5+, DOM) Strict mode, new APIs (e.g. background processes, file access, bi-directional server communication)

  8. Why should you care? • Reason #1: HTML5 is the direction the industry is moving • Reason #2: HTML5 applications will have the broadest reach across consumer devices • Reason #3: You shouldn’t need another reason

  9. What are some development considerations? • It’s a progressively usable set of technologies • Use what browsers support • Get familiar with features that are coming • HTML5 is a client technology • Server-interaction should be kept to a minimum • Factor all UI-agnostic functionality into services • You need to know JavaScript (and other libraries) very well

  10. Is JavaScript ready for mainstream usage? • Performance? • Browser compatibility? • Community? • Esoteric language?

  11. The JavaScript language can be pretty hostile

  12. Strict mode to the rescue!

  13. ES5 Strict Mode demo

  14. What kind of scenarios can JavaScript enable? • Multimedia (audio/video) • Graphics (animation, image manipulation) • Geolocation • Storage (key-value pair, “relational” store) • Bi-directional server communication • Background processes • File access (drag-and-drop) • Much more…

  15. Media is core to the modern web experience

  16. Multimedia demo

  17. Since we’re developing for the client, we need to save some state somewhere…

  18. Web Storage • Key-value store • Values must be strings • JSON.stringify is your friend • ~5mb+ storage (cookies are ~4kb) • Application and session scope

  19. Web Storage demo

  20. Location awareness has become a key ingredient to nearly every major web property

  21. Geolocation demo

  22. Prettier software tends to be more successful in the consumer space

  23. Casual games are making a boatload of cash these days

  24. Canvas • 2D/3D Graphic space • Can render… • Shapes (paths, rectangles) • Images • Text • Supports transformations • Etc.

  25. <canvas> demo

  26. Summary • HTML5 is an emerging approach to building applications with broad reach • JavaScript is a powerful language that is greatly simplifying its esoteric nature and is gaining a ton of new APIs • HTML5 may not be approachable enough for you today, but it’s getting there very quickly

  27. Web Track Resources • http://www.asp.net/ • http://www.silverlight.net/ • http://www.microsoft.com/web/gallery/ • http://www.iis.net/ • http://weblogs.asp.net/Scottgu/ • http://www.hanselman.com/blog/

  28. Resources • Connect. Share. Discuss. http://northamerica.msteched.com Learning • Sessions On-Demand & Community • Microsoft Certification & Training Resources www.microsoft.com/teched www.microsoft.com/learning • Resources for IT Professionals • Resources for Developers • http://microsoft.com/technet • http://microsoft.com/msdn

  29. Complete an evaluation on CommNet and enter to win!

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

More Related