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
470
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
150
Web Fonts and Performance
ianfeather
0
160
Other Decks in Technology
See All in Technology
エムスリー全チーム紹介資料 / Introduction of M3 All Teams
m3_engineering
1
320
とある事業会社にとっての Kaggler の魅力
hakubishin3
2
570
Low Latency Join Method for Distributed DBMS
yugabytejapan
0
180
AWSの初級者向けAI・ML資格『AWS Certified AI Practitioner』の傾向と対策/So You Want To Pass AWS Certified AI Practitioner
quiver
0
450
テストを楽に書きたい
tomorrowkey
1
180
LeSSはスクラムではない!?LeSSにおけるスクラムマスターの振る舞い方とは / Scrum Master Behavior in LeSS
toma_sm
0
210
入門 KRR
donkomura
0
110
Databricks Appのご紹介
databricksjapan
0
330
ガバメントクラウド開発と変化と成長する組織 / Organizational change and growth in developing a government cloud
kazeburo
4
810
【shownet.conf_】コンピューティング資源を統合した分散コンテナ基盤の進化
shownet
PRO
0
420
【㈱アイモバイル】エンジニア向け会社説明資料
imobile
0
470
Case Study: Concurrent Counting
ennael
PRO
0
120
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.5k
The World Runs on Bad Software
bkeepers
PRO
65
11k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
The Invisible Side of Design
smashingmag
297
50k
Practical Orchestrator
shlominoach
186
10k
Building Better People: How to give real-time feedback that sticks.
wjessup
362
19k
Mobile First: as difficult as doing things right
swwweet
222
8.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Scaling GitHub
holman
458
140k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
How to Ace a Technical Interview
jacobian
275
23k
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