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
2. Sunday, May 11, 14
3. Sunday, May 11, 14
4. Sunday, May 11, 14
5. Sunday, May 11, 14
6. Sunday, May 11, 14
7. Sunday, May 11, 14
8. Sunday, May 11, 14
9. waiting for fonts.com Sunday, May 11, 14
10. http://www.flickr.com/photos/the_jorr/325224175/ Unreliable Sunday, May 11, 14
11. http://www.flickr.com/photos/vpickering/6824364286/ Resilient Sunday, May 11, 14
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
13. Content THREE STAGES Enhancement Leftovers Sunday, May 11, 14
14. Content THREE STAGES Enhancement Leftovers Sunday, May 11, 14
15. Content THREE STAGES Enhancement Leftovers Sunday, May 11, 14
16. Content THREE STAGES Enhancement Leftovers Sunday, May 11, 14
17. Content Enhancement Leftovers Sunday, May 11, 14
18. Content Enhancement Leftovers Sunday, May 11, 14
19. Content Enhancement Leftovers Sunday, May 11, 14
20. Time to screen Sunday, May 11, 14
21. The network Sunday, May 11, 14
22. The network DNS lookup time Connect time Redirect time SSL handshake time Time to first byte Sunday, May 11, 14
23. The browser Sunday, May 11, 14
24. The browser Single threaded event loop Construct DOM tree from HTML Construct render tree from DOM tree and stylesheets Sunday, May 11, 14
25. What blocks DOM construction? Except: Sunday, May 11, 14
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
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
28. What blocks render tree? Sunday, May 11, 14
29. What blocks render tree? Blocked by fetching stylesheets Sunday, May 11, 14
30. HTML pre-parser HTML JS HTML Sunday, May 11, 14
31. HTML pre-parser HTML JS HTML Sunday, May 11, 14
32. Blocking JavaScript <script> var script = document.createElement('script'); script.src = "app.js"; document.head.appendChild(script); </script> Sunday, May 11, 14
33. Blocking JavaScript <script> var script = document.createElement('script'); script.src = "app.js"; document.head.appendChild(script); </script> NO PRE-PARSER! Sunday, May 11, 14
34. Blocking JavaScript <script src="app.js" async defer></script> Sunday, May 11, 14
35. Blocking web fonts Sunday, May 11, 14
36. HTML CSS Blocking web fonts FONT FONT FONT START RENDER Sunday, May 11, 14
37. HTML CSS Blocking web fonts FONT FONT FONT START RENDER TEXT RENDER Sunday, May 11, 14
38. HTML CSS Blocking web fonts FONT FONT FONT START RENDER TEXT RENDER Sunday, May 11, 14
39. FALLBACK BLOCKING BLOCKING + TIMEOUT Internet Explorer Safari Mobile Safari Chrome Opera (Blink) Firefox Opera (Presto) Blocking web fonts Sunday, May 11, 14
40. Web font loader Provide control over font loading Remove fonts from the critical path Make cross-browser behaviour consistent Sunday, May 11, 14
41. Web font loader <link href="/myfonts.css" rel="stylesheet" /> Sunday, May 11, 14
42. Web font loader <link href="/myfonts.css" rel="stylesheet" /> Sunday, May 11, 14
43. Web font loader <link href="/myfonts.css" rel="stylesheet" /> var WebFontConfig = { custom: { families: ['Clarendon', 'Clarendon Bold'], urls: ['/myfonts.css'] } }; Sunday, May 11, 14
44. 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
45. Web font loader <body class="clarendon-loading"> <body class="clarendon-loaded"> Sunday, May 11, 14
46. 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
47. Blocking CSS Sunday, May 11, 14
48. http://www.webpagetest.org/result/130908_K2_796/7/details/ Sunday, May 11, 14
49. http://www.webpagetest.org/result/130908_K2_796/ Sunday, May 11, 14
50. http://www.webpagetest.org/result/130908_K2_796/ Median of nine test runs Sunday, May 11, 14
51. http://www.webpagetest.org/result/130908_K2_796/ Median of nine test runs iPhone 4, iOS 5.1 Sunday, May 11, 14
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
53. Sunday, May 11, 14
54. Thank-you! http://lanyrd.com/scyqxd @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike cc Sunday, May 11, 14