HTML5: The Next Generation for Building Scalable Apps

HTML5
The Next Generation Technology for Building Scalable and
High Performance Web Applications

Robin Zimmermann, Product Manager, Kaazing
1

Thanks to our Sponsors:

Intuit
• Whether helping balance a checkbook, run a small
business, or pay income taxes, our innovative
solutions have simplified millions of people’s lives
Kaazing
• A high-performance Web platform that
enables full-duplex communication over
the Web
Copyright © 2010 - Kaazing Corporation. All rights reserved.
2

Agenda
• HTML5 current timeline
• Standards bodies and specifications
• HTML5 vision and design principals
• HTML5 features
o Markup
o APIs
o Communication
• Developing HTML5 applications
• Looking ahead

3

Verbatim
“The world is moving to HTML5”
—Steve Jobs, Apple
“The Web has not seen this level of
transformation, this level of acceleration,
in the past ten years… we're betting big on
HTML5”
—Vic Gundotra, VP of Engineering, Google
“In a nutshell, we love HTML5, we love it so much we want
it to actually work.
—Dean Hachamovitch, General Manager for Internet Explorer,
Microsoft
“I had no idea there was so much HTML5 already in play”
—Tim O’Reilly
4

HTML Timeline

5

HTML Timeline 2001-2011

6

HTML Timeline 2012-2022

7

Standards Bodies and
Specifications

8

HTML5 Standards Bodies
• Web Hypertext Application Technology Working
Group (WHATWG)
o Founded in 2004 (by individuals working for browser
vendors Apple, Mozilla, Google, and Opera)
o Develops HTML and APIs for web application
development
o Unofficial and open collaboration of browser vendors
and interested parties
• World Wide Web Consortium (W3C)
o Created draft of HTML5 in 2008
• Internet Engineering Task Force (IETF)
o Protocols (HTTP, WebSocket)
9

Specifications
• WHATWG
o http://www.whatwg.org/specs/web-apps/current-work/
• W3C
o http://dev.w3.org/html5/spec/Overview.html
• IETF (WebSocket specification)
o http://tools.ietf.org/html/draft-hixie-
thewebsocketprotocol

10

Is This HTML5?
• Many pieces of the HTML5 effort (for example,
Local Storage, WebSocket, and Geolocation)
were originally part of the HTML5 specification
• Moved to a separate standards document to
keep the specification focused
• Industry still refers to the original set of features,
including Web Sockets, as "HTML5“
• See:
http://www.whatwg.org/specs/web-apps/current-
work/multipage/introduction.html#is-this-html5?

11

HTML5 Vision and
Design Principals

12

Design Principal #1
Compatibility
• Pave the cow paths
• Degrade gracefully
• Research common
behavior; solve real
problems
• Support existing
content
• Evolution not revolution
• Don’t reinvent the wheel (or at least make a
better one!)
13

Design Principal #2
Utility
• Priority of Constituencies:
o When in doubt… value users over authors, over
implementers (browsers), over specifiers
(W3C/WHATWG), over theoretical purity.
• Secure by design
• DOM consistency
(HTML5 and XHTML5)
• Separation of
presentation and
content
14

Design Principal #3
Interoperability
• Specify well-defined behavior
o Specific instead of vague
• Handle errors well
o Improved and ambitious error
handling plans
o Prefer graceful error recovery to
hard failure
• Avoid needless complexity
o Simple is better

15

•
HTML4/XHTML
HTML 4.01 Strict
Simplified Doctype
• HTML 4.01 Transitional
• HTML 4.01 Frameset
• XHTML 1.0 Strict
• XHTML 1.0 Transitional
• XHTML 1.0 Frameset
• XHTML 1.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML5

<!DOCTYPE html>
16

Simplified Character Set
HTML4

<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />

HTML5

<meta charset="utf-8">

17

