Presentación de Alejandro Villanueva Director de Relaciones con Desarrolladores para Latinoamérica de Google, primera charla de la conferencia WebConfLatino 2009.

1. A More Powerful Web,
Made Easier
Alejandro Villanueva
Developer Relations, Google
June 5, 2009

2. The Web Platform is Accelerating
Chrome 2.0:
May 21, 2009
canvas
User Experience
Firefox 3.5b4:
video
Apr 27, 2009
geolocation
canvas
app cache
video
database
geolocation
workers
app cache
Android 1.5: database
Apr 13, 2009 workers
canvas
Opera Labs: geolocation
Safari 4.0b: Mar 26, 2009 app cache
Feb 29, 2009 canvas database
canvas video workers
XHR iPhone 2.2: video geolocation
CSS Nov 22, 2008 app cache
DOM canvas database
HTML app cache workers
database
native web
1990 -- 2008 Q408 Q109 Q209 ...

3. And It’s Solving Key Developer Challenges
Graphics Location Storage Speed
User Experience
XHR
CSS
DOM
HTML
native web
1990 -- 2008 Q408 Q109 Q209 ...

4. More Developers
chrome
firefox 3.1+
Monthly Contributors to OSS Browsers
firefox 2.0-3.0
webkit
4 2002 2003 2004 2005 2006 2007 2008 2009

5. More Speed
SunSpider Runs Per Minute
100x improvement
in JavaScript performance
5 2001 2003 2005 2007 Q108 Q208 Q308 Q408 Q109

6. More Users
OSS Browser Users (M)
2005 2006 2007 2008 2009

7. A More Powerful Web

8. Cautionary Tales of Latent Lemonade
AJAX (2004)
xml (1998)
css xhr
(1996) (1999)

9. HTML 5: A Chance to Do Things Differently

10. canvas video geolocation app cache & web workers
database

11. Until Recently, You Couldn’t Draw on the Web
0
0 X
y
x
height
Y width

12. And Graphics Weren’t Very Interactive
javascript:onClick(Draw());

13. The Usual Options Do This...
Silverlight
VML
Flash

14. ... But canvas is Intrinsic to the Web
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,
DOM Novell, JavaSoft, SoftQuad Inc., Inso EPS, Texcel
Research, Arbortext
Transparent Stack
Hypertext Markup Language (HTML)
Original: http://tools.ietf.org/html/rfc1866
Latest: http://www.w3.org/TR/html5/
HTML 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,
HTTP Microsoft, W3C, T. Berners-Lee, R. Fielding, J. Gettys, J.
Mogul, H. Frystyk, L. Masinter, P. Leach

15. // canvas
defines drawing
and animation
APIs with pixel-
level control

16. canvas demos

17. canvas Piggybacks Overall Browser Speed
SunSpider Runs Per Minute

18. Is the Web Ready for 3D?
18

19. code.google.com/apis/o3d

20. HTML 5 Support
Chrome Firefox Safari Opera
canvas
video
geolocation
app cache
database
workers

21. canvas video geolocation app cache & web workers
database

22. Video is Complicated, and Outside Your Control

23. So What
Would
Occam Do?
© topatoco.com

24. // HTML 5 makes
<video> as easy
as <img>

25. <video> demos

26. HTML 5 Support
Chrome Firefox Safari Opera
canvas
video
geolocation
app cache
database
workers

27. canvas video geolocation app cache & web workers
database

28. Life’s Better with Location
2.8 mi
Places
Social Ads Games
CRM Photos
2.1 mi
1.1 mi
500 ft
20 ft
28 75 ft

29. But GPS and IP Aren’t Good Enough
1. too slow
2. too constrained
3. too fuzzy

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

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

33. // the
geolocation api
brings browser-
based location
to your apps

35. canvas
video
geolocation
app cache and database
web workers
for more info: http://bit.ly/ff35dev

36. geolocation demos

37. HTML 5 Support
Chrome Firefox Safari Opera
canvas
video
geolocation
(iPhone)
app cache
database
workers

38. canvas video geolocation app cache & web workers
database

39. Web Apps Need to Work Everywhere
39

40. // database and
app cache store
user data and
app resources
locally

41. app cache & database demos

42. HTML 5 Support
Chrome Firefox Safari Opera
canvas
video
geolocation
(iPhone)
app cache
(mobile)
database
(mobile)
workers

43. canvas video geolocation app cache & web workers
database

44. A More Powerful Web == More Powerful Apps

45. 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

46. // web workers
defines an API
for running
background
scripts

47. web workers demos

48. HTML5 Support
Chrome Firefox Safari Opera
canvas
video
geolocation
(iPhone)
app cache
(mobile)
database
(mobile)
workers
(mobile)

49. A More Powerful Web, Made Easier
49

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

51. 200,000+
Developers
51

53. Google Apps + your apps
Your custom
Our Google Apps applications
Google's scalable serving architecture

54. Launched in the Last 12 Months
X memcache API
X SSL support
X system status
X paid quota
X cron support
X database import
X java runtime

55. • Background processing
• Large object store
• Database export
• XMPP
• Incoming email

56. 56

57. Announcing: Open Java Signups

58. Google Plugin for Eclipse

59. Secure Data Connector (SDC)

60. Secure Data Connector
and 50+ more...

61. Your application's health

62. GWT Browser-Proofs Your JavaScript Code...

63. ...But CSS Headaches Persist

64. Coming in GWT 2.0: In-Browser Debugging

65. GWT Debugging in the browser

66. Rich Applications, Extra-Large Codebases

67. LOADING
67

68. Manual Code Splitting: Not For the Faint of Heart

69. 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 } });}

70. runAsync() Helps Apps Startup More Quickly
1500
1400 KB
Size of Initial JavaScript Download (KB)
1125
750
7x Decrease In
Initial Download Size
with runAsync()
375
200 KB
0
26-Nov 29-Apr 18-Jun 28-Jul 12-Sep 27-Oct 24-Dec 16-Mar

71. All together

72. code.google.com/appengine
code.google.com/gwt

73. Google Product APIs
Easier to Add Content and Services To Your Website
Search Feeds Translation Calendar Video Comments News
Maps Charts Contacts Spreadsheets Photos Documents Auth

74. Low-Level API Access Serves Many Needs...
Over 4B Google API
Daily API Hits (B)
Hits Every Day
74 May Jun Jul Aug Sept Oct Nov Dec Jan Feb Mar Apr May

75. ...But Imagine AdSense for Everything Else
Search Spreadsheets
Video Calendars Maps
75

76. Announcing: Google Web Elements
Copy and Paste Website Content
76

77. Google Web Elements demo

78. 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...
79

80. code.google.com/android

81. Summary
81