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 Front End Systems (Smashingc...
Search
Ianfeather
September 10, 2018
Technology
0
120
Building Resilient Front End Systems (Smashingconf)
Ianfeather
September 10, 2018
Tweet
Share
More Decks by Ianfeather
See All by Ianfeather
Building Resilient Frontend Systems (All Day Hey)
ianfeather
1
510
Building Resilient Frontend Systems (@frontendne)
ianfeather
1
200
Testing Without Assertions
ianfeather
0
140
Building Resilient Frontend Systems - NationJS
ianfeather
0
210
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
Oracle Cloud Infrastructure:2025年8月度サービス・アップデート
oracle4engineer
PRO
0
170
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.2k
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
180
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
820
JavaScript 研修
recruitengineers
PRO
6
1.4k
Jaws-ug名古屋_LT資料_20250829
azoo2024
3
220
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
7.4k
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
260
【 LLMエンジニアがヒューマノイド開発に挑んでみた 】 - 第104回 Machine Learning 15minutes! Hybrid
soneo1127
0
260
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
450
制約理論(ToC)入門
recruitengineers
PRO
9
3.7k
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
240
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
339
57k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Six Lessons from altMBA
skipperchong
28
4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
510
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Typedesign – Prime Four
hannesfritz
42
2.8k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
BUILDING RESILIENT FRONTEND SYSTEMS Ian Feather - BuzzFeed - @ianfeather
None
RESILIENCE IS FUNCTION IN A HOSTILE ENVIRONMENT
GUARANTEE THE MOST BASIC LEVEL OF UX
UNDERSTAND YOUR TIERS OF USER EXPERIENCE
1. HOW OUR SYSTEMS FAIL 2. DESIGNING FOR FAILURE 3.
MITIGATING RISK 4. LEARNING
HOW OUR SYSTEMS FAIL SECTION 1
HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE
HTTPS IS TABLE STAKES
None
HTTPS IS TABLE STAKES
HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE
HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY
AVAILABILITY
CONTROL YOUR POINTS OF FAILURE
2016 DYN DNS 5 HRS AWS s3 9 HRS 2017
Fastly CDN 1 HR AWS S3 2 hrs
HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY
AVAILABILITY
HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY
AVAILABILITY 3. DEVELOPER ERROR
None
ADD SLIDE ABOUT SENTRY
SLACK ALERTS
KNOWING IT’S BROKEN BEFORE TWITTER DOES
None
None
THEORY VS PRACTICE
HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY
AVAILABILITY 3. DEVELOPER ERROR
HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY
AVAILABILITY 3. DEVELOPER ERROR 4. THE NETWORK
THEORY VS PRACTICE
THEORY VS PRACTICE
~1% OF REQUESTS FOR JAVASCRIPT WILL TIMEOUT
13 MILLION REQUESTS FOR JAVASCRIPT WILL TIMEOUT
HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY
AVAILABILITY 3. DEVELOPER ERROR 4. THE NETWORK
HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY
AVAILABILITY 3. DEVELOPER ERROR 4. THE NETWORK 5. USER’S PRIVILEGE
~9% OF OUR USERS USE SOME FORM OF CONTENT BLOCKER
~4% WON’T SUCCESSFULLY DOWNLOAD OUR FONTS
40 MILLION PAGEVIEWS PER MONTH
None
HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY
AVAILABILITY 3. DEVELOPER ERROR 4. THE NETWORK 5. USER’S PRIVILEGE
HOPE FOR THE BEST?
“technical glitches… cost the e-commerce giant an estimated $1.2 million
a minute”
DESIGN FOR FAILURE SECTION 2
DESIGN FOR FAILURE 1. PRIORITIZE CRITICAL PARTS OF THE PAGE
User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES
Images HTML
None
None
None
DESIGN FOR FAILURE 1. PRIORITIZE CRITICAL PARTS OF THE PAGE
DESIGN FOR FAILURE 1. PRIORITIZE CRITICAL PARTS OF THE PAGE
2. MAKE ERRORS A FIRST CLASS CITIZEN
None
SOMETHING BROKE! SHOULD I TELL THEM?
✘
IT BROKE. SHOULD I TELL THEM?
None
DESIGN FOR FAILURE 1. PRIORITIZE CRITICAL PARTS OF THE PAGE
2. MAKE ERRORS A FIRST CLASS CITIZEN
MITIGATE RISK SECTION 3
MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES
{ "name": “my-project", "version": "1.0.0", "dependencies": { "node-fetch": "~2.2.0", "node-fetch":
"^2.2.0", "node-fetch": "2.2.0" } }
CONTROL YOUR POINTS OF FAILURE
None
MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES
MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN
REDUNDANCY
HAVE TWO OF EVERYTHING
✖ 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.com/styles.css Proxy service
CLOUD PROVIDER CDN STATIC ASSET SERVER IMAGE SERVICE POLYFILL SERVICE
AB TEST SERVICE FONT PROVIDER 2 X ?
PLAN Z
MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN
REDUNDANCY
MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN
REDUNDANCY 3. SERVE STALE CONTENT
SERVER CDN
CDN ✖ SERVICE WORKER SERVER
MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN
REDUNDANCY 3. SERVE STALE CONTENT
LEARN FROM MISTAKES SECTION 4
LEARN FROM MISTAKES 1. POSTMORTEMS
BLAMELESS
HOW DID WE HANDLE IT AS A TEAM?
HOW COULD IT HAVE BEEN PREVENTED?
LEARN FROM MISTAKES 1. POSTMORTEMS
LEARN FROM MISTAKES 1. POSTMORTEMS 2. FIRE DRILLS & CHAOS
TESTING
FIRE DRILLS ARE A SAFE SPACE TO PRACTICE
1. LIMIT IMPACT 2. DIRECT COMMUNICATIONS 3. DELEGATE EARLY
CHAOS TESTING
DELIBERATELY INTRODUCE FAILURE TO ENSURE YOUR SYSTEMS ARE RESILIENT
LEARN FROM MISTAKES 1. POSTMORTEMS 2. FIRE DRILLS & CHAOS
TESTING
IN SUMMARY
KNOW WHAT’S IMPORTANT TO YOUR USERS
IDENTIFY HOW YOUR SYSTEM WILL DEGRADE
IDENTIFY POINTS OF FAILURE AND BUILD IN FAIL-SAFES
LEARN FROM EVERY FAILURE
THANK YOU IAN FEATHER - BUZZFEED - @IANFEATHER