A More Powerful Web, Made Easier

Alejandro VillanuevaDeveloper Relations, Google

June 5, 2009

The Web Platform is AcceleratingU

ser

Experience

native web

1990 -- 2008 Q408 Q109 Q209 ...

iPhone 2.2:

Nov 22, 2008canvas

app cache

database

Safari 4.0b:

Feb 29, 2009canvas

video

app cache

database

workersHTML

DOM

CSS

XHR

Opera Labs:

Mar 26, 2009canvas

video

geolocation

Android 1.5:

Apr 13, 2009canvas

geolocation

app cache

database

workers

Firefox 3.5b4:

Apr 27, 2009canvas

video

geolocation

app cache

database

workers

Chrome 2.0:

May 21, 2009canvas

video

geolocation

app cache

database

workers

And It’s Solving Key Developer ChallengesU

ser

Experience

native web

HTML

DOM

CSS

XHR

SpeedLocationGraphics Storage

1990 -- 2008 Q408 Q109 Q209 ...

4

More DevelopersM

onth

ly C

ontr

ibuto

rs t

o O

SS

Bro

wsers

2002 2003 2004 2005 2006 2007 2008 2009

webkit

firefox 2.0-3.0

firefox 3.1+

chrome

5

More SpeedS

unS

pid

er

Runs P

er

Min

ute

2001 2003 2005 2007 Q108 Q208 Q308 Q408 Q109

100x improvement

in JavaScript performance

More UsersO

SS

Bro

wser

Users

(M

)

2005 2006 2007 2008 2009

A More Powerful Web

Cautionary Tales of Latent Lemonade

xhr

(1999)

xml (1998)

css

(1996)

AJAX (2004)

HTML 5: A Chance to Do Things Differently

canvas video geolocation app cache &

database

web workers

0

0

width

heig

ht

Y

x

y

X

Until Recently, You Couldn’t Draw on the Web

And Graphics Weren’t Very Interactive

javascript:onClick(Draw());

The Usual Options Do This...

VMLFlash

Silverlight

... But canvas is Intrinsic to the WebT

ranspare

nt S

tack

DOM

Document Object Model (DOM) Specification

Original: http://www.w3.org/TR/REC-DOM-Level-1/

Latest: http://www.w3.org/TR/DOM-Level-3-Core/

Contributors: Netscape, Sun, Microsoft, W3C, IBM,

Novell, JavaSoft, SoftQuad Inc., Inso EPS, Texcel

Research, Arbortext

Hypertext Markup Language (HTML)

Original: http://tools.ietf.org/html/rfc1866

Latest: http://www.w3.org/TR/html5/

Contributors: T. Berners-Lee, D. Connolly, L. Masinter,

MIT, W3C, AT&T, IBM, Microsoft, Netscape, Novell,

SoftQuad, Spyglass, Adobe, Lotus, CWI, Reuters,

JavaSoft, HP, GRIF, Sun, Opera, Mozilla, Google, Apple

Hypertext Transfer Protocol (HTTP)

Original: http://tools.ietf.org/html/rfc1945

Latest: http://tools.ietf.org/html/rfc2616

Contributors: UC Urvine, Compaq, MIT, Xerox,

Microsoft, W3C, T. Berners-Lee, R. Fielding, J. Gettys, J.

Mogul, H. Frystyk, L. Masinter, P. Leach

HTTP

HTML

// canvas

defines drawing

and animation

APIs with pixel-

level control

canvas demos

SunS

pid

er

Runs P

er

Min

ute

canvas Piggybacks Overall Browser Speed

18

Is the Web Ready for 3D?

code.google.com/apis/o3d

Chrome Firefox Safari Opera

canvas

video

geolocation

app cache

database

workers

HTML 5 Support

videocanvas geolocation app cache &

database

web workers

Video is Complicated, and Outside Your Control

So What

Would

Occam Do?

© topatoco.com

// HTML 5 makes

<video> as easy

as <img>

<video> demos

Chrome Firefox Safari Opera

canvas

video

geolocation

app cache

database

workers

HTML 5 Support

geolocationcanvas video app cache &

database

web workers

28

Life’s Better with Location

