Browser, Mobile, Cloud, Social, Geo
               Portrait of the developer as a kid in a candy store




         Patric...
The Web Platform is Accelerating




                                                                                     ...
And It’s Solving Key Developer Challenges




                                        Graphics   Location     Storage   Sp...
More Developers
                                                    300
                                                  ...
More Speed
                                         80
             SunSpider Runs Per Minute




                        ...
More Users
                                     450




                                     350
             OSS Browser ...
A More Powerful Web




                           5>2
Friday, October 16, 2009
Cautionary Tales of Latent Lemonade




                                             AJAX (2004)

                        ...
HTML 5: A Chance to Do Things Differently




Friday, October 16, 2009
canvas        video   geolocation   app cache &   web workers
                                                  database

...
Until Recently, You Couldn’t Draw on the Web

                                0
                            0             ...
And Graphics Weren’t Very Interactive




                           javascript:onClick(Draw());


Friday, October 16, 2009
The Usual Options Do This...
                                            Silverlight
                           VML
      ...
... But canvas is Intrinsic to the Web

                                        Document Object Model (DOM) Specification
...
// canvas
               defines drawing
               and animation
               APIs with pixel-
               level...
canvas demos




Friday, October 16, 2009
canvas Piggybacks Overall Browser Speed




                                                           SunSpider Runs Per ...
Is the Web Ready for 3D?




Friday, October 16, 2009
Canvas3D, WebGL
                           O3D code.google.com/apis/o3d




Friday, October 16, 2009
HTML 5 Support

                                     Chrome   Firefox   Safari   Opera
                            canvas
...
canvas       video   geolocation   app cache &   web workers
                                                  database

F...
Video is Complicated, and Outside Your Control




Friday, October 16, 2009
So What
                           Would
                           Occam Do?

        © topatoco.com


Friday, October 16...
// HTML 5 makes
               <video> as easy
               as <img>



Friday, October 16, 2009
<video> demos




Friday, October 16, 2009
HTML 5 Support

                                     Chrome   Firefox   Safari   Opera
                            canvas
...
canvas       video   geolocation   app cache &   web workers
                                                  database

F...
Life’s Better with Location
                                                     2.8 mi

                                 ...
But GPS and IP Aren’t Good Enough




                           1. too slow
                           2. too constrained...
1) Cell ID and WiFi Solve The Data Problem...




Friday, October 16, 2009
Friday, October 16, 2009
2) ...And Browsers Are Now Location-Enabled




Friday, October 16, 2009
// the
               geolocation api
               brings browser-
               based location
               to your ...
geolocation demos




Friday, October 16, 2009
HTML 5 Support

                                     Chrome   Firefox   Safari        Opera
                            ca...
canvas       video   geolocation   app cache &   web workers
                                                  database

F...
Web Apps Need to Work Everywhere




Friday, October 16, 2009
// database and
               app cache store
               user data and
               app resources
               lo...
app cache & database demos




Friday, October 16, 2009
Friday, October 16, 2009
index.html
                                         <title>Google Maps</title>
                           Google Maps
    ...
webOS and HTML 5

                 • CSS Transformations
                 • HTML 5 database for history & bookmarks
      ...
webOS Accelerometer API

                 • Shake: distinct start, stop with magnitude
                 • Orientation
    ...
Code Snippet
               <script type="text/javascript">
                 // Set up accelerometer event handlers
      ...
webOS and HTML 5
                           Converge mobile and desktop
                           web application develop...
HTML 5 Support

                                     Chrome   Firefox   Safari        Opera
                            ca...
canvas       video   geolocation   app cache &   web workers
                                                  database

F...
A More Powerful Web == More Powerful Apps




Friday, October 16, 2009
But More Power == More Responsibility


                           I will not hose the browser with JavaScript

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

...
web workers demos




Friday, October 16, 2009
HTML5 Support

                                     Chrome   Firefox   Safari        Opera
                            can...
HTML5 and SVG not available in IE?
             • ChromeFrame plugin implements HTML5 in IE
             • Shim libraries ...
A More Powerful Web, Made Easier




Friday, October 16, 2009
App Engine and Google Web Toolkit (GWT)
             Easier to Scale and Optimize Your App




