Jonathan Carter joncartmicrosoftcom wwwlostintangentcom 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 ID: 590832
Download Presentation The PPT/PDF document "Using JavaScript to Build HTML5 Applicat..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Using JavaScript to Build HTML5 Applications
Jonathan Carter
joncart@microsoft.com
www.lostintangent.com
@lostintangentSlide2
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?Slide3
HTML, CSS and JavaScript have been around forever
….Slide4
They have been great for building web sites
….Slide5
But they’ve required lots of hacks to do complex things
….Slide6
“
HTML5”
strives to make
them
usable for building real applicationsSlide7
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)Slide8
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 reasonSlide9
What are some development considerations?
It’s a progressively usable set of
technologies
Use what browsers support
Get familiar with features that are comingHTML5 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 wellSlide10
Is JavaScript ready for mainstream usage?
Performance?
Browser compatibility?
Community?
Esoteric language?Slide11
The JavaScript
language can be pretty hostileSlide12
Strict mode to the rescue!Slide13
demoES5 Strict ModeSlide14
What kind of scenarios can JavaScript enable?
Multimedia (audio/video)
Graphics (animation, image manipulation)
Geolocation
Storage (key-value pair, “relational” store)Bi-directional server communicationBackground processes
File access (drag-and-drop)
Much more…Slide15
Media is core to the modern web experienceSlide16
demoMultimediaSlide17
Since we’re developing for the client, we need to save some state somewhere…Slide18
Web Storage
Key-value store
Values must be strings
JSON.stringify
is your friend~5mb+ storage (cookies are ~4kb)Application and session scopeSlide19
demoWeb StorageSlide20
Location awareness has become a key ingredient to nearly every major web propertySlide21
demoGeolocationSlide22
Prettier software tends to be more successful in the consumer spaceSlide23
Casual games are making a boatload of cash these daysSlide24
Canvas
2D/3D Graphic space
Can render…
Shapes (paths, rectangles)
ImagesTextSupports transformationsEtc.Slide25
demo
<canvas>Slide26
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 quicklySlide27
Web Track Resourceshttp://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/
Slide28
Resources
www.microsoft.com/teched
Sessions On-Demand & Community
Microsoft Certification & Training Resources
Resources for IT Professionals
Resources for Developers
www.microsoft.com/learning
http://microsoft.com/technet
http://microsoft.com/msdn
Learning
http://northamerica.msteched.com
Connect. Share. Discuss.Slide29
Complete an evaluation on
CommNet
and
enter to win!Slide30Slide31
©
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.Slide32