CRMSocial Ads Games

Photos

75 ft

20 ft

500 ft

1.1 mi2.1 mi

Places

2.8 mi

But GPS and IP Aren’t Good Enough

1. too slow

2. too constrained

3. too fuzzy

1) Cell ID and WiFi Solve The Data Problem...

2) ...And Browsers Are Now Location-Enabled

// the

geolocation api

brings browser-

based location

to your apps

canvas

video

geolocation

app cache and database

web workers

for more info: http://bit.ly/ff35dev

geolocation demos

Chrome Firefox Safari Opera

canvas

video

geolocation

app cache

database

workers

HTML 5 Support

(iPhone)

app cache &

database

canvas video geolocation web workers

39

Web Apps Need to Work Everywhere

// database and

app cache store

user data and

app resources

locally

app cache & database demos

Chrome Firefox Safari Opera

canvas

video

geolocation

app cache

database

workers

HTML 5 Support

(mobile)

(mobile)

(iPhone)

web workerscanvas video geolocation app cache &

database

A More Powerful Web == More Powerful Apps

But More Power == More Responsibility

I will not hose the browser with JavaScript

I will not hose the browser with JavaScript

I will not hose the browser with JavaScript

I will not hose the browser with JavaScript

I will not hose the browser with JavaScript

I will not hose the browser with JavaScript

// web workers

defines an API

for running

background

scripts

web workers demos

Chrome Firefox Safari Opera

canvas

video

geolocation

app cache

database

workers

HTML5 Support

(iPhone)

(mobile)

(mobile)

(mobile)

49

A More Powerful Web, Made Easier

App Engine and Google Web Toolkit (GWT)Easier to Scale and Optimize Your App

51

200,000+ Developers

Google Apps + your apps

Your custom applicationsOur Google Apps

Google's scalable serving architecture

Launched in the Last 12 Months

memcache API

SSL support

system status

paid quota

cron support

database import

java runtime

X

X

X

X

X

X

X

• Background processing

• Large object store

• Database export

• XMPP

• Incoming email

56

Announcing: Open Java Signups

Google Plugin for Eclipse

Secure Data Connector (SDC)

Secure Data Connector

and 50+ more...

Your application's health

GWT Browser-Proofs Your JavaScript Code...

...But CSS Headaches Persist

Coming in GWT 2.0: In-Browser Debugging

GWT Debugging in the browser

Rich Applications, Extra-Large Codebases

67

LOADING

Manual Code Splitting: Not For the Faint of Heart

Coming in GWT 2.0: runAsync()

// example

public void onMySettingsLinkClicked() {

GWT.runAsync(new RunAsyncCallback() { public

void onSuccess() { new

MySettingsDialog().show(); } public void

onFailure(Throwable ohNoes) { // indicate

that something went wrong, // usually a

connectivity or server

problem } });}

runAsync() Helps Apps Startup More Quickly

26-Nov 29-Apr 18-Jun 28-Jul 12-Sep 27-Oct 24-Dec 16-Mar

Siz

e o

f In

itia

l JavaS

cript D

ow

nlo

ad (

KB

)

375

750

1125

1500

0

7x Decrease In

Initial Download Size

with runAsync()

1400 KB

200 KB

All together

code.google.com/appengine

code.google.com/gwt

Google Product APIsEasier to Add Content and Services To Your Website

Search Feeds Translation Calendar

Maps Charts Contacts Documents

Comments

AuthPhotos

NewsVideo

Spreadsheets

74

Low-Level API Access Serves Many Needs...D

aily

AP

I H

its (

B)

May Jun Jul Aug Sept Oct Nov Dec Jan Feb Mar Apr May

Over 4B Google API

Hits Every Day

75

...But Imagine AdSense for Everything Else

Maps

SpreadsheetsSearch

Video Calendars

76

Announcing: Google Web ElementsCopy and Paste Website Content

Google Web Elements demo

google.com/webelements

79

Android: Seven Months, By The Numbers

• 10 carriers in 12 countries

• 4,900+ applications in the Android Market

• 40+ app downloads per user

• #2 in U.S. mobile web browsing

• 3 platform releases, and counting...

code.google.com/android

81

Summary