Building Resilient Front End Systems (Smashingconf)

Transcript

1. BUILDING RESILIENT FRONTEND SYSTEMS Ian Feather - BuzzFeed - @ianfeather
3. RESILIENCE IS FUNCTION IN A HOSTILE ENVIRONMENT
4. GUARANTEE THE MOST BASIC LEVEL OF UX
5. UNDERSTAND YOUR TIERS OF USER EXPERIENCE
6. 1. HOW OUR SYSTEMS FAIL 2. DESIGNING FOR FAILURE 3. MITIGATING RISK 4. LEARNING
7. HOW OUR SYSTEMS FAIL SECTION 1
8. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE
9. HTTPS IS TABLE STAKES
11. HTTPS IS TABLE STAKES
12. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE
13. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY AVAILABILITY
14. CONTROL YOUR POINTS OF FAILURE
15. 2016 DYN DNS 5 HRS AWS s3 9 HRS 2017 Fastly CDN 1 HR AWS S3 2 hrs
16. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY AVAILABILITY
17. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY AVAILABILITY 3. DEVELOPER ERROR
19. ADD SLIDE ABOUT SENTRY
20. SLACK ALERTS
21. 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
37. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY AVAILABILITY 3. DEVELOPER ERROR 4. THE NETWORK 5. USER’S PRIVILEGE
38. HOPE FOR THE BEST?
39. “technical glitches… cost the e-commerce giant an estimated $1.2 million a minute”
40. DESIGN FOR FAILURE SECTION 2
41. DESIGN FOR FAILURE 1. PRIORITIZE CRITICAL PARTS OF THE PAGE
42. User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES 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
49. SOMETHING BROKE! SHOULD I TELL THEM?
50. ✘
51. IT BROKE. SHOULD I TELL THEM?
53. DESIGN FOR FAILURE 1. PRIORITIZE CRITICAL PARTS OF THE PAGE 2. MAKE ERRORS A FIRST CLASS CITIZEN
54. MITIGATE RISK SECTION 3
55. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES
56. { "name": “my-project", "version": "1.0.0", "dependencies": { "node-fetch": "~2.2.0", "node-fetch": "^2.2.0", "node-fetch": "2.2.0" } }
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 Asset SERVER 2 www.asset-server-two.com/styles.css www.asset-server-one.com/styles.css
63. Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service
64. CLOUD PROVIDER CDN STATIC ASSET SERVER IMAGE SERVICE POLYFILL SERVICE AB TEST SERVICE FONT PROVIDER 2 X ?
65. PLAN Z
66. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN REDUNDANCY
67. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN REDUNDANCY 3. SERVE STALE CONTENT
68. SERVER CDN
69. CDN ✖ SERVICE WORKER SERVER
70. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN REDUNDANCY 3. SERVE STALE CONTENT
71. LEARN FROM MISTAKES SECTION 4
72. LEARN FROM MISTAKES 1. POSTMORTEMS
73. BLAMELESS
74. HOW DID WE HANDLE IT AS A TEAM?
75. HOW COULD IT HAVE BEEN PREVENTED?
76. LEARN FROM MISTAKES 1. POSTMORTEMS
77. LEARN FROM MISTAKES 1. POSTMORTEMS 2. FIRE DRILLS & CHAOS TESTING
78. FIRE DRILLS ARE A SAFE SPACE TO PRACTICE
79. 1. LIMIT IMPACT 2. DIRECT COMMUNICATIONS 3. DELEGATE EARLY
80. CHAOS TESTING
81. DELIBERATELY INTRODUCE FAILURE TO ENSURE YOUR SYSTEMS ARE RESILIENT
82. LEARN FROM MISTAKES 1. POSTMORTEMS 2. FIRE DRILLS & CHAOS TESTING
83. IN SUMMARY
84. KNOW WHAT’S IMPORTANT TO YOUR USERS
85. IDENTIFY HOW YOUR SYSTEM WILL DEGRADE
86. IDENTIFY POINTS OF FAILURE AND BUILD IN FAIL-SAFES
87. LEARN FROM EVERY FAILURE
88. THANK YOU IAN FEATHER - BUZZFEED - @IANFEATHER