SlideShare a Scribd company logo
1 of 52
Tuesday, November 2, 2010   1
HTML5: Building For a Faster Web
           Performance       Features     Tools



           Eric Bidelman - Google
           Google DevFest - Buenos Aires, Argentina
           Nov 2, 2010




Tuesday, November 2, 2010                             2
Agenda
             • Performance        Wins

                  • Web     Storage APIs

                  • Web     Workers & Web Sockets

             • Tools        & Resources

             • Compatibility




            3
                                 @googledevlatam #devfest10
Tuesday, 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 #devfest10
Tuesday, November 2, 2010                                       4
Performance




             5
                            @googledevlatam #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, November 2, 2010                                                         9
HTML5 Markup
                               ( for web apps )




             10
                            @googledevlatam #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, November 2, 2010                                    13
Demos
                                      open




             14
                            @googledevlatam #devfest10
Tuesday, November 2, 2010                                14
Web Storage
                              not just for offline




             15
                            @googledevlatam #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, November 2, 2010                                                        21
Debugging App Cache

                            about:appcache-internals




           22
                                @googledevlatam #devfest10
Tuesday, November 2, 2010                                    22
Demo
                                http://3.ly/timer




             23
                            @googledevlatam #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, November 2, 2010                                    28
Demo
                            http://mrdoob.com/projects/multiuserpad/




             29
                                     @googledevlatam #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, November 2, 2010                                                          32
Demo
                                      open




             33
                            @googledevlatam #devfest10
Tuesday, November 2, 2010                                33
Tools & Compatibility




             34
                                @googledevlatam #devfest10
Tuesday, November 2, 2010                                    34
Chrome Developer Tools




             35
                                 @googledevlatam #devfest10
Tuesday, November 2, 2010                                     35
Google Fonts API
                            code.google.com/apis/webfonts/




           36
                                  @googledevlatam #devfest10
Tuesday, November 2, 2010                                      36
37
                            @googledevlatam #devfest10
Tuesday, November 2, 2010                                37
37
                            @googledevlatam #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, November 2, 2010                                                           38
Demo
                            www.gobiernodechile.cl




             39
                            @googledevlatam #devfest10
Tuesday, November 2, 2010                                39
HTML5Rocks.com
             1.Step-by-Step Tutorials

             2.Code Playground

             3.Interactive Presentation

             4.Studio / Gallery




           40
                            @googledevlatam #devfest10
Tuesday, November 2, 2010                                40
Is HTML5 Ready?




             41
                             @googledevlatam #devfest10
Tuesday, November 2, 2010                                 41
Text




                            caniuse.com
                                 42       Google Developer Day 2010
