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?

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