Building Resilient Frontend Systems (All Day Hey)

Transcript

1. BUILDING RESILIENT FRONTEND SYSTEMS Ian Feather - BuzzFeed - @ianfeather
3. RESILIENCE IS FUNCTION IN A HOSTILE ENVIRONMENT
4. UNDERSTAND YOUR TIERS OF USER EXPERIENCE
5. GUARANTEE THE MOST BASIC LEVEL OF UX
6. 1. HOW OUR SYSTEMS FAIL 2. DESIGNING FOR FAILURE 3. MITIGATING RISK 4. LEARNING FROM FAILURE
7. HOW OUR SYSTEMS FAIL SECTION 1
8. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE
9. HTTPS IS TABLE STAKES
10. HTTPS IS TABLE STAKES
11. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE
12. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY AVAILABILITY
13. CONTROL YOUR POINTS OF FAILURE
15. 2016 DYN DNS 5 HRS
16. 2016 DYN DNS 5 HRS AWS s3 9 HRS 2017
17. 2016 DYN DNS 5 HRS AWS s3 9 HRS 2017 Fastly CDN 1 HR
18. 2016 DYN DNS 5 HRS AWS s3 9 HRS 2017 Fastly CDN 1 HR AWS S3 2 hrs
19. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY AVAILABILITY
20. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY AVAILABILITY 3. DEVELOPER ERROR
21. ADD SLIDE ABOUT SENTRY
22. SLACK ALERTS
23. KNOWING IT’S BROKEN BEFORE TWITTER DOES
24. THEORY VS PRACTICE
25. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY AVAILABILITY 3. DEVELOPER ERROR
26. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY AVAILABILITY 3. DEVELOPER ERROR 4. THE NETWORK
27. THEORY VS PRACTICE
28. THEORY VS PRACTICE
29. ~1% OF REQUESTS FOR JAVASCRIPT WILL TIMEOUT
30. 13 MILLION REQUESTS FOR JAVASCRIPT WILL TIMEOUT
31. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY AVAILABILITY 3. DEVELOPER ERROR 4. THE NETWORK
32. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY AVAILABILITY 3. DEVELOPER ERROR 4. THE NETWORK 5. USER’S PRIVILEGE
33. ~9% OF OUR USERS USE SOME FORM OF CONTENT BLOCKER
34. ~4% WON’T SUCCESSFULLY DOWNLOAD OUR FONTS
35. 40 MILLION PAGEVIEWS PER MONTH
36. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY AVAILABILITY 3. DEVELOPER ERROR 4. THE NETWORK 5. USER’S PRIVILEGE
37. HOPE FOR THE BEST?
38. DESIGN FOR FAILURE SECTION 2
39. DESIGN FOR FAILURE 1. PRIORITIZE CRITICAL PARTS OF THE PAGE
40. User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES
41. User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES Images
42. User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES HTML
46. DESIGN FOR FAILURE 1. PRIORITIZE CRITICAL PARTS OF THE PAGE
47. DESIGN FOR FAILURE 1. PRIORITIZE CRITICAL PARTS OF THE PAGE 2. MAKE ERRORS A FIRST CLASS CITIZEN
48. SOMETHING BROKE! SHOULD I TELL THEM?
50. ✘
51. ✘
52. IT BROKE. SHOULD I TELL THEM?
54. DESIGN FOR FAILURE 1. PRIORITIZE CRITICAL PARTS OF THE PAGE 2. MAKE ERRORS A FIRST CLASS CITIZEN
55. MITIGATE RISK SECTION 3
56. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES
57. CONTROL YOUR POINTS OF FAILURE
59. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES
60. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN REDUNDANCY
61. HAVE TWO OF EVERYTHING
62. Asset SERVER 1
63. Asset SERVER 1 www.asset-server-one.com/styles.css
64. Asset SERVER 1 www.asset-server-one.com/styles.css
65. ✖ Asset SERVER 1 www.asset-server-one.com/styles.css
66. ✖ Asset SERVER 1 Asset SERVER 2 www.asset-server-one.com/styles.css
67. ✖ Asset SERVER 1 Asset SERVER 2 www.asset-server-two.com/styles.css www.asset-server-one.com/styles.css
68. ✖ Asset SERVER 1 Asset SERVER 2 www.asset-server-two.com/styles.css www.asset-server-one.com/styles.css
69. Asset SERVER 1 Asset SERVER 2 Proxy service
70. Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service
71. Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service
72. Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service
73. PLAN Z
74. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN REDUNDANCY
75. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN REDUNDANCY 3. SERVE STALE CONTENT
76. SERVER
77. SERVER CDN
78. SERVER CDN
79. SERVER CDN
80. SERVER CDN
81. SERVER CDN
82. SERVER CDN
83. CDN SERVER
84. CDN ✖ SERVER
85. CDN ✖ SERVICE WORKER SERVER
86. CDN ✖ SERVICE WORKER SERVER
87. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN REDUNDANCY 3. SERVE STALE CONTENT
88. LEARN FROM MISTAKES SECTION 4
89. LEARN FROM MISTAKES 1. POSTMORTEMS
90. BLAMELESS
91. HOW DID WE HANDLE IT AS A TEAM?
92. HOW COULD IT HAVE BEEN PREVENTED?
93. LEARN FROM MISTAKES 1. POSTMORTEMS
94. LEARN FROM MISTAKES 1. POSTMORTEMS 2. FIRE DRILLS & CHAOS TESTING
95. FIRE DRILLS ARE A SAFE SPACE TO PRACTICE
96. 1. LIMIT IMPACT 2. BE DECISIVE 3. DELEGATE EARLY
97. CHAOS TESTING
98. DELIBERATELY INTRODUCE FAILURE TO ENSURE YOUR SYSTEMS ARE RESILIENT
99. LEARN FROM MISTAKES 1. POSTMORTEMS 2. FIRE DRILLS & CHAOS TESTING
100. IN SUMMARY
101. KNOW WHAT’S IMPORTANT TO YOUR USERS
102. IDENTIFY HOW YOUR SYSTEM WILL DEGRADE
103. IDENTIFY POINTS OF FAILURE AND BUILD IN FAIL-SAFES
104. LEARN FROM EVERY FAILURE
105. THANK YOU IAN FEATHER - BUZZFEED - @IANFEATHER