Download - Google - Charla para CTOs
![Page 1: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/1.jpg)
A More Powerful Web, Made Easier
Alejandro VillanuevaDeveloper Relations, Google
June 5, 2009
![Page 2: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/2.jpg)
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
![Page 3: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/3.jpg)
And It’s Solving Key Developer ChallengesU
ser
Experience
native web
HTML
DOM
CSS
XHR
SpeedLocationGraphics Storage
1990 -- 2008 Q408 Q109 Q209 ...
![Page 4: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/4.jpg)
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
![Page 5: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/5.jpg)
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
![Page 6: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/6.jpg)
More UsersO
SS
Bro
wser
Users
(M
)
2005 2006 2007 2008 2009
![Page 7: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/7.jpg)
A More Powerful Web
![Page 8: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/8.jpg)
Cautionary Tales of Latent Lemonade
xhr
(1999)
xml (1998)
css
(1996)
AJAX (2004)
![Page 9: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/9.jpg)
HTML 5: A Chance to Do Things Differently
![Page 10: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/10.jpg)
canvas video geolocation app cache &
database
web workers
![Page 11: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/11.jpg)
0
0
width
heig
ht
Y
x
y
X
Until Recently, You Couldn’t Draw on the Web
![Page 12: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/12.jpg)
And Graphics Weren’t Very Interactive
javascript:onClick(Draw());
![Page 13: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/13.jpg)
The Usual Options Do This...
VMLFlash
Silverlight
![Page 14: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/14.jpg)
... 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
![Page 15: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/15.jpg)
// canvas
defines drawing
and animation
APIs with pixel-
level control
![Page 16: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/16.jpg)
canvas demos
![Page 17: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/17.jpg)
SunS
pid
er
Runs P
er
Min
ute
canvas Piggybacks Overall Browser Speed
![Page 18: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/18.jpg)
18
Is the Web Ready for 3D?
![Page 19: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/19.jpg)
code.google.com/apis/o3d
![Page 20: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/20.jpg)
Chrome Firefox Safari Opera
canvas
video
geolocation
app cache
database
workers
HTML 5 Support
![Page 21: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/21.jpg)
videocanvas geolocation app cache &
database
web workers
![Page 22: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/22.jpg)
Video is Complicated, and Outside Your Control
![Page 23: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/23.jpg)
So What
Would
Occam Do?
© topatoco.com
![Page 24: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/24.jpg)
// HTML 5 makes
<video> as easy
as <img>
![Page 25: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/25.jpg)
<video> demos
![Page 26: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/26.jpg)
Chrome Firefox Safari Opera
canvas
video
geolocation
app cache
database
workers
HTML 5 Support
![Page 27: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/27.jpg)
geolocationcanvas video app cache &
database
web workers
![Page 28: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/28.jpg)
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
![Page 29: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/29.jpg)
But GPS and IP Aren’t Good Enough
1. too slow
2. too constrained
3. too fuzzy
![Page 30: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/30.jpg)
1) Cell ID and WiFi Solve The Data Problem...
![Page 31: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/31.jpg)
![Page 32: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/32.jpg)
2) ...And Browsers Are Now Location-Enabled
![Page 33: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/33.jpg)
// the
geolocation api
brings browser-
based location
to your apps
![Page 34: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/34.jpg)
![Page 35: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/35.jpg)
canvas
video
geolocation
app cache and database
web workers
for more info: http://bit.ly/ff35dev
![Page 36: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/36.jpg)
geolocation demos
![Page 37: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/37.jpg)
Chrome Firefox Safari Opera
canvas
video
geolocation
app cache
database
workers
HTML 5 Support
(iPhone)
![Page 38: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/38.jpg)
app cache &
database
canvas video geolocation web workers
![Page 39: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/39.jpg)
39
Web Apps Need to Work Everywhere
![Page 40: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/40.jpg)
// database and
app cache store
user data and
app resources
locally
![Page 41: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/41.jpg)
app cache & database demos
![Page 42: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/42.jpg)
Chrome Firefox Safari Opera
canvas
video
geolocation
app cache
database
workers
HTML 5 Support
(mobile)
(mobile)
(iPhone)
![Page 43: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/43.jpg)
web workerscanvas video geolocation app cache &
database
![Page 44: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/44.jpg)
A More Powerful Web == More Powerful Apps
![Page 45: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/45.jpg)
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
![Page 46: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/46.jpg)
// web workers
defines an API
for running
background
scripts
![Page 47: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/47.jpg)
web workers demos
![Page 48: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/48.jpg)
Chrome Firefox Safari Opera
canvas
video
geolocation
app cache
database
workers
HTML5 Support
(iPhone)
(mobile)
(mobile)
(mobile)
![Page 49: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/49.jpg)
49
A More Powerful Web, Made Easier
![Page 50: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/50.jpg)
App Engine and Google Web Toolkit (GWT)Easier to Scale and Optimize Your App
![Page 51: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/51.jpg)
51
200,000+ Developers
![Page 52: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/52.jpg)
![Page 53: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/53.jpg)
Google Apps + your apps
Your custom applicationsOur Google Apps
Google's scalable serving architecture
![Page 54: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/54.jpg)
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
![Page 55: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/55.jpg)
• Background processing
• Large object store
• Database export
• XMPP
• Incoming email
![Page 56: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/56.jpg)
56
![Page 57: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/57.jpg)
Announcing: Open Java Signups
![Page 58: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/58.jpg)
Google Plugin for Eclipse
![Page 59: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/59.jpg)
Secure Data Connector (SDC)
![Page 60: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/60.jpg)
Secure Data Connector
and 50+ more...
![Page 61: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/61.jpg)
Your application's health
![Page 62: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/62.jpg)
GWT Browser-Proofs Your JavaScript Code...
![Page 63: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/63.jpg)
...But CSS Headaches Persist
![Page 64: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/64.jpg)
Coming in GWT 2.0: In-Browser Debugging
![Page 65: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/65.jpg)
GWT Debugging in the browser
![Page 66: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/66.jpg)
Rich Applications, Extra-Large Codebases
![Page 67: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/67.jpg)
67
LOADING
![Page 68: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/68.jpg)
Manual Code Splitting: Not For the Faint of Heart
![Page 69: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/69.jpg)
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 } });}
![Page 70: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/70.jpg)
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
![Page 71: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/71.jpg)
All together
![Page 72: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/72.jpg)
code.google.com/appengine
code.google.com/gwt
![Page 73: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/73.jpg)
Google Product APIsEasier to Add Content and Services To Your Website
Search Feeds Translation Calendar
Maps Charts Contacts Documents
Comments
AuthPhotos
NewsVideo
Spreadsheets
![Page 74: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/74.jpg)
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
![Page 75: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/75.jpg)
75
...But Imagine AdSense for Everything Else
Maps
SpreadsheetsSearch
Video Calendars
![Page 76: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/76.jpg)
76
Announcing: Google Web ElementsCopy and Paste Website Content
![Page 77: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/77.jpg)
Google Web Elements demo
![Page 78: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/78.jpg)
google.com/webelements
![Page 79: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/79.jpg)
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...
![Page 80: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/80.jpg)
code.google.com/android
![Page 81: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/81.jpg)
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
![Page 82: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/82.jpg)
Google Wave client
![Page 83: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/83.jpg)
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
![Page 84: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/84.jpg)
Integrating Extensions Extensions allow easy access to robots and gadgets
![Page 85: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/85.jpg)
Wave.google.com
![Page 86: Google - Charla para CTOs](https://reader033.vdocument.in/reader033/viewer/2022051515/54c551d04a7959ea038b45c9/html5/thumbnails/86.jpg)