Design Principal #4
Universal Access
• Support for all world
languages
o For example, <ruby>
(Ruby annotations, used
in East Asian typography)
• Accessibility
o Support users with disabilities
o Web Accessibility Initiative (WAI) Accessible Rich
Internet Applications (ARIA)
o WAI-ARIA roles can be added today
o Supported by screen readers
18

Plugin-Free Paradigm
• HTML5 provides native support for many
features that were only possible with plugins
or complex hacks
o Plugins are proprietary
o Plugins might not be installed
o Plugins can be disabled or blocked
o Plugins are a separate attack vector
o Plugins are difficult to integrate with the rest of an
HTML document (plugin boundaries, clipping, and
transparency issues)

19

Flash and Silverlight?
• iOS does not support plugins at all, and other
mobile devices do not support them well
• Main differentiating features of Flash and
Silverlight being adopted by browsers
• The biggest gap remains in development tools

20

Anatomy of an
HTML5 Page

21

New HTML5
Tags
<article> <aside> <audio> <canvas>

<command> <datalist> <details> <dialog>

<embed> <figure> <footer> <header> <hgroup>

<keygen> <mark> <meter> <nav>

<output> <ruby> <rt> <rp> <section>

<source> <video>

22

Removed Tags in HTML5
<acronym>

<applet> <basefont>

<big> <dir> <font>

<center>
<s> <strike>

<frame> <u>
<frameset>

<noframes> <tt>

23

Differences in HTML5
• New elements
o Earlier slide
• Removed elements
o Earlier slide
• Changed elements
o <b>, <i>, <hr>, <strong>
• New attributes
o autofocus on <input>, <select>, <textarea>, <button>
o placeholder on <input>, <textarea>
o async on <script>
o draggable global attribute
24 Copyright © 2010 - Kaazing Corporation. All rights reserved.

Differences in HTML5
• Removed attributes
o name on <img>
o align on <img>, <p>, <table>, <tr>, <td>, and more
o background on <body>
o bgcolor, border on <table>
• Changed attributes
o border on <img>
o name on <a>

http://www.w3.org/TR/html5-diff

Anatomy of an HTML5 Page

26

Anatomy of an HTML5 Page


HTML5 APIs

28

HTML5 Forms

29

HTML5 Forms
• Formerly called Web Forms 2.0
• Native functionality (no scripting for validation)
means less coding, for example:
Regular expression for a valid e-mail address:
(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-
9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[x01-
x08x0bx0cx0e-x1fx21x23-x5bx5d-
x7f]|[x01-x09x0bx0cx0e-
x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-
9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-
9])?|[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-
9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-
9]?|[a-z0-9-]*[a-z0-9]:(?:[x01-
x08x0bx0cx0e-x1fx21-x5ax53-

x7f]|[x01-x09x0bx0cx0e-x7f])+)])
30

HTML5 Forms
• New form functionality:
o Date and color pickers
o Search, e-mail, web address input types
o Validation
o Spin boxes and Sliders
o Progress meter
o More
• Backward compatible
• Features degrade gracefully (unknown input
types are treated as text-type) input

31

Example HTML5 Forms

32

HTML5 Forms
• iPhone example


HTML5 Audio and Video

34

Audio and Video
• New HTML5 media elements
o <audio>
o <video>
• Control using Audio/Video API
• Native support in the browser (embedded
codecs)
• Originally, the HTML5 specification was going to
require codec support…

35

Demo


AV Containers and Codecs
• Audio and Video containers:
o MP4, Ogg, WebM
• Audio and video codecs (algorithms used to
encode and decode an audio or video stream):
o Audio: AAC, MP3, Vorbis
o Video: H.264, Theora, VP8
• Stalemate over patented/free codec inclusion
o Google released WebM royalty-free
• But you can add multiple formats per
(audio/video) element to fallback

37

Example:
YouTube HTML5 Channel

http://www.youtube.com/html5
38

HTML5
Canvas
&
SVG

39

