0
A More Powerful Web,
Made Easier
Alejandro Villanueva
Developer Relations, Google

June 5, 2009
The Web Platform is Accelerating




                                                                                     ...
And It’s Solving Key Developer Challenges




                         Graphics     Location     Storage   Speed
User Expe...
More Developers

                                         chrome
                                         firefox 3.1+
Mon...
More Speed
SunSpider Runs Per Minute




                                          100x improvement
                      ...
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         ...
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

             ...
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
             ...
// 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 ca...
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 ca...
canvas   video   geolocation   app cache &   web workers
                                database
Life’s Better with Location
                                       2.8 mi

                                       Places

...
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 worker...
geolocation demos
HTML 5 Support

               Chrome   Firefox   Safari        Opera
      canvas



       video



 geolocation
       ...
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
       ...
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 brows...
// web workers
defines an API
for running
background
scripts
web workers demos
HTML5 Support

               Chrome   Firefox   Safari        Opera
      canvas



       video



 geolocation
        ...
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
Google Apps + your apps



                                       Your custom
  Our Google Apps                      appli...
Launched in the Last 12 Months




         X    memcache API
          X SSL support
          X   system status
        ...
• 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() {   ...
runAsync() Helps Apps Startup More Quickly
                                           1500
                               ...
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    ...
Low-Level API Access Serves Many Needs...




                                  Over 4B Google API
Daily API Hits (B)




...
...But Imagine AdSense for Everything Else




             Search               Spreadsheets




     Video            Ca...
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+ ...
code.google.com/android
Summary




81
Alejandro Villanueva - Google Inc.
Alejandro Villanueva - Google Inc.
Alejandro Villanueva - Google Inc.
Alejandro Villanueva - Google Inc.
Upcoming SlideShare
Loading in...5
×

Alejandro Villanueva - Google Inc.

3,645

Published on

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

Published in: Technology
2 Comments
2 Likes
Statistics
Notes
  • Hola a todos,

    Busco desarrolladores Android para proyecto en Santiago de Chile,

    Gracias,

    Julio Falcon - juliofalconl@gmail.com
    M: 6593 5533
    Of: 370 1599 / 369 0447
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Es una mentira, Chrome solo soporta geolocation con Gears instalado...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,645
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
61
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Alejandro Villanueva - Google Inc."

  1. 1. A More Powerful Web, Made Easier Alejandro Villanueva Developer Relations, Google June 5, 2009
  2. 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. 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. 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. 5. More Speed SunSpider Runs Per Minute 100x improvement in JavaScript performance 5 2001 2003 2005 2007 Q108 Q208 Q308 Q408 Q109
  6. 6. More Users OSS Browser Users (M) 2005 2006 2007 2008 2009
  7. 7. A More Powerful Web
  8. 8. Cautionary Tales of Latent Lemonade AJAX (2004) xml (1998) css xhr (1996) (1999)
  9. 9. HTML 5: A Chance to Do Things Differently
  10. 10. canvas video geolocation app cache & web workers database
  11. 11. Until Recently, You Couldn’t Draw on the Web 0 0 X y x height Y width
  12. 12. And Graphics Weren’t Very Interactive javascript:onClick(Draw());
  13. 13. The Usual Options Do This... Silverlight VML Flash
  14. 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. 15. // canvas defines drawing and animation APIs with pixel- level control
  16. 16. canvas demos
  17. 17. canvas Piggybacks Overall Browser Speed SunSpider Runs Per Minute
  18. 18. Is the Web Ready for 3D? 18
  19. 19. code.google.com/apis/o3d
  20. 20. HTML 5 Support Chrome Firefox Safari Opera canvas video geolocation app cache database workers
  21. 21. canvas video geolocation app cache & web workers database
  22. 22. Video is Complicated, and Outside Your Control
  23. 23. So What Would Occam Do? © topatoco.com
  24. 24. // HTML 5 makes <video> as easy as <img>
  25. 25. <video> demos
  26. 26. HTML 5 Support Chrome Firefox Safari Opera canvas video geolocation app cache database workers
  27. 27. canvas video geolocation app cache & web workers database
  28. 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. 29. But GPS and IP Aren’t Good Enough 1. too slow 2. too constrained 3. too fuzzy
  30. 30. 1) Cell ID and WiFi Solve The Data Problem...
  31. 31. 2) ...And Browsers Are Now Location-Enabled
  32. 32. // the geolocation api brings browser- based location to your apps
  33. 33. canvas video geolocation app cache and database web workers for more info: http://bit.ly/ff35dev
  34. 34. geolocation demos
  35. 35. HTML 5 Support Chrome Firefox Safari Opera canvas video geolocation (iPhone) app cache database workers
  36. 36. canvas video geolocation app cache & web workers database
  37. 37. Web Apps Need to Work Everywhere 39
  38. 38. // database and app cache store user data and app resources locally
  39. 39. app cache & database demos
  40. 40. HTML 5 Support Chrome Firefox Safari Opera canvas video geolocation (iPhone) app cache (mobile) database (mobile) workers
  41. 41. canvas video geolocation app cache & web workers database
  42. 42. A More Powerful Web == More Powerful Apps
  43. 43. 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
  44. 44. // web workers defines an API for running background scripts
  45. 45. web workers demos
  46. 46. HTML5 Support Chrome Firefox Safari Opera canvas video geolocation (iPhone) app cache (mobile) database (mobile) workers (mobile)
  47. 47. A More Powerful Web, Made Easier 49
  48. 48. App Engine and Google Web Toolkit (GWT) Easier to Scale and Optimize Your App
  49. 49. 200,000+ Developers 51
  50. 50. Google Apps + your apps Your custom Our Google Apps applications Google's scalable serving architecture
  51. 51. 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
  52. 52. • Background processing • Large object store • Database export • XMPP • Incoming email
  53. 53. 56
  54. 54. Announcing: Open Java Signups
  55. 55. Google Plugin for Eclipse
  56. 56. Secure Data Connector (SDC)
  57. 57. Secure Data Connector and 50+ more...
  58. 58. Your application's health
  59. 59. GWT Browser-Proofs Your JavaScript Code...
  60. 60. ...But CSS Headaches Persist
  61. 61. Coming in GWT 2.0: In-Browser Debugging
  62. 62. GWT Debugging in the browser
  63. 63. Rich Applications, Extra-Large Codebases
  64. 64. LOADING 67
  65. 65. Manual Code Splitting: Not For the Faint of Heart
  66. 66. 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 } });}
  67. 67. 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
  68. 68. All together
  69. 69. code.google.com/appengine code.google.com/gwt
  70. 70. 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
  71. 71. 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
  72. 72. ...But Imagine AdSense for Everything Else Search Spreadsheets Video Calendars Maps 75
  73. 73. Announcing: Google Web Elements Copy and Paste Website Content 76
  74. 74. Google Web Elements demo
  75. 75. google.com/webelements
  76. 76. 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
  77. 77. code.google.com/android
  78. 78. Summary 81
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×