SlideShare a Scribd company logo

Alejandro Villanueva - Google Inc.

•
•
Alejandro Corpeño
Alejandro Corpeño

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

1 of 82
Download to read offline
A More Powerful Web, Made Easier Alejandro Villanueva Developer Relations, Google June 5, 2009
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 ...
And It’s Solving Key Developer Challenges Graphics Location Storage Speed User Experience XHR CSS DOM HTML native web 1990 -- 2008 Q408 Q109 Q209 ...
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
More Speed SunSpider Runs Per Minute 100x improvement in JavaScript performance 5 2001 2003 2005 2007 Q108 Q208 Q308 Q408 Q109
More Users OSS Browser Users (M) 2005 2006 2007 2008 2009
A More Powerful Web
Cautionary Tales of Latent Lemonade AJAX (2004) xml (1998) css xhr (1996) (1999)
HTML 5: A Chance to Do Things Differently
canvas video geolocation app cache & web workers database
Until Recently, You Couldn’t Draw on the Web 0 0 X y x height Y width
And Graphics Weren’t Very Interactive javascript:onClick(Draw());
The Usual Options Do This... Silverlight VML Flash
... 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
// canvas defines drawing and animation APIs with pixel- level control
canvas demos
canvas Piggybacks Overall Browser Speed SunSpider Runs Per Minute
Is the Web Ready for 3D? 18
code.google.com/apis/o3d
HTML 5 Support Chrome Firefox Safari Opera canvas video geolocation app cache database workers
canvas video geolocation app cache & web workers database
Video is Complicated, and Outside Your Control
So What Would Occam Do? © topatoco.com
// HTML 5 makes <video> as easy as <img>
<video> demos
HTML 5 Support Chrome Firefox Safari Opera canvas video geolocation app cache database workers
canvas video geolocation app cache & web workers database
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
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...
Alejandro Villanueva - Google Inc.
2) ...And Browsers Are Now Location-Enabled
// the geolocation api brings browser- based location to your apps
Alejandro Villanueva - Google Inc.
canvas video geolocation app cache and database web workers for more info: http://bit.ly/ff35dev
geolocation demos
HTML 5 Support Chrome Firefox Safari Opera canvas video geolocation (iPhone) app cache database workers
canvas video geolocation app cache & web workers database
Web Apps Need to Work Everywhere 39
// database and app cache store user data and app resources locally
app cache & database demos
HTML 5 Support Chrome Firefox Safari Opera canvas video geolocation (iPhone) app cache (mobile) database (mobile) workers
canvas video geolocation app cache & web workers 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
HTML5 Support Chrome Firefox Safari Opera canvas video geolocation (iPhone) app cache (mobile) database (mobile) workers (mobile)
A More Powerful Web, Made Easier 49
App Engine and Google Web Toolkit (GWT) Easier to Scale and Optimize Your App
200,000+ Developers 51
Alejandro Villanueva - Google Inc.
Google Apps + your apps Your custom Our Google Apps applications Google's scalable serving architecture
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
• 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
LOADING 67
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 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
All together
code.google.com/appengine code.google.com/gwt
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
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
...But Imagine AdSense for Everything Else Search Spreadsheets Video Calendars Maps 75
Announcing: Google Web Elements Copy and Paste Website Content 76
Google Web Elements demo
google.com/webelements
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
code.google.com/android
Summary 81
Alejandro Villanueva - Google Inc.

More Related Content

Alejandro Villanueva - Google Inc.

  • 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
  • 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
  • 17. canvas Piggybacks Overall Browser Speed SunSpider Runs Per Minute
  • 18. Is the Web Ready for 3D? 18
  • 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>
  • 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
  • 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
  • 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
  • 58. Google Plugin for Eclipse
  • 60. Secure Data Connector and 50+ more...
  • 62. GWT Browser-Proofs Your JavaScript Code...
  • 64. Coming in GWT 2.0: In-Browser Debugging
  • 65. GWT Debugging in the browser
  • 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
  • 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
  • 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