Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Resilient Frontend Systems (All Day Hey)

Avatar for Ianfeather Ianfeather
April 30, 2018
Technology
580
1

Building Resilient Frontend Systems (All Day Hey)

Avatar for Ianfeather

Ianfeather

April 30, 2018

More Decks by Ianfeather

See All by Ianfeather
Building Resilient Front End Systems (Smashingconf)
Avatar for Ianfeather ianfeather
0
140
Building Resilient Frontend Systems (@frontendne)
Avatar for Ianfeather ianfeather
1
210
Testing Without Assertions
Avatar for Ianfeather ianfeather
0
160
Building Resilient Frontend Systems - NationJS
Avatar for Ianfeather ianfeather
0
230
Establishing Performance Contexts
Avatar for Ianfeather ianfeather
0
140
Reducing complexity with a Component API
Avatar for Ianfeather ianfeather
0
210
Web Fonts and Performance
Avatar for Ianfeather ianfeather
0
240

Other Decks in Technology

See All in Technology
Genie Codeハンズオン基礎編
Avatar for Takaaki Yayoi taka_aki
1
130
FPGAが実現する遠方宇宙の高空間分解能天体撮影 -大型地上望遠鏡の視力を補正する「補償光学」とは？-
Avatar for 高橋光明 / Mitsuaki Takahashi komei_mt
0
280
トヨタ⽣産⽅式(TPS)⼊⾨
Avatar for Recruit recruitengineers
PRO
3
960
侵入は突然に 〜 IoTマルウェアと悪用される家庭の機器 ～ / When Intrusion Strikes: IoT Malware and the Abuse of Home Devices
Avatar for NTT docomo Business nttcom
0
5.9k
ガバメント AI 源内を地方自治体は活用できるのか 可能性と課題、期待について
Avatar for takeda_h takeda_h
2
440
モダンフロントエンド 開発研修
Avatar for Recruit recruitengineers
PRO
4
750
DatadogのBits Chatが開発組織にもたらしたもの / What Bits Chat Has Brought Us
Avatar for SMS tech sms_tech
1
280
私がブラウザを自作したくなった理由
Avatar for Miyamoto Naoyuki supurazako
1
250
AWS ネットワーク構築でハマった（ハマりかけた） 5選とそこから得た教訓
Avatar for nagisa_53 nagisa53
4
250
20260807_第6回_関東kaggler会LT_claw系bot xangiと始める、"寂しくない" kaggle
Avatar for suguuuuuすぐー sugupoko
0
320
Bits Agent Builder の⼊⾨と活⽤事例
Avatar for 株式会社ヌーラボ nulabinc
PRO
0
180
Sets in Go
Avatar for Luciano Ramalho ramalho
1
960

Featured

See All Featured
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
460
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
940
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
530
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
12k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.2k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
420
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
470
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
470
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
400
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k

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% 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
  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. None

  50. ✘

  51. ✘

  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. 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