HTML5 and Google Chrome - DevFest09
Upcoming SlideShare
Loading in...5
×
 

HTML5 and Google Chrome - DevFest09

on

  • 35,653 views

HTML5 and Google Chrome.

HTML5 and Google Chrome.

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

Statistics

Views

Total Views
35,653
Views on SlideShare
14,897
Embed Views
20,756

Actions

Likes
6
Downloads
177
Comments
1

43 Embeds 20,756

http://blog.chromium.org 20402
http://www.slideshare.net 170
http://translate.googleusercontent.com 53
http://onwebdev.blogspot.com 40
http://google-chrome-browser.com 26
http://131.253.14.98 5
http://blog.gabrieleromanato.com 4
http://elingnotah.appspot.com 4
http://www.blogger.com 4
http://131.253.14.66 3
http://onwebdev.blogspot.it 3
http://www.google.com 3
https://www.google.com 2
https://accounts.google.com 2
http://developer.chrome.com 2
http://hacksam94.appspot.com 2
http://webcache.googleusercontent.com 2
http://www.hanrss.com 2
http://127.0.0.1:8795 2
http://65.55.177.205 2
http://static.slidesharecdn.com 1
http://xss.yandex.net 1
http://onwebdev.blogspot.com.es 1
http://www.loyexordinary.appspot.com 1
http://dedesani.appspot.com 1
http://www.corp.google.com 1
http://translate.baiducontent.com 1
https://ednprx.appspot.com 1
http://www.e-presentations.us 1
https://duckduckgo.com 1
http://xianguo.com 1
http://www.whatwg.org 1
http://207.46.192.232 1
file:// 1
http://web.archive.org 1
http://www.softwaremackiev.com 1
http://ankitspy.appspot.com 1
http://www.translate.ru 1
http://131.253.14.250 1
http://traductor.elmundo.es 1
resource://brief-content 1
https://www.blitztheweb.appspot.com 1
https://home.jolicloud.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Cool presentation, glad to be there :-)
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 and Google Chrome - DevFest09 HTML5 and Google Chrome - DevFest09 Presentation Transcript

  • 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 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
  • User Experience The Web is Developing Fast… XHR Native Web CSS DOM HTML 1990 – 2008 Q109 Q209 Q309 Q409
  • 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
  • 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
  • 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
  • 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
  • <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)
  • <canvas> Demo
  • <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
  • <video> / < audio> Demo
  • 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']); } }); });
  • Local Storage Demo
  • 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);
  • Workers Demo
  • 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
  • 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”); }
  • 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’); };
  • Notifications Demo
  • 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
  • WebGL Demo
  • 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);
  • Geolocation Demo
  • 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
  • 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
  • HTML 5 Native Support Canvas Video …. Local storage Web workers
  • HTML 5 Native Support with Chrome Frame Canvas Video …. Local storage Web workers
  • HTML 5 Resources www.whatwg.org/html5 www.chromium.org/developers/web-platform-status blog.chromium.org diveintohtml5.org quirksmode.org
  • Q&A