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

Building Resilient Frontend Systems (All Day Hey)

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
2026年6月23日 Syncable Tech + Start Python Club にて
Avatar for Kimikazu Kato hamukazu
0
140
Bucharest Tech Week 2026 - Guardians of the Cloud-Native Galaxy
Avatar for Eric Deandrea edeandrea
PRO
0
130
人材育成分科会.pdf
Avatar for _awache _awache
4
300
いまさら聞けない「仕様駆動開発入門」 〜AI活用時代の開発プロセスを考える〜
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
2
160
小さく始める AI 活用推進 ― 日経電子版 Web チームの事例/nikkei-tech-talk47
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
310
SONiCの統計情報を取得したい
Avatar for SONiC Users Group Japan sonic
0
240
データサイエンスを価値につなげるプロジェクト設計 〜 DS一年目が現場で得た気づき 〜
Avatar for Yusei Doi ysd113
1
290
GitHub Copilot 最新アップデート – 「一歩先」の実践活用術
Avatar for zhang.william moulongzhang
5
1.5k
SONiCのLinuxベースを活かしたZabbix監視
Avatar for SONiC Users Group Japan sonic
0
240
AWS Security Agent といっしょに脅威モデリングをやってみよう
Avatar for amarelo_n24 amarelo_n24
1
190
【Cyber-sec+】経営層を"動かす"ための考え方
Avatar for Hisashi Hibino hssh2_bin
0
200
【2026年版】 ベクトル検索とEmbedding最前線
Avatar for Tomoko Uchida mocobeta
23
6k

Featured

See All Featured
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
150
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
210
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
430
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.8k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
400
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
8.1k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
56k

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