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

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

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

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

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

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

More Users 450 350 OSS Browser Users (M) 250 150 50 2005 2006 2007 2008 2009 Friday, October 16, 2009

A More Powerful Web 5>2 Friday, October 16, 2009

Cautionary Tales of Latent Lemonade AJAX (2004) xml (1998) css xhr (1996) (1999) Friday, October 16, 2009

HTML 5: A Chance to Do Things Differently Friday, October 16, 2009

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

Until Recently, You Couldn’t Draw on the Web 0 0 X y x height Y width Friday, October 16, 2009

And Graphics Weren’t Very Interactive javascript:onClick(Draw()); Friday, October 16, 2009

The Usual Options Do This... Silverlight VML Flash Friday, October 16, 2009

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

// canvas defines drawing and animation APIs with pixel- level control Friday, October 16, 2009

canvas demos Friday, October 16, 2009

canvas Piggybacks Overall Browser Speed SunSpider Runs Per Minute Friday, October 16, 2009

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 video geolocation app cache database workers Friday, October 16, 2009

Video is Complicated, and Outside Your Control Friday, October 16, 2009

So What Would Occam Do? © topatoco.com Friday, October 16, 2009

// 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 video geolocation app cache database workers Friday, October 16, 2009

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

But GPS and IP Aren’t Good Enough 1. too slow 2. too constrained 3. too fuzzy Friday, October 16, 2009

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 apps Friday, October 16, 2009

geolocation demos Friday, October 16, 2009

HTML 5 Support Chrome Firefox Safari Opera canvas video geolocation (iPhone) app cache database workers Friday, October 16, 2009

Web Apps Need to Work Everywhere Friday, October 16, 2009

// database and app cache store user data and app resources locally Friday, October 16, 2009

app cache & database demos Friday, October 16, 2009

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

webOS and HTML 5 • CSS Transformations • HTML 5 database for history & bookmarks • Canvas in calendar application • Extensions - Accelerometer - ... Friday, October 16, 2009

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

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

webOS and HTML 5 Converge mobile and desktop web application development Friday, October 16, 2009

HTML 5 Support Chrome Firefox Safari Opera canvas video geolocation (iPhone) app cache (mobile) database (mobile) workers Friday, October 16, 2009

A More Powerful Web == More Powerful Apps Friday, October 16, 2009

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

// web workers defines an API for running background scripts Friday, October 16, 2009

web workers demos Friday, October 16, 2009

HTML5 Support Chrome Firefox Safari Opera canvas video geolocation (iPhone) app cache (mobile) database (mobile) workers (mobile) Friday, October 16, 2009

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

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

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

Launched in the Last 2 Months X Background processing X XMPP X Incoming email X Datastore stats Friday, October 16, 2009

• Large object store • Database export 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 Firefo x S afari Chrome Friday, October 16, 2009

...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() { 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

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

code.google.com/appengine code.google.com/gwt Friday, October 16, 2009

OpenSocial 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 • 7,500+ Apps • 20+ Containers Friday, October 16, 2009

The Open Stack XRDS Friday, October 16, 2009

Google Friend Connect Friday, October 16, 2009

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

Google Friend Connect Demos Friday, October 16, 2009

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

Specials Traffic 176MM From January – April 2009 Friday, October 16, 2009

Challenge How can we make our daily Top 10’s more fun and engaging? Friday, October 16, 2009

TIME Social Lists Demo Friday, October 16, 2009

Architecture Javascript APIs JSONP HTML + JavaScript Friday, October 16, 2009

Paul Berry, HuffingtonPost Friday, October 16, 2009

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

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

...But Imagine AdSense for Everything Else Search Spreadsheets Video Calendars Maps Friday, October 16, 2009

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+ 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

code.google.com/android Friday, October 16, 2009

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

http://www.54ad.com.tw	127
http://condiminds.tumblr.com	19
http://www.slideshare.net	9
http://inboundmarketing.sinaapp.com	8
http://www.tw-inboundmarketing.com	2

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

by Patrick Chanezon on Oct 16, 2009

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 165

Statistics

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