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

Architecting resilient front ends

Architecting resilient front ends

In this session we'll talk about how to architect client-side code for resilience. When things go wrong (as they often do on the web) how can we still deliver a useful and timely experience to users? How can we prioritize the loading of core content? How can we deal with resources that get lost on the network? What can we learn about the way browsers parse and display web pages to keep them loading in the most reliable way possible?

Andy Hume

May 10, 2014
Tweet

More Decks by Andy Hume

Other Decks in Technology

Transcript

  1. FRONT ENDS
    @andyhume
    Codefront.io, 2014
    RESILIENT
    Sunday, May 11, 14

    View Slide

  2. Sunday, May 11, 14

    View Slide

  3. Sunday, May 11, 14

    View Slide

  4. Sunday, May 11, 14

    View Slide

  5. Sunday, May 11, 14

    View Slide

  6. Sunday, May 11, 14

    View Slide

  7. Sunday, May 11, 14

    View Slide

  8. Sunday, May 11, 14

    View Slide

  9. waiting for fonts.com
    Sunday, May 11, 14

    View Slide

  10. http://www.flickr.com/photos/the_jorr/325224175/
    Unreliable
    Sunday, May 11, 14

    View Slide

  11. http://www.flickr.com/photos/vpickering/6824364286/
    Resilient
    Sunday, May 11, 14

    View Slide

  12. Progressive enhancement
    So, the conclusion is that
    this is the best way to
    deal with this. Yay us.
    Next, how do we do that.
    http://www.flickr.com/photos/8040811@N06/3167877765
    Progressive enhancement
    Sunday, May 11, 14

    View Slide

  13. Content
    THREE STAGES
    Enhancement
    Leftovers
    Sunday, May 11, 14

    View Slide

  14. Content
    THREE STAGES
    Enhancement
    Leftovers
    Sunday, May 11, 14

    View Slide

  15. Content
    THREE STAGES
    Enhancement
    Leftovers
    Sunday, May 11, 14

    View Slide

  16. Content
    THREE STAGES
    Enhancement
    Leftovers
    Sunday, May 11, 14

    View Slide

  17. Content Enhancement Leftovers
    Sunday, May 11, 14

    View Slide

  18. Content Enhancement Leftovers
    Sunday, May 11, 14

    View Slide

  19. Content Enhancement Leftovers
    Sunday, May 11, 14

    View Slide

  20. Time to screen
    Sunday, May 11, 14

    View Slide

  21. The network
    Sunday, May 11, 14

    View Slide

  22. The network
    DNS lookup time
    Connect time
    Redirect time
    SSL handshake time
    Time to first byte
    Sunday, May 11, 14

    View Slide

  23. The browser
    Sunday, May 11, 14

    View Slide

  24. The browser
    Single threaded event loop
    Construct DOM tree from HTML
    Construct render tree from DOM tree and
    stylesheets
    Sunday, May 11, 14

    View Slide

  25. What blocks DOM construction?
    Except:
    Sunday, May 11, 14

    View Slide

  26. What blocks DOM construction?
    Fetch of remote scripts that need to be
    executed synchronously
    Inline script node that is waiting on
    relevant stylesheet fetch
    Except:
    Sunday, May 11, 14

    View Slide

  27. What blocks DOM construction?
    Fetch of remote scripts that need to be
    executed synchronously
    Inline script node that is waiting on
    relevant stylesheet fetch
    Except:
    Scripts with async/defer attributes
    Stylesheets with non-matching media
    Sunday, May 11, 14

    View Slide

  28. What blocks render tree?
    Sunday, May 11, 14

    View Slide

  29. What blocks render tree?
    Blocked by fetching stylesheets
    Sunday, May 11, 14

    View Slide

  30. HTML pre-parser
    HTML
    JS
    HTML
    Sunday, May 11, 14

    View Slide

  31. HTML pre-parser
    HTML
    JS
    HTML
    Sunday, May 11, 14

    View Slide

  32. Blocking JavaScript
    <br/>var script = document.createElement('script');<br/>script.src = "app.js";<br/>document.head.appendChild(script);<br/>
    Sunday, May 11, 14

    View Slide

  33. Blocking JavaScript
    <br/>var script = document.createElement('script');<br/>script.src = "app.js";<br/>document.head.appendChild(script);<br/>
    NO PRE-PARSER!
    Sunday, May 11, 14

    View Slide

  34. Blocking JavaScript

    Sunday, May 11, 14

    View Slide

  35. Blocking web fonts
    Sunday, May 11, 14

    View Slide

  36. HTML
    CSS
    Blocking web fonts
    FONT
    FONT
    FONT
    START
    RENDER
    Sunday, May 11, 14

    View Slide

  37. HTML
    CSS
    Blocking web fonts
    FONT
    FONT
    FONT
    START
    RENDER
    TEXT
    RENDER
    Sunday, May 11, 14

    View Slide

  38. HTML
    CSS
    Blocking web fonts
    FONT
    FONT
    FONT
    START
    RENDER
    TEXT
    RENDER
    Sunday, May 11, 14

    View Slide

  39. FALLBACK BLOCKING BLOCKING +
    TIMEOUT
    Internet Explorer Safari
    Mobile Safari
    Chrome
    Opera (Blink)
    Firefox
    Opera (Presto)
    Blocking web fonts
    Sunday, May 11, 14

    View Slide

  40. Web font loader
    Provide control over font loading
    Remove fonts from the critical path
    Make cross-browser behaviour consistent
    Sunday, May 11, 14

    View Slide

  41. Web font loader

    Sunday, May 11, 14

    View Slide

  42. Web font loader

    Sunday, May 11, 14

    View Slide

  43. Web font loader

    var WebFontConfig = {
    custom: {
    families: ['Clarendon', 'Clarendon Bold'],
    urls: ['/myfonts.css'] }
    };
    Sunday, May 11, 14

    View Slide

  44. Web font loader

    var WebFontConfig = {
    custom: {
    families: ['Clarendon', 'Clarendon Bold'],
    urls: ['/myfonts.css'] }
    };
    var s = document.createElement('script');
    s.src = '//ajax.googleapis.com/webfonts.js';
    document.head.appendChild(s);
    Sunday, May 11, 14

    View Slide

  45. Web font loader


    Sunday, May 11, 14

    View Slide

  46. Web font loader


    h1 {
    font-family: georgia, serif;
    }
    .clarendon-loaded h1 {
    font-family: Clarendon, georgia, serif;
    }
    Sunday, May 11, 14

    View Slide

  47. Blocking CSS
    Sunday, May 11, 14

    View Slide

  48. http://www.webpagetest.org/result/130908_K2_796/7/details/
    Sunday, May 11, 14

    View Slide

  49. http://www.webpagetest.org/result/130908_K2_796/
    Sunday, May 11, 14

    View Slide

  50. http://www.webpagetest.org/result/130908_K2_796/
    Median of nine test runs
    Sunday, May 11, 14

    View Slide

  51. http://www.webpagetest.org/result/130908_K2_796/
    Median of nine test runs
    iPhone 4, iOS 5.1
    Sunday, May 11, 14

    View Slide

  52. http://www.webpagetest.org/result/130908_K2_796/
    Median of nine test runs
    3G (1.6Mps, 300ms RTT)
    iPhone 4, iOS 5.1
    Sunday, May 11, 14

    View Slide

  53. Sunday, May 11, 14

    View Slide

  54. Thank-you!
    http://lanyrd.com/scyqxd
    @andyhume
    Creative Commons Licensed
    Attribution, Non-Commercial, Share Alike
    cc
    Sunday, May 11, 14

    View Slide