1. Using JavaScript to Build HTML5 Applications
11/8/2018 3:05 AM
Using JavaScript to Build HTML5 Applications
Jonathan Carter
@lostintangent
© 2007 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.

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… Supports transformations Etc.
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/

28. Resources Learning http://northamerica.msteched.com
Tech Ed North America 2010
11/8/2018 3:05 AM
Resources
Connect. Share. Discuss.
Learning
Sessions On-Demand & Community
Microsoft Certification & Training Resources
Resources for IT Professionals
Resources for Developers
© 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.

29. Complete an evaluation on CommNet and enter to win!
Tech Ed North America 2010
11/8/2018 3:05 AM
Complete an evaluation on CommNet and enter to win!
© 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.

30. Tech Ed North America 2010 11/8/2018 3:05 AM
© 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.

31. 11/8/2018 3:05 AM
© 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.
© 2009 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.