Friday, October 16, 2009
200,000+
                      Developers
Friday, October 16, 2009
80,000+ Applications
                                                       700
                                          ...
Launched in the Last 12 Months




                           X   memcache API
                           X SSL support
  ...
Launched in the Last 2 Months




                           X   Background processing
                           X XMPP
 ...
• Large object store
                 • Database export


Friday, October 16, 2009
Friday, October 16, 2009
Java + App Engine demo




Friday, October 16, 2009
UI in the Front...




                                  ...Hosting in the Back



Friday, October 16, 2009
GWT Browser-Proofs Your JavaScript Code...



                                            IE

                            ...
...But CSS Headaches Persist




Friday, October 16, 2009
Coming in GWT 2.0: In-Browser Debugging




Friday, October 16, 2009
Rich Applications, Extra-Large Codebases




Friday, October 16, 2009
LOADING
Friday, October 16, 2009
Manual Code Splitting: Not For the Faint of Heart




Friday, October 16, 2009
Coming in GWT 2.0: runAsync()

               // example

               public void onMySettingsLinkClicked() {

        ...
runAsync() Helps Apps Startup More Quickly
                                                        1500
                  ...
code.google.com/appengine
                           code.google.com/gwt




Friday, October 16, 2009
OpenSocial




Friday, October 16, 2009
Friday, October 16, 2009
Large Reach




                           Over 800M in a year – and more to come!


Friday, October 16, 2009
Global Reach




Friday, October 16, 2009
OpenSocial Supporting Products




              27 Google Confidential


Friday, October 16, 2009
Under the hood: Usage Stats

                 • 315M+ App Installs
                 • 85M+ Canvas Page Views / Day
       ...
The Open Stack




                              XRDS




Friday, October 16, 2009
Google Friend Connect




Friday, October 16, 2009
Google FriendConnect
                                     • Uses OpenSocial
                                       (gadget...
Google Friend Connect Demos




Friday, October 16, 2009
TIME.com Daily Specials

             TIME.com’s Daily Specials provide a
             trusted and entertaining perspectiv...
Specials Traffic




                                   176MM
                                   From January – April 2009...
Challenge




                           How can we make our daily Top 10’s
                                more fun and e...
Friday, October 16, 2009
TIME Social Lists Demo




Friday, October 16, 2009
Architecture



                           Javascript APIs



                                               JSONP


     ...
Friday, October 16, 2009
Paul Berry, HuffingtonPost




Friday, October 16, 2009
Friday, October 16, 2009
Friday, October 16, 2009
Google Product APIs
             Easier to Add Content and Services To Your Website

                           Search   F...
Low-Level API Access Serves Many Needs...
                                  5




                                  4


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




                                   Search               Spreadsheets




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




Friday, October 16, 2009
Google Web Elements demo




Friday, October 16, 2009
google.com/webelements




Friday, October 16, 2009
Android: Seven Months, By The Numbers

                 • 10 carriers in 12 countries
                 • 4,900+ applicatio...
code.google.com/android




Friday, October 16, 2009
Enjoy the candies!
                                             http://twitter.com/chanezon


                            ...
Upcoming SlideShare
Loading in...5
×

Hdc09 Keynote - Browser, Mobile, Cloud, Social, Geo Portrait of the developer as a kid in a candy store

3,794

Published on

slides for my keynote at heartland developer conference 2009 in Omaha, Nebraska
http://www.heartlanddc.com/omaha/sessions.aspx#81

In the past 2 years developer platforms have evolved very fast making it easy to create applications with a rich user interface used by million of users, leveraging their friends, profile and location information, and accessible from their mobile device. There has never been a better time to be a developer!

demos at http://delicious.com/chanezon/hdc09+demos

Published in: Technology
1 Comment
8 Likes
Statistics
Notes
  • welcome to Buenos Aires Chanezon! ;)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,794
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
139
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Hdc09 Keynote - Browser, Mobile, Cloud, Social, Geo Portrait of the developer as a kid in a candy store

  1. 1. Browser, Mobile, Cloud, Social, Geo Portrait of the developer as a kid in a candy store Patrick Chanezon Developer Advocate, Google http://twitter.com/chanezon October 16, 2009 #hdc09 Source Marshall Astor http://www.flickr.com/photos/lifeontheedge/711086777/sizes/l/#cc_license Friday, October 16, 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 Mar 26, 2009 app cache Safari 4.0b: canvas database Feb 29, 2009 video workers canvas XHR iPhone 2.2: video geolocation CSS Nov 22, 2008 app cache DOM canvas database app cache workers HTML database native web 1990 -- 2008 Q408 Q109 Q209 ... Friday, October 16, 2009
  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 ... Friday, October 16, 2009
  4. 4. More Developers 300 chrome firefox 3.1+ Monthly Contributors to OSS Browsers firefox 2.0-3.0 webkit 225 150 75 0 2002 2003 2004 2005 2006 2007 2008 2009 Friday, October 16, 2009
  5. 5. More Speed 80 SunSpider Runs Per Minute 60 100x improvement in JavaScript performance 40 20 0 2001 2003 2005 2007 Q108 Q208 Q308 Q408 Q109 Friday, October 16, 2009
  6. 6. More Users 450 350 OSS Browser Users (M) 250 150 50 2005 2006 2007 2008 2009 Friday, October 16, 2009
  7. 7. A More Powerful Web 5>2 Friday, October 16, 2009
  8. 8. Cautionary Tales of Latent Lemonade AJAX (2004) xml (1998) css xhr (1996) (1999) Friday, October 16, 2009
  9. 9. HTML 5: A Chance to Do Things Differently Friday, October 16, 2009
  10. 10. canvas video geolocation app cache & web workers database Friday, October 16, 2009
  11. 11. Until Recently, You Couldn’t Draw on the Web 0 0 X y x height Y width Friday, October 16, 2009
  12. 12. And Graphics Weren’t Very Interactive javascript:onClick(Draw()); Friday, October 16, 2009
  13. 13. The Usual Options Do This... Silverlight VML Flash Friday, October 16, 2009
  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 Friday, October 16, 2009
  15. 15. // canvas defines drawing and animation APIs with pixel- level control Friday, October 16, 2009
  16. 16. canvas demos Friday, October 16, 2009
  17. 17. canvas Piggybacks Overall Browser Speed SunSpider Runs Per Minute Friday, October 16, 2009
  18. 18. Is the Web Ready for 3D? Friday, October 16, 2009
  19. 19. Canvas3D, WebGL O3D code.google.com/apis/o3d Friday, October 16, 2009
  20. 20. HTML 5 Support Chrome Firefox Safari Opera canvas video geolocation app cache database workers Friday, October 16, 2009
  21. 21. canvas video geolocation app cache & web workers database Friday, October 16, 2009
  22. 22. Video is Complicated, and Outside Your Control Friday, October 16, 2009
  23. 23. So What Would Occam Do? © topatoco.com Friday, October 16, 2009
  24. 24. // HTML 5 makes <video> as easy as <img> Friday, October 16, 2009
  25. 25. <video> demos Friday, October 16, 2009
  26. 26. HTML 5 Support Chrome Firefox Safari Opera canvas video geolocation app cache database workers Friday, October 16, 2009
  27. 27. canvas video geolocation app cache & web workers database Friday, October 16, 2009
  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 75 ft Friday, October 16, 2009
  29. 29. But GPS and IP Aren’t Good Enough 1. too slow 2. too constrained 3. too fuzzy Friday, October 16, 2009
  30. 30. 1) Cell ID and WiFi Solve The Data Problem... Friday, October 16, 2009
  31. 31. Friday, October 16, 2009
  32. 32. 2) ...And Browsers Are Now Location-Enabled Friday, October 16, 2009
  33. 33. // the geolocation api brings browser- based location to your apps Friday, October 16, 2009
  34. 34. geolocation demos Friday, October 16, 2009
  35. 35. HTML 5 Support Chrome Firefox Safari Opera canvas video geolocation (iPhone) app cache database workers Friday, October 16, 2009
  36. 36. canvas video geolocation app cache & web workers database Friday, October 16, 2009
  37. 37. Web Apps Need to Work Everywhere Friday, October 16, 2009
  38. 38. // database and app cache store user data and app resources locally Friday, October 16, 2009
  39. 39. app cache & database demos Friday, October 16, 2009
  40. 40. Friday, October 16, 2009
  41. 41. index.html <title>Google Maps</title> Google Maps <script src="/usr/lib/mojo/framework/mojo.js" type="text/javascript" x-mojo-version="1"> </script> <script src="app/assistants/stage-assistant.js" type="text/javascript"></script> map-assistant.js this.controller.serviceRequest { 'palm://com.palm.location', { method: "getFix", parameters: {mode: "auto"}, onSuccess: this.goFix, onFailure: this.error } }; Friday, October 16, 2009
  42. 42. webOS and HTML 5 • CSS Transformations • HTML 5 database for history & bookmarks • Canvas in calendar application • Extensions - Accelerometer - ... Friday, October 16, 2009
  43. 43. webOS Accelerometer API • Shake: distinct start, stop with magnitude • Orientation • Raw acceleration - Individual acceleration per axis - Individual Pitch, Roll, and Yaw • ... all available from JavaScript using the DOM Level 2 interface Friday, October 16, 2009
  44. 44. Code Snippet <script type="text/javascript"> // Set up accelerometer event handlers window.addEventListener( "shakestart", beginShaking, true ); window.addEventListener( "shaking", isShaking, true ); window.addEventListener( "shakeend", endShaking, true ); window.addEventListener( "acceleration", handleAccel, true ); function isShaking(event) { // event.magnitude // ... } function handleAccel(event) { // event.accelX, event.accelY, event.accelZ // event.pitch, event.roll, event.yaw // ... } </script> Friday, October 16, 2009
  45. 45. webOS and HTML 5 Converge mobile and desktop web application development Friday, October 16, 2009
  46. 46. HTML 5 Support Chrome Firefox Safari Opera canvas video geolocation (iPhone) app cache (mobile) database (mobile) workers Friday, October 16, 2009
  47. 47. canvas video geolocation app cache & web workers database Friday, October 16, 2009
  48. 48. A More Powerful Web == More Powerful Apps Friday, October 16, 2009
  49. 49. 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 Friday, October 16, 2009
  50. 50. // web workers defines an API for running background scripts Friday, October 16, 2009
  51. 51. web workers demos Friday, October 16, 2009
  52. 52. HTML5 Support Chrome Firefox Safari Opera canvas video geolocation (iPhone) app cache (mobile) database (mobile) workers (mobile) Friday, October 16, 2009
  53. 53. HTML5 and SVG not available in IE? • ChromeFrame plugin implements HTML5 in IE • Shim libraries using Flash or VML to implement features – SVGWeb: SVG – Explorercanvas: Canvas – Video for Everybody: Video 53 Friday, October 16, 2009
  54. 54. A More Powerful Web, Made Easier Friday, October 16, 2009
  55. 55. App Engine and Google Web Toolkit (GWT) Easier to Scale and Optimize Your App Friday, October 16, 2009
  56. 56. 200,000+ Developers Friday, October 16, 2009
  57. 57. 80,000+ Applications 700 9:30am EST: WhiteHouse.gov Queries Per Second (QPS) Deadline for submissions 600 5:00pm EST: Link on Google homepage 500 11:30am EST: Townhall begins 400 Afternoon EST: NPR, NYTimes, CNN coverage 300 200 6:45pm EST: WhiteHouse.gov kick-off blog post 5:00pm EST: WhiteHouse.gov wrap-up blog post 100 0 18:00 21:00 24:00 3:00 6:00 9:00 12:00 15:00 18:00 21:00 24:00 3:00 6:00 9:00 12:00 15:00 18:00 21:00 24:00 3:00 Friday, October 16, 2009
  58. 58. 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 Friday, October 16, 2009
  59. 59. Launched in the Last 2 Months X Background processing X XMPP X Incoming email X Datastore stats Friday, October 16, 2009
  60. 60. • Large object store • Database export Friday, October 16, 2009
  61. 61. Friday, October 16, 2009
  62. 62. Java + App Engine demo Friday, October 16, 2009
  63. 63. UI in the Front... ...Hosting in the Back Friday, October 16, 2009
  64. 64. GWT Browser-Proofs Your JavaScript Code... IE Firefo x S afari Chrome Friday, October 16, 2009
  65. 65. ...But CSS Headaches Persist Friday, October 16, 2009
  66. 66. Coming in GWT 2.0: In-Browser Debugging Friday, October 16, 2009
  67. 67. Rich Applications, Extra-Large Codebases Friday, October 16, 2009
  68. 68. LOADING Friday, October 16, 2009
  69. 69. Manual Code Splitting: Not For the Faint of Heart Friday, October 16, 2009
  70. 70. 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 } }); } Friday, October 16, 2009
  71. 71. 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 Friday, October 16, 2009
  72. 72. code.google.com/appengine code.google.com/gwt Friday, October 16, 2009
  73. 73. OpenSocial Friday, October 16, 2009
  74. 74. Friday, October 16, 2009
  75. 75. Large Reach Over 800M in a year – and more to come! Friday, October 16, 2009
  76. 76. Global Reach Friday, October 16, 2009
  77. 77. OpenSocial Supporting Products 27 Google Confidential Friday, October 16, 2009
  78. 78. Under the hood: Usage Stats • 315M+ App Installs • 85M+ Canvas Page Views / Day • 7,500+ Apps • 20+ Containers Friday, October 16, 2009
  79. 79. The Open Stack XRDS Friday, October 16, 2009
  80. 80. Google Friend Connect Friday, October 16, 2009
  81. 81. Google FriendConnect • Uses OpenSocial (gadgets, REST/RPC) • Allows site owners to mix in social data to existing sites • Cut and paste or • Deep integrations Friday, October 16, 2009
  82. 82. Google Friend Connect Demos Friday, October 16, 2009
  83. 83. TIME.com Daily Specials TIME.com’s Daily Specials provide a trusted and entertaining perspective on relevant current events. These interactive specials use photo and video galleries to engage the readers, and topics can range from important international events like the Pope visiting the Middle East) to light hearted topics like the Best iPhone Apps. Recent Popular Daily Specials Pageviews • top 10 disastrous letterman interviews - 7.4mm • top 11 iphone applications - 5.9mm •10 things you can like about $4 gas - 4.3mm •10 essential sites - 3.0mm Source: Omniture SiteCatalyst – Past 12 Months Friday, October 16, 2009
  84. 84. Specials Traffic 176MM From January – April 2009 Friday, October 16, 2009
  85. 85. Challenge How can we make our daily Top 10’s more fun and engaging? Friday, October 16, 2009
  86. 86. Friday, October 16, 2009
  87. 87. TIME Social Lists Demo Friday, October 16, 2009
  88. 88. Architecture Javascript APIs JSONP HTML + JavaScript Friday, October 16, 2009
  89. 89. Friday, October 16, 2009
  90. 90. Paul Berry, HuffingtonPost Friday, October 16, 2009
  91. 91. Friday, October 16, 2009
  92. 92. Friday, October 16, 2009
  93. 93. 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 Friday, October 16, 2009
  94. 94. Low-Level API Access Serves Many Needs... 5 4 Over 4B Google API Daily API Hits (B) Hits Every Day 3 2 1 May Jun Jul Aug Sept Oct Nov Dec Jan Feb Mar Apr May Friday, October 16, 2009
  95. 95. ...But Imagine AdSense for Everything Else Search Spreadsheets Video Calendars Maps Friday, October 16, 2009
  96. 96. Announcing: Google Web Elements Copy and Paste Website Content Friday, October 16, 2009
  97. 97. Google Web Elements demo Friday, October 16, 2009
  98. 98. google.com/webelements Friday, October 16, 2009
  99. 99. 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... Friday, October 16, 2009
  100. 100. code.google.com/android Friday, October 16, 2009
  101. 101. Enjoy the candies! http://twitter.com/chanezon Browser Mobile Cloud Social Geo Demos at http://delicious.com/chanezon/hdc09+demos Source Marshall Astor http://www.flickr.com/photos/lifeontheedge/711086777/sizes/l/#cc_license Friday, October 16, 2009
  1. A particular slide catching your eye?

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

×