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. 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
  2. The network DNS lookup time Connect time Redirect time SSL

    handshake time Time to first byte Sunday, May 11, 14
  3. The browser Single threaded event loop Construct DOM tree from

    HTML Construct render tree from DOM tree and stylesheets Sunday, May 11, 14
  4. 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
  5. 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
  6. Blocking JavaScript <script> var script = document.createElement('script'); script.src = "app.js";

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

    document.head.appendChild(script); </script> NO PRE-PARSER! Sunday, May 11, 14
  8. FALLBACK BLOCKING BLOCKING + TIMEOUT Internet Explorer Safari Mobile Safari

    Chrome Opera (Blink) Firefox Opera (Presto) Blocking web fonts Sunday, May 11, 14
  9. Web font loader Provide control over font loading Remove fonts

    from the critical path Make cross-browser behaviour consistent Sunday, May 11, 14
  10. Web font loader <link href="/myfonts.css" rel="stylesheet" /> var WebFontConfig =

    { custom: { families: ['Clarendon', 'Clarendon Bold'], urls: ['/myfonts.css'] } }; Sunday, May 11, 14
  11. Web font loader <link href="/myfonts.css" rel="stylesheet" /> 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
  12. Web font loader <body class="clarendon-loading"> <body class="clarendon-loaded"> h1 { font-family:

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