Architecting resilient front-ends, jQuery UK, 2015

Companies spend hundreds of thousands of dollars on the uptime of their server infrastructure. And yet, web sites in the real world are slow to load and failing all the time. User experiences that are blocked by slow-loading JavaScript or never-loading web fonts are all too common, and undermine the cost of sustaining high availability web servers. In this session we’ll talk about how to architect client-side code for resilience. When things go wrong how can we still deliver a useful and timely experience to users?

Transcript

1. RESILIENT
   FRONT-ENDS
   @andyhume
   jQuery UK, 2015
   ARCHITECTING
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. waiting for fonts.com
   

   View Slide

8. http://
   Unreliable network
   

   View Slide

9. http://
   Resilient web
   

   View Slide

10. Progressive enhancement
    http://www.flickr.com/photos/8040811@N06/3167877765
    Progressive enhancement
    

    View Slide

11. Content
    THREE STAGES
    Enhancement
    Leftovers
    

    View Slide

12. Content
    THREE STAGES
    Enhancement
    Leftovers
    

    View Slide

13. Content
    THREE STAGES
    Enhancement
    Leftovers
    

    View Slide

14. Content
    THREE STAGES
    Enhancement
    Leftovers
    

    View Slide

15. Content Enhancement Leftovers
    

    View Slide

16. Content Enhancement Leftovers
    

    View Slide

17. Time to screen
    Key performance metric
    Aiming for 1s on mobile
    Understand the network
    Understand the browser
    

    View Slide

18. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp
    

    View Slide

19. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp
    

    View Slide

20. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp
    

    View Slide

21. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp
    SSL Handshake
    

    View Slide

22. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp
    HTTP Redirect
    SSL Handshake
    

    View Slide

23. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp
    HTTP Redirect
    SSL Handshake
    

    View Slide

24. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp
    HTTP Redirect
    SSL Handshake
    

    View Slide

25. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp
    HTTP Redirect
    SSL Handshake
    

    View Slide

26. Time to screen: The network
    DNS lookup TCP connect HTTP request Server time HTTP resp
    HTTP Redirect
    SSL Handshake
    

    View Slide

27. Eliminate redirects
    Flush the document early
    Prefetch DNS
    But mostly, eliminate redirects
    Time to screen: The network
    

    View Slide

28. Time to screen: The browser
    Single threaded event loop
    1. Construct DOM tree from HTML
    2. Construct render tree from DOM tree and
    stylesheets
    3. Layout paint
    

    View Slide

29. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    

    View Slide

30. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    

    View Slide

31. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    

    View Slide

32. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    

    View Slide

33. Blocking: remote script
    
    

    View Slide

34. Blocking: inline script waiting on remote CSS
    
    <br/>var rules = window.styleSheets[0].cssRules;<br/>
    

    View Slide

35. Blocking: remote script (solution 1)
    
    
    

    View Slide

36. Blocking: remote script (solution 2)
    <br/>var script = document.createElement('script');<br/>script.src = "app.js";<br/>document.head.appendChild(script);<br/>
    

    View Slide

37. Blocking: remote script (solution 2)
    <br/>var script = document.createElement('script');<br/>script.src = "app.js";<br/>document.head.appendChild(script);<br/>
    HIDDEN FROM PRE-PARSER!
    

    View Slide

38. Blocking: remote script (solution 3)
    
    

    View Slide

39. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    

    View Slide

40. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    

    View Slide

41. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    

    View Slide

42. Time to screen: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    

    View Slide

43. Blocking: fetching stylesheets
    
    

    View Slide

44. Blocking: fetching stylesheets (solution)
    
    <br/>// Core styles in the head of the document.<br/>body {<br/>background: grey;<br/>color: #3A2FDE;<br/>}<br/>
    
    
    

    View Slide

45. Blocking: critical CSS generators
    https://github.com/pocketjoso/penthouse
    http://jonassebastianohlsson.com/
    criticalpathcssgenerator/
    https://github.com/filamentgroup/criticalcss
    

    View Slide

46. Recap: What blocks render?
    Remote scripts that need to be executed
    synchronously
    Inline script waiting on stylesheet fetch
    Stylesheet fetch for relevant media type/query
    

    View Slide

47. Recap: Fault isolation
    …or swimlaning
    Avoid synchronous dependencies
    Uptime is not binary
    

    View Slide

48. Blocking web fonts
    

    View Slide

49. Blocking web fonts
    

    View Slide

50. Blocking web fonts
    HTML
    CSS
    FONT
    FONT
    FONT
    START
    RENDER
    

    View Slide

51. Blocking web fonts
    HTML
    CSS
    FONT
    FONT
    FONT
    START
    RENDER
    TEXT
    RENDER
    

    View Slide

52. Blocking web fonts
    HTML
    CSS
    FONT
    FONT
    FONT
    START
    RENDER
    TEXT
    RENDER
    

    View Slide

53. Blocking web fonts
    FALLBACK BLOCKING BLOCKING +
    TIMEOUT
    Internet Explorer Safari
    Mobile Safari
    Chrome
    Opera (Blink)
    Firefox
    Opera (Presto)
    

    View Slide

54. Web font loader
    Provide control over font loading
    Remove fonts from the critical path
    Make cross-browser behaviour consistent
    

    View Slide

55. Web font loader
    
    

    View Slide

56. Web font loader
    
    

    View Slide

57. Web font loader
    
    var WebFontConfig = {
    custom: {
    families: ['Clarendon', 'Clarendon Bold'],
    urls: ['/myfonts.css'] }
    };
    
    

    View Slide

58. Web font loader
    
    
    

    View Slide

59. Web font loader
    
    
    h1 {
    font-family: georgia, serif;
    }
    .clarendon-loaded h1 {
    font-family: Clarendon, georgia, serif;
    }
    

    View Slide

60. CSS Font Loading Module
    document.fonts.load(‘Clarendon’).then(function () {
    document.documentElement.className += ‘clarendon-loaded';
    }
    h1 {
    font-family: georgia, serif;
    }
    .clarendon-loaded h1 {
    font-family: Clarendon, georgia, serif;
    }
    

    View Slide

61. http://
    

    View Slide

62. http://www.webpagetest.org/result/130908_K2_796/
    Median of nine test runs
    

    View Slide

63. http://www.webpagetest.org/result/130908_K2_796/
    Median of nine test runs
    iPhone 4, iOS 5.1
    

    View Slide

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

    View Slide

65. View Slide

66. Thank-you!
    lanyrd.com/sddxxk
    @andyhume
    Creative Commons Licensed
    Attribution, Non-Commercial, Share Alike
    cc
    

    View Slide