HTML 5 and
Google Chrome
Mihai Ionescu
Developer Advocate, Google
Browsers Started a Revolution that Continues
• In 1995 Netscape introduced JavaScript
• In 1999, Microsoft introduces XMLH...
User Experience   The Web is Developing Fast…




                               XHR
                                     ...
The Web is Developing Fast…


                                                                                            ...
The web is also getting faster
                            160


                            140
SunSpider Runs Per Minute...
What New Capabilities do Webapps Need?
• Plugins currently address some needs, others are still not well
 addressed
   – P...
Our Goal
• Empower web applications
  – If a native app can do it, why can’t a webapp?
  – Can we build upon webapps stren...
<canvas>
• One of the first HTML5 additions to be implemented by
 browsers – in Safari, then Firefox and Opera. (We got it...
<canvas> Demo
<video> / <audio>
• Allows a page to natively play video / audio
 – No plugins required
 – As simple as including an image...
<video> / < audio> Demo
Local Data Store
• Provides a way to store data client side
• Useful for many classes of applications, especially in
 conj...
Local Storage Demo
Workers
• Workers provide web apps with a means for concurrency
• Can offload heavy computation onto a separate thread so
...
Workers Demo
Application Cache
• Application cache solves the problem of how to make it such
 that one can load an application URL whil...
Web Sockets
• Allows bi-directional communication between client and
 server in a cleaner, more efficient form than hangin...
Notifications
• Alert() dialogs are annoying, modal, and not a great user
 experience
• Provide a way to do less intrusive...
Notifications Demo
3D APIs
• WebGL (Canvas 3D), developed by Mozilla, is a command-
 mode API that allows developers to make OpenGL calls via...
WebGL Demo
Geolocation
• Make JavaScript APIs from the client to figure out where you
 are
• Location info from GPS, IP address, Blue...
Geolocation Demo
And So Much More…
• There’s much work ahead.
• Some is well defined
 – File API
 – Forms2
 – WebFont @font-face
• Many thi...
Chrome HTML 5 in a Nutshell
      Video, Audio, Workers
                                                            Additi...
HTML 5 Native Support



Canvas

Video

….

Local storage

Web workers
HTML 5 Native Support

                        with
                        Chrome Frame

Canvas

Video

….

Local storage...
HTML 5 Resources
www.whatwg.org/html5

www.chromium.org/developers/web-platform-status

blog.chromium.org

diveintohtml5.o...
Q&A
HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09
Upcoming SlideShare
Loading in...5
×

HTML5 and Google Chrome - DevFest09

32,270

Published on

HTML5 and Google Chrome.

Presentation I gave at the Google DevFest 09 in Buenos Aires, Argentina.

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
32,270
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
187
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

HTML5 and Google Chrome - DevFest09

  1. 1. HTML 5 and Google Chrome Mihai Ionescu Developer Advocate, Google
  2. 2. Browsers Started a Revolution that Continues • In 1995 Netscape introduced JavaScript • In 1999, Microsoft introduces XMLHTTP • In 2002, Mozilla 1.0 includes XMLHttpRequest natively ... Then web applications started taking off ... • In 2004, Gmail launches as a beta • In 2005, AJAX takes off (e.g. Google Maps) ... Now web applications are demanding more capabilities
  3. 3. User Experience The Web is Developing Fast… XHR Native Web CSS DOM HTML 1990 – 2008 Q109 Q209 Q309 Q409
  4. 4. The Web is Developing Fast… Android 2.0: Oct 26, 2009 Chrome 3.0: Sep 15, 2009 Firefox 3.5: June 30, 2009 User Experience iPhone 3.0: June 30, 2009 Safari 4.0: Jun 08, 2009 Palm Pre: June 06, 2009 Chrome 2.0: May 21, 2009 Android 1.5: Apr 13, 2009 XHR Opera Labs: Mar 26, 2009 Native Web CSS DOM HTML 1990 – 2008 Q109 Q209 Q309 Q409
  5. 5. The web is also getting faster 160 140 SunSpider Runs Per Minute 120 100 100x improvement in JavaScript performance 80 60 40 20 00 2001 2003 2005 2007 2008 2009
  6. 6. What New Capabilities do Webapps Need? • Plugins currently address some needs, others are still not well addressed – Playing video – Webcam / microphone access – Better file uploads – Geolocation – Offline abilities – 3D – Positional and multi-channel audio – Drag and drop of content and files into and out of webapps • Some of these capabilities are working their way through standards process
  7. 7. Our Goal • Empower web applications – If a native app can do it, why can’t a webapp? – Can we build upon webapps strengths? • Understand what new capabilities are needed – Talking to application developers (you!) – Figure out what native applications people run • And what web applications serve similar purposes • And what native applications have no web equivalent • Implement (we’re going full speed ahead...) – We prototyped in Gears – Now we’re implementing natively in Google Chrome • Standardize
  8. 8. <canvas> • One of the first HTML5 additions to be implemented by browsers – in Safari, then Firefox and Opera. (We got it for free in Google Chrome from WebKit). • Provides a surface on which you can draw 2D images • Talk of extending the model for 3D (more later) // canvas is a reference to a <canvas> element var context = canvas.getContext('2d'); context.fillRect(0,0,50,50); canvas.setAttribute('width', '300'); // clears the canvas context.fillRect(0,100,50,50); canvas.width = canvas.width; // clears the canvas context.fillRect(100,0,50,50); // only this square remains (reproduced from http://www.whatwg.org/specs/web-apps/current- work/#canvas with permission)
  9. 9. <canvas> Demo
  10. 10. <video> / <audio> • Allows a page to natively play video / audio – No plugins required – As simple as including an image - <audio src=“song.mp3”> • Has built-in playback controls – Stop – Pause – Play • Scriptable, in case you want your own dynamic control • Implemented in WebKit / Chrome
  11. 11. <video> / < audio> Demo
  12. 12. Local Data Store • Provides a way to store data client side • Useful for many classes of applications, especially in conjunction with offline capabilities • 2 main APIs provided: a database API (exposing a SQLite database) and a structured storage api (key/value pairs) • Implementation under way in Google Chrome, already working in WebKit. db.transaction(function(tx) { tx.executeSql('SELECT * FROM MyTable', [], function(tx, rs) { for (var i = 0; i < rs.rows.length; ++i) { var row = rs.rows.item(i); DoSomething(row['column']); } }); });
  13. 13. Local Storage Demo
  14. 14. Workers • Workers provide web apps with a means for concurrency • Can offload heavy computation onto a separate thread so your app doesn’t block • Come in 3 flavors: – Dedicated (think: bound to a single tab) – Shared (shared among multiple windows in an origin) – Persistent (run when the browser is “closed”) main.js: var worker = new Worker(‘extra_work.js'); worker.onmessage = function (event) { alert(event.data); }; extra_work.js: // do some work; when done post message. postMessage(some_data);
  15. 15. Workers Demo
  16. 16. Application Cache • Application cache solves the problem of how to make it such that one can load an application URL while offline and it just “works” • Web pages can provide a “manifest” of files that should be cached locally • These pages can be accessed offline • Enables web pages to work without the user being connected to the Internet • Implemented in WebKit, implementation ongoing in Google Chrome
  17. 17. Web Sockets • Allows bi-directional communication between client and server in a cleaner, more efficient form than hanging gets (or a series of XMLHttpRequests) • Intended to be as close as possible to just exposing raw TCP/IP to JavaScript given the constraints of the Web. • Available in dev channel var socket = new WebSocket(location); socket.onopen = function(event) { socket.postMessage(“Hello, WebSocket”);} socket.onmessage =function(event) { alert(event.data); } socket.onclose = function(event) { alert(“closed”); }
  18. 18. Notifications • Alert() dialogs are annoying, modal, and not a great user experience • Provide a way to do less intrusive event notifications • Work regardless of what tab / window has focus • Provide more flexibility than an alert() dialog • Prototype available in Webkit / Chrome • Standardization discussions ongoing var notify = window.webkitNotifications.createNotification( icon, title, text); notify.show(); notify.ondisplay = function() { alert(‘ondisplay’); }; notify.onclose = function() { alert(‘onclose’); };
  19. 19. Notifications Demo
  20. 20. 3D APIs • WebGL (Canvas 3D), developed by Mozilla, is a command- mode API that allows developers to make OpenGL calls via JavaScript • O3D is an effort by Google to develop a retain-mode API where developers can build up a scene graph and manipulate via JavaScript, also hardware accelerated • Discussion on the web and in standards bodies to follow
  21. 21. WebGL Demo
  22. 22. Geolocation • Make JavaScript APIs from the client to figure out where you are • Location info from GPS, IP address, Bluetooth, cell towers • Optionally share your location with trusted parties • Watch the user’s position as it changes over time • Implementation ongoing in Chrome // Single position request. navigator.geolocation.getCurrentPosition(successCallback); // Request position updates. navigator.geolocation.watchPosition(successCallback);
  23. 23. Geolocation Demo
  24. 24. And So Much More… • There’s much work ahead. • Some is well defined – File API – Forms2 – WebFont @font-face • Many things less defined – P2p APIs – Better drag + drop support – Webcam / Microphone access – O/S integration (protocol / file extension handlers and more) – And more
  25. 25. Chrome HTML 5 in a Nutshell Video, Audio, Workers Additional APIs available in Chrome 3. (TBD) to better Websockets in dev channel. support web applications Appcache, More work Notifications, -Geolocation Database, , Web GL, Local storage, File API in dev channel Q4 Q1 / 2010 Q2 Q3
  26. 26. HTML 5 Native Support Canvas Video …. Local storage Web workers
  27. 27. HTML 5 Native Support with Chrome Frame Canvas Video …. Local storage Web workers
  28. 28. HTML 5 Resources www.whatwg.org/html5 www.chromium.org/developers/web-platform-status blog.chromium.org diveintohtml5.org quirksmode.org
  29. 29. Q&A
  1. A particular slide catching your eye?

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

×