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
110
Building Resilient Frontend Systems (All Day Hey)
ianfeather
1
500
Building Resilient Frontend Systems (@frontendne)
ianfeather
1
190
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
200
Other Decks in Technology
See All in Technology
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
120
PO初心者が考えた ”POらしさ”
nb_rady
0
150
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
2
540
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
4.1k
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.4k
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
110
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
6
4.8k
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.5k
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
410
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
220
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
The Invisible Side of Design
smashingmag
301
51k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The World Runs on Bad Software
bkeepers
PRO
69
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Making Projects Easy
brettharned
116
6.3k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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