Building Resilient Frontend Systems - NationJS

Transcript

1. BUILDING RESILIENT FRONTEND SYSTEMS Ian Feather - BuzzFeed
3. RESILIENCE IS FUNCTION IN A HOSTILE ENVIRONMENT
4. HOW CAN OUR SYSTEMS FAIL? SECTION 1
5. 3RD PARTY AVAILABILITY
7. S3
8. S3 DYN DNS
9. S3 DYN DNS CDN
10. S3 DYN DNS CDN S3
11. 3RD PARTY AVAILABILITY
12. 3RD PARTY AVAILABILITY OUR OWN BUGS
14. 3RD PARTY AVAILABILITY OUR OWN BUGS
15. 3RD PARTY AVAILABILITY OUR OWN BUGS THE NETWORK
17. 1.04% OF REQUESTS FOR JAVASCRIPT WILL TIMEOUT
18. 13 MILLION PAGEVIEWS PER MONTH
19. 3RD PARTY AVAILABILITY OUR OWN BUGS THE NETWORK
20. 3RD PARTY AVAILABILITY OUR OWN BUGS THE NETWORK USERS’ PRIVILEGE
21. 8.9% OF USERS USE SOME FORM OF CONTENT BLOCKER
22. 3.84% WON’T SUCCESSFULLY DOWNLOAD OUR FONTS
23. 38 MILLION PAGEVIEWS PER MONTH
24. 3RD PARTY AVAILABILITY OUR OWN BUGS THE NETWORK USERS’ PRIVILEGE
25. HOPE FOR THE BEST
26. DESIGN FOR FAILURE
27. DESIGN FOR FAILURE SECTION 2
28. PRIORITIZE CRITICAL PARTS OF THE PAGE
29. User
30. User html
31. User html CSS JS IMAGES
32. User html IMAGES CSS JS IMAGES
33. User FONTS html IMAGES CSS JS IMAGES
34. User FONTS html IMAGES DATA (xhr) CSS JS IMAGES
35. User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES
36. User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES Images
37. User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES HTML
41. PRIORITIZE CRITICAL PARTS OF THE PAGE
42. PRIORITIZE CRITICAL PARTS OF THE PAGE MAKE ERRORS A FIRST CLASS CITIZEN
43. SOMETHING BROKE. SHOULD I TELL THEM?
45. ✘
46. ✘
49. PRIORITIZE CRITICAL PARTS OF THE PAGE MAKE ERRORS A FIRST CLASS CITIZEN
50. PRIORITIZE CRITICAL PARTS OF THE PAGE MAKE ERRORS A FIRST CLASS CITIZEN REPORT YOUR ERRORS
51. KNOWING IT’S BROKEN BEFORE TWITTER DOES
53. PRIORITIZE CRITICAL PARTS OF THE PAGE MAKE ERRORS A FIRST CLASS CITIZEN REPORT YOUR ERRORS
54. MITIGATE RISK SECTION 3
55. BUILD IN REDUNDANCY
56. Asset SERVER 1
57. Asset SERVER 1 www.asset-server-one.com/styles.css
58. Asset SERVER 1 www.asset-server-one.com/styles.css
59. ✖ Asset SERVER 1 www.asset-server-one.com/styles.css
60. ✖ Asset SERVER 1 Asset SERVER 2 www.asset-server-one.com/styles.css
61. ✖ Asset SERVER 1 Asset SERVER 2 www.asset-server-two.com/styles.css www.asset-server-one.com/styles.css
62. ✖ Asset SERVER 1 Asset SERVER 2 www.asset-server-two.com/styles.css www.asset-server-one.com/styles.css
63. Asset SERVER 1 Asset SERVER 2 Proxy service
64. Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service
65. Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service
66. Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service
67. CLOUD PROVIDER CDN STATIC ASSET SERVER FONT PROVIDER IMAGE SERVICE ADS PROVIDER AB TEST SERVICE
68. BUILD IN REDUNDANCY
69. BUILD IN REDUNDANCY SERVE STALE CONTENT
70. SERVER
71. SERVER CDN
72. SERVER CDN
73. SERVER CDN
74. SERVER CDN
75. SERVER CDN
76. SERVER CDN
77. CDN SERVER
78. CDN ✖ SERVER
79. CDN ✖ SERVICE WORKER SERVER
80. CDN ✖ SERVICE WORKER SERVER
81. BUILD IN REDUNDANCY SERVE STALE CONTENT
82. IN SUMMARY
83. IN SUMMARY
84. THANKS
85. INCREDIBLE
 PHOTOGRAPY VIA UNSPLASH NeONBRAND - https://unsplash.com/photos/plrlb68XPqI Marc Liu - https://unsplash.com/photos/Z8epsqHdYeM Amy Reed - https://unsplash.com/photos/49ZXvCLerUo Matt Le - https://unsplash.com/photos/SJSpo9hQf7s White wolf wizard - https://unsplash.com/photos/cttQw_azA40