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
Google Wavewave.google.com
Helps users communicate and collaborate on the web
A "wave" is equal parts conversation and document
Users can instantly communicate and work together
Richly formatted text, photos, videos, maps, and more
Google Wave is also a platform
Rich set of open APIs that allow developers to:
Embed waves in other web services
Build extensions that work inside waves
Google Wave client
Google Wave API
Extensions
Robots to
automate common
tasks
Gadgets to
provide a new way
for users to interact
Embed: Make your
site more
collaborative by
dropping in a Wave
Robot
Gadget
Integrating Extensions Extensions allow easy access to robots and gadgets
Wave.google.com