Building Resilient Frontend Systems (@frontendne)

649e3d33ce29a5e6bb4ff3025c6aaffa?s=47 Ianfeather
April 06, 2018
1
100

Building Resilient Frontend Systems (@frontendne)

649e3d33ce29a5e6bb4ff3025c6aaffa?s=128

Ianfeather

April 06, 2018
Tweet

More Decks by Ianfeather

See All by Ianfeather
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
37
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
1
190
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
85
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
160
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
26
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
54
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
30

Featured

See All Featured
79acae287842acf29084005533a7fb3b?s=48 hursman
105
9.2k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
12
4k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
92
2.9k
245cee81a9c424266e5e401d844ea881?s=48 lara
15
2.5k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
PRO
40
4.4k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
167
6.9k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
447
36k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
2
1.2k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
255
19k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
317
18k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
651
110k

Transcript

  1. BUILDING RESILIENT FRONTEND SYSTEMS Ian Feather - BuzzFeed - @ianfeather

  2. None

  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

  14. 2016

  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
  43. None
  44. None
  45. None

  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?

  53. None

  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

  58. None

  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