• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5: Building for a Faster Web
 

HTML5: Building for a Faster Web

on

  • 6,640 views

HTML5. Covers: workers, websockets, SSEs, storage, js improvements, tips, tricks, tools.

HTML5. Covers: workers, websockets, SSEs, storage, js improvements, tips, tricks, tools.

Statistics

Views

Total Views
6,640
Views on SlideShare
6,615
Embed Views
25

Actions

Likes
23
Downloads
0
Comments
0

7 Embeds 25

http://socialwendygroup.com 13
http://www.slideshare.net 4
http://infonotaswebs.blogspot.com 3
http://vincentpellissier.jocada.com 2
http://sharepoint.barcapint.com 1
http://www.learnitlive.com 1
https://training.blackboard.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

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…
Post Comment
Edit your comment

    HTML5: Building for a Faster Web HTML5: Building for a Faster Web Presentation Transcript

    • Tuesday, November 2, 2010 1
    • HTML5: Building For a Faster Web Performance Features Tools Eric Bidelman - Google Google DevFest - Buenos Aires, Argentina Nov 2, 2010Tuesday, November 2, 2010 2
    • Agenda • Performance Wins • Web Storage APIs • Web Workers & Web Sockets • Tools & Resources • Compatibility 3 @googledevlatam #devfest10Tuesday, November 2, 2010 3
    • Eric Bidelman (@ebidel) • University of Michigan, BSE Computer & Electrical Engineering • Developer Programs Engineer, Google • Docs / Sites / Health / Base / OAuth / Chrome / HTML5 4 @googledevlatam #devfest10Tuesday, November 2, 2010 4
    • Performance 5 @googledevlatam #devfest10Tuesday, November 2, 2010 5
    • Don’t Underestimate CSS3! • Rounded corners, box shadows, reflection, rotations, alpha, css masks • CSS animations & transitions div.box {   left: 40px;     -webkit-transition: left 0.3s ease-out;      -moz-transition: left 0.3s ease-out;          -o-transition: left 0.3s ease-out;   } div.box.totheleft { left: 0px; } div.box.totheright { left: 80px; } • 3D transforms trigger HW compositing in the GPU -webkit-transform: translate3d(10px, 0, 0); • pseudo-selectors are your friend ( :hover, :active, :valid, :invalid, :focus, :empty ) • Web Fonts 6 @googledevlatam #devfest10Tuesday, November 2, 2010 6
    • Go Native! • Use native methods ( not libraries ) JSON.parse(); JSON.stringify(); ‘ too much padding ‘.trim(); • Query, don’t walk the DOM! document.querySelector(‘#links’); document.querySelectorAll(‘.myclass > span’); • Data URIs: Render, don’t download canvas.toDataURL(); 7 @googledevlatam #devfest10Tuesday, November 2, 2010 7
    • Go Native! <div id="main" class="shadow rounded"></div> var cl = document.querySelector(#main).classList; for(var i = 0, c; c = cl[i]; ++i) { console.log(c); } cl.add(highlight); cl.remove(shadow); cl.toggle(highlight); cl.contains(shadow) == false // cl.toString() == el.className 8 @googledevlatam #devfest10Tuesday, November 2, 2010 8
    • JavaScript 1.6 • Array iterative methods: map(), filter(), forEach(), every(), some() [5,6,7,8].map(function(value){ // [50,60,70,80] return value * 10; }); // Return a new array of all mathematical constants under 2 [3.14, 2.718, 1.618].filter(function(number){   return number < 2; }); // [1.618] [html5,css3,webgl].forEach(function(value){ // use value }); • Array item location methods: indexOf(‘html5’), lastIndexOf(‘webgl’) 9 @googledevlatam #devfest10Tuesday, November 2, 2010 9
    • HTML5 Markup ( for web apps ) 10 @googledevlatam #devfest10Tuesday, November 2, 2010 10
    • REL Attributes rel=”pingback” • enables reverse linking • automatically notify original blog when sites link to it rel=”prefetch” • hint for the browser that the resource is likely to be used 11 @googledevlatam #devfest10Tuesday, November 2, 2010 11
    • REL Attributes rel=”pingback” • enables reverse linking • automatically notify original blog when sites link to it <a rel="pingback" href="http://blog.blogspot.com">A Blog</a> rel=”prefetch” • hint for the browser that the resource is likely to be used 11 @googledevlatam #devfest10Tuesday, November 2, 2010 11
    • REL Attributes rel=”pingback” • enables reverse linking • automatically notify original blog when sites link to it <a rel="pingback" href="http://blog.blogspot.com">A Blog</a> rel=”prefetch” • hint for the browser that the resource is likely to be used <a rel=”prefetch” href=”nextPage.html”>Next page &gt;</a> 11 @googledevlatam #devfest10Tuesday, November 2, 2010 11
    • Data Attributes <output id="out" data-id="good" data-name="joe" data-screen-name="user1"></output> var a = [], el = document.querySelector(#out); el.setAttribute(data-foo, bar); for (var key in el.dataset) { a.push(<b>, key, </b>: , el.dataset[key], <br/>); } el.innerHTML += a.join(); id: good name: joe screenName: user1 foo: bar 12 @googledevlatam #devfest10Tuesday, November 2, 2010 12
    • HTML5 Forms • New <input> types: tel, email, url, datetime, date, month, week, time, datetime-local, number, range, color • New attributes: placeholder, required, autofocus, pattern, min, max, step, speech, multiple, directory • ....you don’t need JS libraries! 13 @googledevlatam #devfest10Tuesday, November 2, 2010 13
    • Demos open 14 @googledevlatam #devfest10Tuesday, November 2, 2010 14
    • Web Storage not just for offline 15 @googledevlatam #devfest10Tuesday, November 2, 2010 15
    • Web Storage APIs localStorage • key/value pairs • great for storing user preferences localStorage.dateOfBirth = ‘1984-07-22’; delete localStorage.dateOfBirth; localStorage[‘user’] = JSON.stringify({username: john, id: 100}); var retrieved = JSON.parse(localStorage[‘user’]); sessionStorage • non-persistent key/value pairs (e.g. sensitive data) Web SQL DB • 5MB of persistent storage • reduces round trips to the server 16 @googledevlatam #devfest10Tuesday, November 2, 2010 16
    • var webdb = {}; webdb.open = function() {   webdb.db = openDatabase(Todo, 1.0, todo-manager, 5*1024*1024); //5MB }; webdb.onError = function(tx, e) { alert(Error + e.message); }; webdb.onSuccess = function(tx, r) {   // re-render all the data in the DOM. }; webdb.createTable = function() {   webdb.db.transaction(function(tx) {     tx.executeSql(CREATE TABLE IF NOT EXISTS +     todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME), []);   }); }; webdb.addTodo = function(todoText) { webdb.db.transaction(function(tx){     var addedOn = new Date();     tx.executeSql(INSERT INTO todo(todo, added_on) VALUES (?,?),         [todoText, addedOn], webdb.onSuccess, webdb.onError);     }); }; 17 @googledevlatam #devfest10Tuesday, November 2, 2010 17
    • 4th Storage Option... Indexed DB • Hybrid of localStorage/sessionStorage APIs and Web SQL DB. • In-order retrieval • Faster search - Index on any keys • Browser support is still sparse • Implemented in FF4 • Recently landed in Chromium: webkitIndexedDB 18 @googledevlatam #devfest10Tuesday, November 2, 2010 18
    • Application Cache • Caches entire web app locally • Server with mime-type: text/cache-manifest • Why? 1.HTML, CSS, and JS stay fairly consistent 2.Native browser caching is unreliable 3.Caching resources creates speedier apps • Native iPhone & Android Gmail app uses AppCache 19 @googledevlatam #devfest10Tuesday, November 2, 2010 19
    • Cache Manifest File <html manifest="example.manifest">... </html> CACHE MANIFEST # 2010-08-10-v0.0.1 # Explicitly cached entries CACHE: index.html stylesheet.css images/logo.png scripts/main.js # static.html will be served if the user is offline FALLBACK: / /static.html # Resources that require the user to be online. NETWORK: * # login.php # http://api.twitter.com 20 @googledevlatam #devfest10Tuesday, November 2, 2010 20
    • JavaScript API var appCache = window.applicationCache; if (appCache.status == window.applicationCache.UPDATEREADY) {   appCache.swapCache();  // Fetch was successful, swap the new cache. } appCache.addEventListener(cached, handleCacheEvent, false); appCache.addEventListener(checking, handleCacheEvent, false); appCache.addEventListener(downloading, handleCacheEvent, false); appCache.addEventListener(error, handleCacheError, false); appCache.addEventListener(noupdate, handleCacheEvent, false); appCache.addEventListener(obsolete, handleCacheEvent, false); appCache.addEventListener(progress, handleCacheEvent, false); appCache.addEventListener(updateready, handleCacheEvent, false); 21 @googledevlatam #devfest10Tuesday, November 2, 2010 21
    • Debugging App Cache about:appcache-internals 22 @googledevlatam #devfest10Tuesday, November 2, 2010 22
    • Demo http://3.ly/timer 23 @googledevlatam #devfest10Tuesday, November 2, 2010 23
    • Dedicated Workers: Getting Stuff Done • Take advantage of multi-core CPUs • Use cases: • Text formatting of a long document • Syntax highlighting • Audio synthesis • Image processing • Processing large arrays or other computational tasks 24 @googledevlatam #devfest10Tuesday, November 2, 2010 24
    • JavaScript API <output id="result"></output> <script>   var worker = new Worker(task.js);   worker.onmessage = function(e) {     document.querySelector(result).textContent = JSON.stringify(e.data);   }; worker.postMessage(’start’); </script> importScripts(script1.js, ‘script2.js’); self.addEventListener(message, function(e) {   switch (e.data) {     case start:       self.postMessage({id: 12345, txt: Hi});       break;     case stop:       self.close(); // Terminates the worker.   }; }, false); 25 @googledevlatam #devfest10Tuesday, November 2, 2010 25
    • Inline Workers <!DOCTYPE html> <html> <body>   <script id="worker1" type="text/html">     onmessage = function(e) {     ...     };   </script>   <script>     var bb = new BlobBuilder();     bb.append(document.querySelector(#worker1).textContent);     var worker = new Worker(window.createObjectURL(bb.getBlob()));     worker.onmessage = function(e) {      ... };     worker.postMessage(); // Start the worker.   </script> </body> </html> 26 @googledevlatam #devfest10Tuesday, November 2, 2010 26
    • WebSockets: Realtime • Bi-directional communication • Eliminates need for XHR polling! • Close as we can get to TCP/IP socket connections in JS • Port 80 - ws:// Port 443 - wss:// • Use cases: • chat rooms • white boarding • games 27 @googledevlatam #devfest10Tuesday, November 2, 2010 27
    • Javascript API var ws = new WebSocket("ws://www.example.com/path"); ws.onopen = function () { // connection established ws.send("Hello, WebSocket"); }; ws.onmessage = function(evt) { alert(evt.data); ws.close(); }; ws.onclose = function () { // connection closed }; 28 @googledevlatam #devfest10Tuesday, November 2, 2010 28
    • Demo http://mrdoob.com/projects/multiuserpad/ 29 @googledevlatam #devfest10Tuesday, November 2, 2010 29
    • Server-Sent Events: Notifications • Server initiated pushes • mimetype: text/event-stream • Use cases: • Stock tickers • News tickers • Status update streams 30 @googledevlatam #devfest10Tuesday, November 2, 2010 30
    • SSE: Client Code var source = new EventSource(events.php); source.onmessage = function(event) { console.log(lastEventId: + event.lastEventId + , + event.data); }; source.onopen = function(event) { console.log(= Connection was opened); updateConnectionStatus(Connected, true); }; source.onerror = function(event) { if (event.eventPhase == EventSource.CLOSED) { console.log(= Connection was closed); updateConnectionStatus(Disconnected, false); } }; 31 @googledevlatam #devfest10Tuesday, November 2, 2010 31
    • SSE: Server Code <?php header(Content-Type: text/event-stream); function sendMsg($id , $msg) { echo "id: $id" . PHP_EOL; echo "data: $msg" . PHP_EOL; echo PHP_EOL; flush(); } $startedAt = time(); do { if ((time() - $startedAt) > 20) { // Limit connections to 20s. die(); } sleep(3); // Send message every 3s. sendMsg($startedAt , server time: . date("h:i:s", time())); } while(true); // Keep the connection open and only make one request. ?> 32 @googledevlatam #devfest10Tuesday, November 2, 2010 32
    • Demo open 33 @googledevlatam #devfest10Tuesday, November 2, 2010 33
    • Tools & Compatibility 34 @googledevlatam #devfest10Tuesday, November 2, 2010 34
    • Chrome Developer Tools 35 @googledevlatam #devfest10Tuesday, November 2, 2010 35
    • Google Fonts API code.google.com/apis/webfonts/ 36 @googledevlatam #devfest10Tuesday, November 2, 2010 36
    • 37 @googledevlatam #devfest10Tuesday, November 2, 2010 37
    • 37 @googledevlatam #devfest10Tuesday, November 2, 2010 37
    • Google Fonts API <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata"/> <style> h1 { font-family: Tangerine, serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; } </style> </head> <body> <h1>Making the Web Beautiful!</h1> </body> </html> 38 @googledevlatam #devfest10Tuesday, November 2, 2010 38
    • Google Fonts API <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata"/> <style> h1 { font-family: Tangerine, serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; } </style> </head> <body> <h1>Making the Web Beautiful!</h1> </body> </html> 38 @googledevlatam #devfest10Tuesday, November 2, 2010 38
    • Demo www.gobiernodechile.cl 39 @googledevlatam #devfest10Tuesday, November 2, 2010 39
    • HTML5Rocks.com 1.Step-by-Step Tutorials 2.Code Playground 3.Interactive Presentation 4.Studio / Gallery 40 @googledevlatam #devfest10Tuesday, November 2, 2010 40
    • Is HTML5 Ready? 41 @googledevlatam #devfest10Tuesday, November 2, 2010 41
    • Text caniuse.com 42 Google Developer Day 2010Tuesday, November 2, 2010 42
    • Modernizr Library • BAD: checking navigator.userAgent • Unreliable - users change this! • BETTER: Feature detection • Tests 20+ HTML5/CSS3 features: document.createElement(‘nav’) • Global Modernizr object with boolean property for each feature • Adds classes to the <html> element that explain precisely what features are (and are not) natively supported 43 @googledevlatam #devfest10Tuesday, November 2, 2010 43
    • Usage <div id="audio"> <audio> <source src="mySong.ogg" /> <source src="mySong.mp3" /> </audio> <button id="play">Play</button> <button id="pause">Pause</button> </div> /* In your CSS: */ .no-audio #audio { display: none; /* Dont show Audio options */ } .audio #audio button { /* Style the Play and Pause buttons nicely */ } // In your JavaScript: if (Modernizr.audio) { // Hook up functionality to Play and Pause buttons } 44 @googledevlatam #devfest10Tuesday, November 2, 2010 44
    • Google Chrome Frame 1.Add a single meta tag to your site • if !installed: direct users to download • else: your site ‘just works’ <meta http-equiv="X-UA-Compatible" content="chrome=1"> 2.Add a response header X-UA-Compatible: chrome=1 45 @googledevlatam #devfest10Tuesday, November 2, 2010 45
    • Thanks! • Tools • Google Fonts API: code.google.com/apis/webfonts/ • html5rocks.com • Compatibility: • Google Chrome Frame: http://code.google.com/chrome/chromeframe/ • caniuse.com • modernizr.com • File bugs against Chrome: crbug.com • Stay in Touch! • Twitter: @ChromiumDev • groups.google.com/a/chromium.org/group/chromium-html5/ 46 @googledevlatam #devfest10Tuesday, November 2, 2010 46
    • Questions? Stay up to date: @googledevbr 47 @googledevlatam #devfest10Tuesday, November 2, 2010 47
    • Tuesday, November 2, 2010 48