Tuesday, 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 #devfest10
Tuesday, 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; /* Don't 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, 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 #devfest10
Tuesday, November 2, 2010                                                                46
Questions?


                            Stay up to date: @googledevbr

             47
                                  @googledevlatam #devfest10
Tuesday, November 2, 2010                                      47
Tuesday, November 2, 2010   48

More Related Content

What's hot

Large problems, Mostly Solved
Large problems, Mostly SolvedLarge problems, Mostly Solved
Large problems, Mostly Solvedericholscher
 
CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11virtualsciences41
 
JavaScript!
JavaScript!JavaScript!
JavaScript!RTigger
 
Authentication
AuthenticationAuthentication
Authenticationsoon
 
Automating Django Functional Tests Using Selenium on Cloud
Automating Django Functional Tests Using Selenium on CloudAutomating Django Functional Tests Using Selenium on Cloud
Automating Django Functional Tests Using Selenium on CloudJonghyun Park
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Adrian Olaru
 
Collective Amberjack - European Plone Symposium
Collective Amberjack - European Plone SymposiumCollective Amberjack - European Plone Symposium
Collective Amberjack - European Plone SymposiumMassimo Azzolini
 
Using Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer ArchitectureUsing Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer ArchitectureGarann Means
 
Building Sencha Themes
Building Sencha ThemesBuilding Sencha Themes
Building Sencha ThemesSencha
 
Couchdbkit djangocong-20100425
Couchdbkit djangocong-20100425Couchdbkit djangocong-20100425
Couchdbkit djangocong-20100425guest4f2eea
 

What's hot (11)

Large problems, Mostly Solved
Large problems, Mostly SolvedLarge problems, Mostly Solved
Large problems, Mostly Solved
 
CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11
 
JavaScript!
JavaScript!JavaScript!
JavaScript!
 
Authentication
AuthenticationAuthentication
Authentication
 
Automating Django Functional Tests Using Selenium on Cloud
Automating Django Functional Tests Using Selenium on CloudAutomating Django Functional Tests Using Selenium on Cloud
Automating Django Functional Tests Using Selenium on Cloud
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Collective Amberjack - European Plone Symposium
Collective Amberjack - European Plone SymposiumCollective Amberjack - European Plone Symposium
Collective Amberjack - European Plone Symposium
 
Using Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer ArchitectureUsing Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer Architecture
 
Collective.Amberjack
Collective.AmberjackCollective.Amberjack
Collective.Amberjack
 
Building Sencha Themes
Building Sencha ThemesBuilding Sencha Themes
Building Sencha Themes
 
Couchdbkit djangocong-20100425
Couchdbkit djangocong-20100425Couchdbkit djangocong-20100425
Couchdbkit djangocong-20100425
 

Similar to HTML5: Building for a Faster Web

HTML5: Building the Next Generation of Web Applications
HTML5: Building the Next Generation of Web ApplicationsHTML5: Building the Next Generation of Web Applications
HTML5: Building the Next Generation of Web ApplicationsChrome Developer Relations
 
Html5 coredevsummit
Html5 coredevsummitHtml5 coredevsummit
Html5 coredevsummitJen Simmons
 
Python - A Comprehensive Programming Language
Python - A Comprehensive Programming LanguagePython - A Comprehensive Programming Language
Python - A Comprehensive Programming LanguageTsungWei Hu
 
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have knownSPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have knownMark Rackley
 
Power to the People: Manipulating SharePoint with Client-Side JavaScript
Power to the People:  Manipulating SharePoint with Client-Side JavaScriptPower to the People:  Manipulating SharePoint with Client-Side JavaScript
Power to the People: Manipulating SharePoint with Client-Side JavaScriptPeterBrunone
 
So what's a web app? introduction to the chrome web store
So what's a web app? introduction to the chrome web storeSo what's a web app? introduction to the chrome web store
So what's a web app? introduction to the chrome web storeEric Bidelman
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Librarieselliando dias
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)Doris Chen
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery EssentialsMark Rackley
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & FeaturesDave Ross
 
Untangling - fall2017 - week 9
Untangling - fall2017 - week 9Untangling - fall2017 - week 9
Untangling - fall2017 - week 9Derek Jacoby
 
Killing Shark-Riding Dinosaurs with ORM
Killing Shark-Riding Dinosaurs with ORMKilling Shark-Riding Dinosaurs with ORM
Killing Shark-Riding Dinosaurs with ORMOrtus Solutions, Corp
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationSean Burgess
 
Staying Sane with Drupal NEPHP
Staying Sane with Drupal NEPHPStaying Sane with Drupal NEPHP
Staying Sane with Drupal NEPHPOscar Merida
 
memories of tumblr gear & Tumblrowl
memories of tumblr gear & Tumblrowlmemories of tumblr gear & Tumblrowl
memories of tumblr gear & Tumblrowlhonishi
 
Django Overview
Django OverviewDjango Overview
Django OverviewBrian Tol
 
Advanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojoAdvanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojoFu Cheng
 
Realtime Analytics with MongoDB Counters (mongonyc 2012)
Realtime Analytics with MongoDB Counters (mongonyc 2012)Realtime Analytics with MongoDB Counters (mongonyc 2012)
Realtime Analytics with MongoDB Counters (mongonyc 2012)Scott Hernandez
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)Christian Rokitta
 

Similar to HTML5: Building for a Faster Web (20)

HTML5: Building the Next Generation of Web Applications
HTML5: Building the Next Generation of Web ApplicationsHTML5: Building the Next Generation of Web Applications
HTML5: Building the Next Generation of Web Applications
 
Html5 coredevsummit
Html5 coredevsummitHtml5 coredevsummit
Html5 coredevsummit
 
Python - A Comprehensive Programming Language
Python - A Comprehensive Programming LanguagePython - A Comprehensive Programming Language
Python - A Comprehensive Programming Language
 
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have knownSPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have known
 
Power to the People: Manipulating SharePoint with Client-Side JavaScript
Power to the People:  Manipulating SharePoint with Client-Side JavaScriptPower to the People:  Manipulating SharePoint with Client-Side JavaScript
Power to the People: Manipulating SharePoint with Client-Side JavaScript
 
So what's a web app? introduction to the chrome web store
So what's a web app? introduction to the chrome web storeSo what's a web app? introduction to the chrome web store
So what's a web app? introduction to the chrome web store
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Libraries
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
Untangling - fall2017 - week 9
Untangling - fall2017 - week 9Untangling - fall2017 - week 9
Untangling - fall2017 - week 9
 
Killing Shark-Riding Dinosaurs with ORM
Killing Shark-Riding Dinosaurs with ORMKilling Shark-Riding Dinosaurs with ORM
Killing Shark-Riding Dinosaurs with ORM
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
 
Staying Sane with Drupal NEPHP
Staying Sane with Drupal NEPHPStaying Sane with Drupal NEPHP
Staying Sane with Drupal NEPHP
 
Jquery fundamentals
Jquery fundamentalsJquery fundamentals
Jquery fundamentals
 
memories of tumblr gear & Tumblrowl
memories of tumblr gear & Tumblrowlmemories of tumblr gear & Tumblrowl
memories of tumblr gear & Tumblrowl
 
Django Overview
Django OverviewDjango Overview
Django Overview
 
Advanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojoAdvanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojo
 
Realtime Analytics with MongoDB Counters (mongonyc 2012)
Realtime Analytics with MongoDB Counters (mongonyc 2012)Realtime Analytics with MongoDB Counters (mongonyc 2012)
Realtime Analytics with MongoDB Counters (mongonyc 2012)
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)
 

Recently uploaded

Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 

Recently uploaded (20)

Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 

HTML5: Building for a Faster Web

  • 2. HTML5: Building For a Faster Web Performance Features Tools Eric Bidelman - Google Google DevFest - Buenos Aires, Argentina Nov 2, 2010 Tuesday, November 2, 2010 2
  • 3. Agenda • Performance Wins • Web Storage APIs • Web Workers & Web Sockets • Tools & Resources • Compatibility 3 @googledevlatam #devfest10 Tuesday, November 2, 2010 3
  • 4. Eric Bidelman (@ebidel) • University of Michigan, BSE Computer & Electrical Engineering • Developer Programs Engineer, Google • Docs / Sites / Health / Base / OAuth / Chrome / HTML5 4 @googledevlatam #devfest10 Tuesday, November 2, 2010 4
  • 5. Performance 5 @googledevlatam #devfest10 Tuesday, November 2, 2010 5
  • 6. 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 #devfest10 Tuesday, November 2, 2010 6
  • 7. 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 #devfest10 Tuesday, November 2, 2010 7
  • 8. 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 #devfest10 Tuesday, November 2, 2010 8
  • 9. 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 #devfest10 Tuesday, November 2, 2010 9
  • 10. HTML5 Markup ( for web apps ) 10 @googledevlatam #devfest10 Tuesday, November 2, 2010 10
  • 11. 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 #devfest10 Tuesday, November 2, 2010 11
  • 12. 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 #devfest10 Tuesday, November 2, 2010 11
  • 13. 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 #devfest10 Tuesday, November 2, 2010 11
  • 14. 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 #devfest10 Tuesday, November 2, 2010 12
  • 15. 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 #devfest10 Tuesday, November 2, 2010 13
  • 16. Demos open 14 @googledevlatam #devfest10 Tuesday, November 2, 2010 14
  • 17. Web Storage not just for offline 15 @googledevlatam #devfest10 Tuesday, November 2, 2010 15
  • 18. 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 #devfest10 Tuesday, November 2, 2010 16
  • 19. 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 #devfest10 Tuesday, November 2, 2010 17
  • 20. 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 #devfest10 Tuesday, November 2, 2010 18
  • 21. 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 #devfest10 Tuesday, November 2, 2010 19
  • 22. 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 #devfest10 Tuesday, November 2, 2010 20
  • 23. 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 #devfest10 Tuesday, November 2, 2010 21
  • 24. Debugging App Cache about:appcache-internals 22 @googledevlatam #devfest10 Tuesday, November 2, 2010 22
  • 25. Demo http://3.ly/timer 23 @googledevlatam #devfest10 Tuesday, November 2, 2010 23
  • 26. 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 #devfest10 Tuesday, November 2, 2010 24
  • 27. 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 #devfest10 Tuesday, November 2, 2010 25
  • 28. 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 #devfest10 Tuesday, November 2, 2010 26
  • 29. 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 #devfest10 Tuesday, November 2, 2010 27
  • 30. 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 #devfest10 Tuesday, November 2, 2010 28
  • 31. Demo http://mrdoob.com/projects/multiuserpad/ 29 @googledevlatam #devfest10 Tuesday, November 2, 2010 29
  • 32. Server-Sent Events: Notifications • Server initiated pushes • mimetype: text/event-stream • Use cases: • Stock tickers • News tickers • Status update streams 30 @googledevlatam #devfest10 Tuesday, November 2, 2010 30
  • 33. 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 #devfest10 Tuesday, November 2, 2010 31
  • 34. 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 #devfest10 Tuesday, November 2, 2010 32
  • 35. Demo open 33 @googledevlatam #devfest10 Tuesday, November 2, 2010 33
  • 36. Tools & Compatibility 34 @googledevlatam #devfest10 Tuesday, November 2, 2010 34
  • 37. Chrome Developer Tools 35 @googledevlatam #devfest10 Tuesday, November 2, 2010 35
  • 38. Google Fonts API code.google.com/apis/webfonts/ 36 @googledevlatam #devfest10 Tuesday, November 2, 2010 36
  • 39. 37 @googledevlatam #devfest10 Tuesday, November 2, 2010 37
  • 40. 37 @googledevlatam #devfest10 Tuesday, November 2, 2010 37
  • 41. 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 #devfest10 Tuesday, November 2, 2010 38
  • 42. 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 #devfest10 Tuesday, November 2, 2010 38
  • 43. Demo www.gobiernodechile.cl 39 @googledevlatam #devfest10 Tuesday, November 2, 2010 39
  • 44. HTML5Rocks.com 1.Step-by-Step Tutorials 2.Code Playground 3.Interactive Presentation 4.Studio / Gallery 40 @googledevlatam #devfest10 Tuesday, November 2, 2010 40
  • 45. Is HTML5 Ready? 41 @googledevlatam #devfest10 Tuesday, November 2, 2010 41
  • 46. Text caniuse.com 42 Google Developer Day 2010 Tuesday, November 2, 2010 42
  • 47. 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 #devfest10 Tuesday, November 2, 2010 43
  • 48. 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; /* Don't 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 #devfest10 Tuesday, November 2, 2010 44
  • 49. 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 #devfest10 Tuesday, November 2, 2010 45
  • 50. 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 #devfest10 Tuesday, November 2, 2010 46
  • 51. Questions? Stay up to date: @googledevbr 47 @googledevlatam #devfest10 Tuesday, November 2, 2010 47