About Canvas and SVG
• Previously possible with Flash, VML,
Silverlight
• Very complex to do in JavaScript without
plugins (for example, rounded corners or
diagonal lines)
• Provide native drawing functionality on the
Web
• Completely integrated into HTML5 documents
(part of DOM)
• Can be styled with CSS
• Can be controlled with JavaScript
40

Canvas vs. SVG
• Not a matter of good or bad
• Both can be used and they can also be
combined
Canvas SVG
Low level High level
Immediate mode Retained mode
Fixed size Scalable
Best for keyboard-based apps Best for mouse-based apps
Animation (no object storage) Medium animation
Pixels XML object model
No interaction User interaction (hit detection,
events on the tree)

41

Example: Canvas Animation

http://www.canvasdemos.com
42

SVG
• Modularized, XML-based language for describing
2D vector and mixed vector/raster graphics
• SVG has been around on the Web since 2002
(using plugins)
• SVG provides high fidelity graphics at any zoom
level
• Until now mostly used for static content (maps,
org charts, floor plans, etc.)
• HTML5 now allows native SVG content in the
browser (control with JavaScript, style with CSS)
43

SVG
• “Scalable” Vector
Graphics—not bitmaps

44

Example

<!DOCTYPE html>
<html>
<body>
<h1>SVG/HTML 5 Example</h1>
<svg>
<circle id="myCircle"
cx="100" cy="75" r="50"
fill="blue"
stroke="firebrick"
stroke-width="3" />
<text x="60" y="155">Hello World</text>
</svg>
</body>
</html>

Source: Google Code Blogspot

Example SVG Game

http://ie.microsoft.com/testdrive/Graphics/35SVG--oids/Default.xhtml
46

HTML5 WebSocket

47

HTTP Is Not Full Duplex


WebSocket
• Today’s Web applications demand reliable,
real-time communication with near-zero
latency, for example:
o Financial applications
o Social networking applications
o Online games
o Monitoring (power consumption, traffic, weather,
etc.)
• HTTP is not designed for this
• “Real-time” often achieved through complex
polling hacks (Comet)
49

WebSocket
• W3C API and IETF Protocol
• Full-duplex, single socket
• Enables web pages to communicate cross-
origin with a remote host
• Traverses firewalls, proxies, and routers
(unlike Flash)
• Share port with existing HTTP content (no
holes in the firewall needed)
• Low latency and enormous reduction in
unnecessary network traffic and latency (up to
1000:1) over Comet
50

Example: WebSocket-
Based Quake II Game Port

http://code.google.com/p/quake2-gwt-port
51

Beyond WebSockets
• Binary payloads
• Multiplexing
• Connection reuse
• Extend client-server protocols to the Web
• XMPP, Jabber
• Pub/Sub (Stomp/AMQP)
• Gaming protocols
• Any TCP-based protocol


HTML5 Web Workers

53

HTML5 Web Workers
• Without Web Workers:
o Long-running JavaScript tasks can block other
JavaScript on the page
o JavaScript can cause some browser UIs to hang

• With Web Workers:
o Background processing capabilities to web
applications can be added
o Parallel operations can run concurrently
54

Example


HTML5 Geolocation

56

Geolocation
• Allows users to share their location for
location-aware services
o Show user's position on map
o Tag content (photos/sound/video)
o Turn-by-turn navigation
o Alert users of nearby points of interest
o Social networking
• Users must be allowed to opt in to
location sharing

57

Example: Geolocation Demo

http://maps.google.com
58

HTML5 Web Storage

59

Web Storage
• Web Storage a.k.a “cookies on steroids”
• Three types:
1. Session Storage Area
2. Local Storage Area
3. Web SQL Database

Cookies Session Local SQL DB

Cookies vs. Web Storage
• Cookies are limited in size
• Cookies are transferred back and forth on
every request (bandwidth)
• Cookies are visible on the network (security)
• Data leaks (while switching tabs)
• Web Storage provides a simple API for storing
values in easily retrievable JavaScript objects
which persist across page loads

