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
510
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
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
yanzm
0
160
Postman MCP 関連機能アップデート / Postman MCP feature updates
yokawasa
0
120
Understanding Go GC #coefl_go_jp
bengo4com
0
1.1k
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
[OCI Skill Mapping] AWSユーザーのためのOCI(2025年8月20日開催)
oracle4engineer
PRO
2
130
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
aeonpeople
1
220
マイクロモビリティシェアサービスを支える プラットフォームアーキテクチャ
grimoh
1
190
Goss: New Production-Ready Go Binding for Faiss #coefl_go_jp
bengo4com
0
1.1k
広島銀行におけるAWS活用の取り組みについて
masakimori
0
120
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
9
2.1k
LLMエージェント時代に適応した開発フロー
hiragram
1
380
第64回コンピュータビジョン勉強会@関東(後編)
tsukamotokenji
0
220
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Being A Developer After 40
akosma
90
590k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Speed Design
sergeychernyshev
32
1.1k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Producing Creativity
orderedlist
PRO
347
40k
GitHub's CSS Performance
jonrohan
1031
460k
Site-Speed That Sticks
csswizardry
10
780
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