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

Building Resilient Frontend Systems (All Day Hey)

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Ianfeather Ianfeather
April 30, 2018
Technology
570
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
150
Building Resilient Frontend Systems - NationJS
Avatar for Ianfeather ianfeather
0
220
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
AIのReact習熟度を測る
Avatar for uhyo uhyo
2
600
ACE-Step-1.5で見る 音楽生成AIのしくみと“破綻だけ直す”Retake機能の開発【zennfes spring 2026 登壇資料】
Avatar for asap personabb
1
500
失敗を資産に変えるClaude Code
Avatar for Shinya Saita shinyasaita
0
680
RAG を使わないという選択肢
Avatar for tatsutaka tatsutaka
1
250
200個のGitHubリポジトリを横断調査したかった
Avatar for Issei.Komori icck
0
130
気軽に使える"情報のハブ"としてのNotion活用　〜フロー情報の集積点 と、 Claude Code × Notion AI〜
Avatar for Ryo Okubo syucream
1
140
On-behalf-of Token exchange with AgentCore Identity
Avatar for iganin hironobuiga
2
220
人材育成分科会.pdf
Avatar for _awache _awache
4
270
脆弱性対応、どこで線を引くか
Avatar for ryoji miyamoto rymiyamoto
1
400
FinOps × AIエージェントで実現する コストインシデントの自動調査
Avatar for T.REX oasis1994liveforever
0
150
攻撃者視点で考えるDetection Engineering
Avatar for Ruslan Sayfiev cryptopeg
3
1.9k
SONiCの統計情報を取得したい
Avatar for SONiC Users Group Japan sonic
0
180

Featured

See All Featured
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.1k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
330
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
140
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
200
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
330
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
140
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k

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