Building Resilient Frontend Systems (@frontendne)

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.04% OF REQUESTS FOR JAVASCRIPT WILL TIMEOUT
30. 13 MILLION OF 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. 8.9% OF USERS USE SOME FORM OF CONTENT BLOCKER
34. 3.84% WON’T SUCCESSFULLY DOWNLOAD OUR FONTS
35. 38 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?
49. IT BROKE. SHOULD I TELL THEM?
50. IT BROKE. SHOULD I TELL THEM? ✘
51. IT BROKE. SHOULD I TELL THEM? ✘
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. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN REDUNDANCY
74. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN REDUNDANCY 3. SERVE STALE CONTENT
75. SERVER
76. SERVER CDN
77. SERVER CDN
78. SERVER CDN
79. SERVER CDN
80. SERVER CDN
81. SERVER CDN
82. CDN SERVER
83. CDN ✖ SERVER
84. CDN ✖ SERVICE WORKER SERVER
85. CDN ✖ SERVICE WORKER SERVER
86. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN REDUNDANCY 3. SERVE STALE CONTENT
87. LEARN FROM MISTAKES SECTION 4
88. LEARN FROM MISTAKES 1. POSTMORTEMS
89. BLAMELESS
90. HOW DID WE HANDLE IT AS A TEAM?
91. HOW COULD IT HAVE BEEN PREVENTED?
92. LEARN FROM MISTAKES 1. POSTMORTEMS
93. LEARN FROM MISTAKES 1. POSTMORTEMS 2. FIRE DRILLS & CHAOS TESTING
94. FIRE DRILLS ARE A SAFE SPACE TO PRACTICE
95. 1. LIMIT IMPACT 2. BE DECISIVE 3. DELEGATE EARLY
96. CHAOS TESTING
97. DELIBERATELY INTRODUCE FAILURE TO ENSURE YOUR SYSTEMS ARE RESILIENT
98. LEARN FROM MISTAKES 1. POSTMORTEMS 2. FIRE DRILLS & CHAOS TESTING
99. IN SUMMARY
100. KNOW WHAT’S IMPORTANT TO YOUR USERS
101. IDENTIFY HOW YOUR SYSTEM WILL DEGRADE
102. IDENTIFY POINTS OF FAILURE AND BUILD IN FAIL-SAFES
103. LEARN FROM EVERY FAILURE
104. THANK YOU IAN FEATHER - BUZZFEED - @IANFEATHER