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 (All Day Hey)
Search
Ianfeather
April 30, 2018
Technology
1
480
Building Resilient Frontend Systems (All Day Hey)
Ianfeather
April 30, 2018
Tweet
Share
More Decks by Ianfeather
See All by Ianfeather
Building Resilient Front End Systems (Smashingconf)
ianfeather
0
100
Building Resilient Frontend Systems (@frontendne)
ianfeather
1
180
Testing Without Assertions
ianfeather
0
130
Building Resilient Frontend Systems - NationJS
ianfeather
0
190
Establishing Performance Contexts
ianfeather
0
110
Reducing complexity with a Component API
ianfeather
0
160
Web Fonts and Performance
ianfeather
0
170
Other Decks in Technology
See All in Technology
Postman と API セキュリティ / Postman and API Security
yokawasa
0
200
Amazon SageMaker Unified Studio(Preview)、Lakehouse と Amazon S3 Tables
ishikawa_satoru
0
150
成果を出しながら成長する、アウトプット駆動のキャッチアップ術 / Output-driven catch-up techniques to grow while producing results
aiandrox
0
180
watsonx.ai Dojo #5 ファインチューニングとInstructLAB
oniak3ibm
PRO
0
160
How to be an AWS Community Builder | 君もAWS Community Builderになろう!〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.8k
CustomCopを使ってMongoidのコーディングルールを整えてみた
jinoketani
0
220
kargoの魅力について伝える
magisystem0408
0
200
Snykで始めるセキュリティ担当者とSREと開発者が楽になる脆弱性対応 / Getting started with Snyk Vulnerability Response
yamaguchitk333
2
180
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
4
550
Microsoft Azure全冠になってみた ~アレを使い倒した者が試験を制す!?~/Obtained all Microsoft Azure certifications Those who use "that" to the full will win the exam! ?
yuj1osm
1
110
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
260
Wvlet: A New Flow-Style Query Language For Functional Data Modeling and Interactive Data Analysis - Trino Summit 2024
xerial
1
110
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
The Pragmatic Product Professional
lauravandoore
32
6.3k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
Building Your Own Lightsaber
phodgson
103
6.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Designing Experiences People Love
moore
138
23k
For a Future-Friendly Web
brad_frost
175
9.4k
Transcript
BUILDING RESILIENT FRONTEND SYSTEMS Ian Feather - BuzzFeed - @ianfeather
None
RESILIENCE IS FUNCTION IN A HOSTILE ENVIRONMENT
UNDERSTAND YOUR TIERS OF USER EXPERIENCE
GUARANTEE THE MOST BASIC LEVEL OF UX
1. HOW OUR SYSTEMS FAIL 2. DESIGNING FOR FAILURE 3.
MITIGATING RISK 4. LEARNING FROM FAILURE
HOW OUR SYSTEMS FAIL SECTION 1
HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE
HTTPS IS TABLE STAKES
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
2016 DYN DNS 5 HRS
2016 DYN DNS 5 HRS AWS s3 9 HRS 2017
2016 DYN DNS 5 HRS AWS s3 9 HRS 2017
Fastly CDN 1 HR
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
ADD SLIDE ABOUT SENTRY
SLACK ALERTS
KNOWING IT’S BROKEN BEFORE TWITTER DOES
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
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?
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
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
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
SOMETHING BROKE! SHOULD I TELL THEM?
None
✘
✘
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
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 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
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
SERVER CDN
SERVER CDN
SERVER CDN
SERVER CDN
SERVER CDN
SERVER CDN
CDN SERVER
CDN ✖ SERVER
CDN ✖ SERVICE WORKER SERVER
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. BE DECISIVE 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