HTML 5 andGoogle Chrome

Mihai IonescuDeveloper Advocate, Google

Browsers Started a Revolution that Continues

• In 1995 Netscape introduced JavaScript

• In 1999, Microsoft introduces XMLHTTP

• In 2002, Mozilla 1.0 includes XMLHttpRequest natively

... Then web applications started taking off ...

• In 2004, Gmail launches as a beta

• In 2005, AJAX takes off (e.g. Google Maps)

... Now web applications are demanding more capabilities

The Web is Developing Fast…U

ser E

xper

ienc

e

Native Web

HTMLDOM

CSS

XHR

1990 – 2008 Q109 Q209 Q309 Q409

The Web is Developing Fast…U

ser E

xper

ienc

e

Native Web

Safari 4.0: Jun 08, 2009

HTMLDOM

CSS

XHROpera Labs: Mar 26, 2009

Android 1.5: Apr 13, 2009

Firefox 3.5: June 30, 2009

Chrome 2.0: May 21, 2009

Chrome 3.0: Sep 15, 2009

iPhone 3.0: June 30, 2009

Android 2.0: Oct 26, 2009

Palm Pre: June 06, 2009

1990 – 2008 Q109 Q209 Q309 Q409

The web is also getting faster

00

20

40

60

80

100

120

140

160

Sun

Spi

der R

uns

Per

Min

ute

100x improvementin JavaScript performance

2001 2003 2005 2007 2008 2009

What New Capabilities do Webapps Need?

• Plugins currently address some needs, others are still not well addressed

– Playing video

– Webcam / microphone access

– Better file uploads

– Geolocation

– Offline abilities

– 3D

– Positional and multi-channel audio

– Drag and drop of content and files into and out of webapps

• Some of these capabilities are working their way through standards process

Our Goal• Empower web applications

– If a native app can do it, why can’t a webapp?– Can we build upon webapps strengths?

• Understand what new capabilities are needed– Talking to application developers (you!)– Figure out what native applications people run

• And what web applications serve similar purposes• And what native applications have no web equivalent

• Implement (we’re going full speed ahead...)– We prototyped in Gears– Now we’re implementing natively in Google Chrome

• Standardize

<canvas>• One of the first HTML5 additions to be implemented by

browsers – in Safari, then Firefox and Opera. (We got it for free in Google Chrome from WebKit).

• Provides a surface on which you can draw 2D images

• Talk of extending the model for 3D (more later)

// canvas is a reference to a <canvas> element var context = canvas.getContext('2d'); context.fillRect(0,0,50,50); canvas.setAttribute('width', '300'); // clears the canvas context.fillRect(0,100,50,50); canvas.width = canvas.width; // clears the canvas context.fillRect(100,0,50,50); // only this square remains

(reproduced from http://www.whatwg.org/specs/web-apps/current-work/#canvas with permission)

<canvas> Demo

<video> / <audio>• Allows a page to natively play video / audio

– No plugins required

– As simple as including an image - <audio src=“song.mp3”>

• Has built-in playback controls– Stop

– Pause

– Play

• Scriptable, in case you want your own dynamic control

• Implemented in WebKit / Chrome

<video> / < audio> Demo

Local Data Store• Provides a way to store data client side

• Useful for many classes of applications, especially in conjunction with offline capabilities

• 2 main APIs provided: a database API (exposing a SQLite database) and a structured storage api (key/value pairs)

• Implementation under way in Google Chrome, already working in WebKit. db.transaction(function(tx) { tx.executeSql('SELECT * FROM MyTable', [], function(tx, rs) { for (var i = 0; i < rs.rows.length; ++i) { var row = rs.rows.item(i); DoSomething(row['column']); } }); });

Local Storage Demo

Workers• Workers provide web apps with a means for concurrency

• Can offload heavy computation onto a separate thread so your app doesn’t block

• Come in 3 flavors:– Dedicated (think: bound to a single tab)

– Shared (shared among multiple windows in an origin)

– Persistent (run when the browser is “closed”)main.js: var worker = new Worker(‘extra_work.js'); worker.onmessage = function (event) { alert(event.data); };

extra_work.js: // do some work; when done post message. postMessage(some_data);

Workers Demo

Application Cache• Application cache solves the problem of how to make it such

that one can load an application URL while offline and it just “works”

• Web pages can provide a “manifest” of files that should be cached locally

• These pages can be accessed offline

• Enables web pages to work without the user being connected to the Internet

• Implemented in WebKit, implementation ongoing in Google Chrome

Web Sockets

var socket = new WebSocket(location);socket.onopen = function(event) { socket.postMessage(“Hello, WebSocket”);}socket.onmessage =function(event) { alert(event.data); }socket.onclose = function(event) { alert(“closed”); }

• Allows bi-directional communication between client and server in a cleaner, more efficient form than hanging gets (or a series of XMLHttpRequests)

• Intended to be as close as possible to just exposing raw TCP/IP to JavaScript given the constraints of the Web.

• Available in dev channel

Notifications• Alert() dialogs are annoying, modal, and not a great user

experience

• Provide a way to do less intrusive event notifications

• Work regardless of what tab / window has focus

• Provide more flexibility than an alert() dialog

• Prototype available in Webkit / Chrome

• Standardization discussions ongoing

var notify = window.webkitNotifications.createNotification( icon, title, text);notify.show();

notify.ondisplay = function() { alert(‘ondisplay’); };notify.onclose = function() { alert(‘onclose’); };

Notifications Demo

3D APIs• WebGL (Canvas 3D), developed by Mozilla, is a command-

mode API that allows developers to make OpenGL calls via JavaScript

• O3D is an effort by Google to develop a retain-mode API where developers can build up a scene graph and manipulate via JavaScript, also hardware accelerated

• Discussion on the web and in standards bodies to follow

WebGL Demo

Geolocation• Make JavaScript APIs from the client to figure out where you

are

• Location info from GPS, IP address, Bluetooth, cell towers

• Optionally share your location with trusted parties

• Watch the user’s position as it changes over time

• Implementation ongoing in Chrome

// Single position request.navigator.geolocation.getCurrentPosition(successCallback);

// Request position updates.navigator.geolocation.watchPosition(successCallback);

Geolocation Demo

And So Much More…• There’s much work ahead.

• Some is well defined– File API

– Forms2

– WebFont @font-face

• Many things less defined– P2p APIs

– Better drag + drop support

– Webcam / Microphone access

– O/S integration (protocol / file extension handlers and more)

– And more

Chrome HTML 5 in a Nutshell

Appcache, Notifications, Database, Local storage, in dev channel

Video, Audio, Workers available in Chrome 3.

Websockets in dev channel.

Additional APIs (TBD) to better support web applications

Q4 Q1 / 2010 Q2

More work -Geolocation, Web GL, File API

Q3

HTML 5 Native Support

Canvas

Video

….

Local storage

Web workers

HTML 5 Native Support

Canvas

Video

….

Local storage

Web workers

withChrome Frame

HTML 5 Resourceswww.whatwg.org/html5

www.chromium.org/developers/web-platform-status

blog.chromium.org

diveintohtml5.org

quirksmode.org

Q & A