Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Devcon5, NYC 2013: Intro to HTML5

Devcon5, NYC 2013: Intro to HTML5

HTML5 Hacks introduces the audience to the umbrella of HTML5 specifications that will have you rethinking the possibilities of browser based applications.

Join Jesse Cravens, author of O'Reilly's best selling 'HTML5 Hacks', as he demonstrates intriguing uses of HTML5-related technologies. In each hack, he provides a complete code example for specifications that include Canvas, SVG, CSS3, multimedia, data storage, web workers, WebSocket, Web Components and geolocation.

Here are just a few of the hacks you’ll find in this book and related talk:

Make iOS-style card flips with CSS transforms and transitions
Replace the background of your video with the Canvas tag
Use Canvas to create high-res Retina Display-ready media
Make elements on your page user-customizable with editable content
Cache media resources locally with the filesystem API
Reverse-geocode the location of your web app user
Process image data with pixel manipulation in a dedicated web worker
Push notifications to the browser with Server-Sent Events

Jesse Cravens

July 24, 2013
Tweet

More Decks by Jesse Cravens

Other Decks in Technology

Transcript

  1. Intro to HTML5
    July 2013
    Sunday, December 29, 13

    View full-size slide

  2. @jdcravens
    github.com/jessecravens
    frog
    Sunday, December 29, 13

    View full-size slide

  3. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    3
    Experience
    Sunday, December 29, 13

    View full-size slide

  4. Sunday, December 29, 13

    View full-size slide

  5. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    5
    Offline Storage CSS3 Styling Device Access Connectivity
    Effects Multimedia Semantics Perf/Integrate
    The HTML5 Umbrella
    Sunday, December 29, 13

    View full-size slide

  6. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    6
    Agenda
    Web Forms
    Web Workers
    WebSocket
    Device Orientation
    Sensors
    Geo Location
    Web Components
    Sunday, December 29, 13

    View full-size slide

  7. Web Forms
    Forms Playground
    Sunday, December 29, 13

    View full-size slide

  8. July 2013
    Devcon5 NYC 2013
    HTML5
    Web Forms
    8
    Sunday, December 29, 13

    View full-size slide

  9. Web Workers
    Background Threads
    Sunday, December 29, 13

    View full-size slide

  10. July 2013
    Devcon5 NYC 2013
    HTML5
    Web Workers
    10
    Sunday, December 29, 13

    View full-size slide

  11. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  12. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  13. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    “click”
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  14. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  15. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    “mouseover”
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  16. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  17. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    “load”
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  18. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  19. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    “change”
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  20. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  21. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    “readystatechange”
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  22. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  23. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  24. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    element.addEventListener('click',
    function() {
    //do something
    });
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  25. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    element.addEventListener('click',
    function() {
    //do something
    });
    Whenever the JavaScript runtime is idle,
    it takes the first event off the queue and
    runs any handlers that were registered to
    that event
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  26. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    element.addEventListener('click',
    function() {
    //do something
    });
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  27. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    element.addEventListener('click',
    function() {
    //do something
    });
    As long as those handlers run quickly,
    this makes for a responsive user
    experience.
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  28. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    element.addEventListener('click',
    function() {
    //do something
    });
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  29. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    Events can be queued while code is running,
    but they can’t fire until the runtime is
    free.
    element.addEventListener('click',
    function() {
    //do something
    });
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  30. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    11
    element.addEventListener('click',
    function() {
    //do something
    });
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Sunday, December 29, 13

    View full-size slide

  31. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    12
    Sunday, December 29, 13

    View full-size slide

  32. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    13
    Processing large arrays or JSON responses.
    Prefetching and/or caching data for later use.
    Analyzing video or audio data.
    Polling of webservices.
    Image filtering in Canvas.
    Updating many rows of Local Storage DB.
    Use Cases
    Sunday, December 29, 13

    View full-size slide

  33. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    14
    var a = false;
    asyncFunction(function({
    console.assert(a, 'a should be true');
    })
    a = true;
    Sunday, December 29, 13

    View full-size slide

  34. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    15
    data = file.read("/foo/bar");
    // wait...
    doSomething(data);
    file.read("/foo/bar", function(data) {
    // called after data is read
    doSomething(data);
    });
    otherThing(); // executes immediately;
    Sunday, December 29, 13

    View full-size slide

  35. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    16
    Web Workers provide a simple means for web content to run
    scripts in background threads.
    Main Window
    Context Worker
    Context
    Spawn
    Sunday, December 29, 13

    View full-size slide

  36. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    17
    // Simple Worker Spawn from Main Thread
    var message = {"row": 1000, "col": 1000}
    var worker = new Worker('worker.js');
    worker.postMessage(JSON.stringify(message));
    worker.addEventListener('message',
    function(event){
    // do something with the computated data
    }, false);
    //continue executing
    Sunday, December 29, 13

    View full-size slide

  37. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    18
    // Move high Computation to the Worker
    self.addEventListener('message', function(e) {
    var msg = JSON.parse(e.data);
    var r = msg.row;
    var c = msg.col;
    var a = new Array(r);
    for (var i = 0; i < r; i++) {
    a[i] = new Array(c);
    for (var j = 0; j < c; j++) {
    a[i][j] = "[" + i + "," + j + "]";
    }
    }
    postMessage(a);
    }, false);
    Sunday, December 29, 13

    View full-size slide

  38. Device Access + WebSocket
    GeoLocation, Device Orientation, Sensors
    Sunday, December 29, 13

    View full-size slide

  39. July 2013
    Devcon5 NYC 2013
    HTML5
    WebSocket
    20
    Sunday, December 29, 13

    View full-size slide

  40. July 2013
    Devcon5 NYC 2013
    HTML5
    Device Orientation
    21
    Sunday, December 29, 13

    View full-size slide

  41. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    22
    Device Orientation
    Sunday, December 29, 13

    View full-size slide

  42. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    sensors
    23
    Sunday, December 29, 13

    View full-size slide

  43. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    24
    Embedded JS, HTML5 and the Internet of Things
    http://www.youtube.com/watch?v=H00_BGRkBRM&t=37m50s
    Sunday, December 29, 13

    View full-size slide

  44. Nerdclustr
    Geo Location and Web Sockets
    Sunday, December 29, 13

    View full-size slide

  45. July 2013
    Devcon5 NYC 2013
    HTML5
    GeoLocation
    26
    Sunday, December 29, 13

    View full-size slide

  46. Nerdclustr
    Refactoring with Web Components
    Sunday, December 29, 13

    View full-size slide

  47. July 2013
    Devcon5 NYC 2013
    HTML5
    Shadow DOM
    28
    Sunday, December 29, 13

    View full-size slide

  48. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    29
    Recent Tech.pro Article
    Sunday, December 29, 13

    View full-size slide

  49. © 2012 frog. All rights reserved.
    Sunday, December 29, 13

    View full-size slide