Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building Resilient Frontend Systems - NationJS
Search
Ianfeather
December 02, 2017
Technology
0
210
Building Resilient Frontend Systems - NationJS
Ianfeather
December 02, 2017
Tweet
Share
More Decks by Ianfeather
See All by Ianfeather
Building Resilient Front End Systems (Smashingconf)
ianfeather
0
120
Building Resilient Frontend Systems (All Day Hey)
ianfeather
1
520
Building Resilient Frontend Systems (@frontendne)
ianfeather
1
200
Testing Without Assertions
ianfeather
0
140
Establishing Performance Contexts
ianfeather
0
130
Reducing complexity with a Component API
ianfeather
0
200
Web Fonts and Performance
ianfeather
0
210
Other Decks in Technology
See All in Technology
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
220
GopherCon Tour 概略
logica0419
2
190
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
140
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
2.5k
実装で解き明かす並行処理の歴史
zozotech
PRO
1
420
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
190
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.5k
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
310
VCC 2025 Write-up
bata_24
0
180
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
260
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
280
KMP の Swift export
kokihirokawa
0
330
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Designing for humans not robots
tammielis
254
25k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Raft: Consensus for Rubyists
vanstee
139
7.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Being A Developer After 40
akosma
91
590k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
A designer walks into a library…
pauljervisheath
209
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Optimizing for Happiness
mojombo
379
70k
Practical Orchestrator
shlominoach
190
11k
Transcript
BUILDING RESILIENT FRONTEND SYSTEMS Ian Feather - BuzzFeed
None
RESILIENCE IS FUNCTION IN A HOSTILE ENVIRONMENT
HOW CAN OUR SYSTEMS FAIL? SECTION 1
3RD PARTY AVAILABILITY
None
S3
S3 DYN DNS
S3 DYN DNS CDN
S3 DYN DNS CDN S3
3RD PARTY AVAILABILITY
3RD PARTY AVAILABILITY OUR OWN BUGS
None
3RD PARTY AVAILABILITY OUR OWN BUGS
3RD PARTY AVAILABILITY OUR OWN BUGS THE NETWORK
None
1.04% OF REQUESTS FOR JAVASCRIPT WILL TIMEOUT
13 MILLION PAGEVIEWS PER MONTH
3RD PARTY AVAILABILITY OUR OWN BUGS THE NETWORK
3RD PARTY AVAILABILITY OUR OWN BUGS THE NETWORK USERS’ PRIVILEGE
8.9% OF USERS USE SOME FORM OF CONTENT BLOCKER
3.84% WON’T SUCCESSFULLY DOWNLOAD OUR FONTS
38 MILLION PAGEVIEWS PER MONTH
3RD PARTY AVAILABILITY OUR OWN BUGS THE NETWORK USERS’ PRIVILEGE
HOPE FOR THE BEST
DESIGN FOR FAILURE
DESIGN FOR FAILURE SECTION 2
PRIORITIZE CRITICAL PARTS OF THE PAGE
User
User html
User html CSS JS IMAGES
User html IMAGES CSS JS IMAGES
User FONTS html IMAGES CSS JS IMAGES
User FONTS html IMAGES DATA (xhr) CSS JS IMAGES
User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES
User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES
Images
User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES
HTML
None
None
None
PRIORITIZE CRITICAL PARTS OF THE PAGE
PRIORITIZE CRITICAL PARTS OF THE PAGE MAKE ERRORS A FIRST
CLASS CITIZEN
SOMETHING BROKE. SHOULD I TELL THEM?
None
✘
✘
None
None
PRIORITIZE CRITICAL PARTS OF THE PAGE MAKE ERRORS A FIRST
CLASS CITIZEN
PRIORITIZE CRITICAL PARTS OF THE PAGE MAKE ERRORS A FIRST
CLASS CITIZEN REPORT YOUR ERRORS
KNOWING IT’S BROKEN BEFORE TWITTER DOES
None
PRIORITIZE CRITICAL PARTS OF THE PAGE MAKE ERRORS A FIRST
CLASS CITIZEN REPORT YOUR ERRORS
MITIGATE RISK SECTION 3
BUILD IN REDUNDANCY
Asset SERVER 1
Asset SERVER 1 www.asset-server-one.com/styles.css
Asset SERVER 1 www.asset-server-one.com/styles.css
✖ Asset SERVER 1 www.asset-server-one.com/styles.css
✖ Asset SERVER 1 Asset SERVER 2 www.asset-server-one.com/styles.css
✖ Asset SERVER 1 Asset SERVER 2 www.asset-server-two.com/styles.css www.asset-server-one.com/styles.css
✖ Asset SERVER 1 Asset SERVER 2 www.asset-server-two.com/styles.css www.asset-server-one.com/styles.css
Asset SERVER 1 Asset SERVER 2 Proxy service
Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service
Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service
Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service
CLOUD PROVIDER CDN STATIC ASSET SERVER FONT PROVIDER IMAGE SERVICE
ADS PROVIDER AB TEST SERVICE
BUILD IN REDUNDANCY
BUILD IN REDUNDANCY SERVE STALE CONTENT
SERVER
SERVER CDN
SERVER CDN
SERVER CDN
SERVER CDN
SERVER CDN
SERVER CDN
CDN SERVER
CDN ✖ SERVER
CDN ✖ SERVICE WORKER SERVER
CDN ✖ SERVICE WORKER SERVER
BUILD IN REDUNDANCY SERVE STALE CONTENT
IN SUMMARY
IN SUMMARY
THANKS
INCREDIBLE PHOTOGRAPY VIA UNSPLASH NeONBRAND - https://unsplash.com/photos/plrlb68XPqI Marc Liu -
https://unsplash.com/photos/Z8epsqHdYeM Amy Reed - https://unsplash.com/photos/49ZXvCLerUo Matt Le - https://unsplash.com/photos/SJSpo9hQf7s White wolf wizard - https://unsplash.com/photos/cttQw_azA40