61

Example: Storage Demo

http://html5demos.com/storage
62

Offline Web Applications

63

Offline Web Applications
• Offline Web Applications
o HTML5 allows detection of online/offline mode
o Users can continue to interact with web
applications and documents when their network
connection is unavailable
• Use a cache manifest file with details about
files to be cached
o Even pages not already visited
• Browsers cache data is in the application
cache along with existing content, like images

64

Developing HTML5
Applications

65

HTML5 Application Assets
• Typical HTML5 Application
o HTML
o CSS
o JavaScript
o Images
o Manifest (for caching offline applications)

66

HTML5 Development Tools
• Currently limited HTML5 IDE support
• HTML5 simplicity reduces work compared to
HTML5
• Advanced browser development tools allow for
“semi-rapid” development and live coding
o Safari Web Inspector
o Chrome Developer console
o Firefox Firebug Add-on and Opera Firefly
• More IDE support as specification solidifies
• In the meantime, browser detection and feature
emulation is growing
67

HTML5 Helper Tools
• modernizr
o Small, simple JavaScript library that checks
support for HTML5 and CSS3 features
o Moves away from user-agent sniffing and uses
feature detection instead
o http://www.modernizr.com/
• html5shiv
o Creates the new HTML5 DOM elements in Internet
Explorer so that styles can be applied to them
o http://code.google.com/p/html5shiv/

68

HTML5 Feature Emulation
• Google Gears
• Flash plugins
• JavaScript-based emulations
• Exporercanvas—Canvas emulation for
Internet Explorer:
http://code.google.com/p/explorercanvas/
• SVG Web Toolkit—SVG in Internet Explorer:
http://code.google.com/p/svgweb/
• WebSocket emulation for HTML4 browsers:
Kaazing WebSocket Gateway
69
www.kaazing.com

What’s Next?

70

Microsoft IE and HTML5
• IE8 implementations for some parts of HTML5
• “Doubling down” in IE9 (9th time’s a charm)
o Audio
o Video
o SVG
o Canvas
o CSS3
o 2D Acceleration
o Does not run on XP
• IE9 now in public beta!
71

What’s Next?
• The Browser Renaissance
o 50% of browsers support now, will jump
significantly with IE9
o Performance competition
• Candidate Recommendation 2012
• Proposed Recommendation 2022
• There are already various features on the
roadmap that will not make it into HTML5
o device element for video conferencing
o ping attribute for server notifications
• Maybe just “HTML” (not version 6)
72

73

Resources
• “When Can I Use?” a website with up-to-date
HTML5 Feature support matrix:
http://a.deveria.com/caniuse
• WHATWG HTML5 Spec
o http://www.whatwg.org/specs/web-apps/current-work/
• W3C HTML5 Spec
o http://dev.w3.org/html5/spec/Overview.html

74

Rachel Appel, Developer Evangelist - Microsoft
Mike Taylor, Web Opener - Opera
James Ward, Technology Evangelist - Adobe
Dion Almaer & Ben Galbraith - HP/Palm
Jeffrey Hammond, Principal Analyst - Forrester
John Fallows & Jonas Jacobi - Kaazing

html5live.org

Contact Details:
• Robin Zimmermann
Product Management
Kaazing
robin.zimmermann@kaazing.com

• Siddharth Ram
Chief Architect
Intuit
Siddharth_Ram@intuit.com

76

Copyright © 2010 Kaazing Corporation, All rights reserved.
All materials, including labs and other handouts are property of Kaazing Corporation. Except when
expressly permitted by Kaazing Corporation, you may not copy, reproduce, publish, or display any
part of this training material, in any form, or by any means.

77

HTML5: The Next Generation for Building Scalable Apps

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Similar to HTML5: The Next Generation for Building Scalable Apps

Similar to HTML5: The Next Generation for Building Scalable Apps (20)

Recently uploaded

Recently uploaded (20)

HTML5: The Next Generation for Building Scalable Apps