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
200
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
490
Building Resilient Frontend Systems (@frontendne)
ianfeather
1
190
Testing Without Assertions
ianfeather
0
130
Establishing Performance Contexts
ianfeather
0
120
Reducing complexity with a Component API
ianfeather
0
180
Web Fonts and Performance
ianfeather
0
190
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile
hr01
0
62k
20250326_管理ツールの権限管理で改善したこと
sasata299
1
550
問題解決に役立つ数理工学
recruitengineers
PRO
8
2.4k
Zabbixチョットデキルとは!?
kujiraitakahiro
0
110
SREが実現する開発者体験の革新
sansantech
PRO
0
100
ウェブアクセシビリティとは
lycorptech_jp
PRO
0
340
ソフトウェア開発現代史: なぜ日本のソフトウェア開発は「滝」なのか?製造業の成功体験とのギャップ #jassttokyo
takabow
2
1.8k
Agile TPIを活用した品質改善事例
tomasagi
0
480
AWS CDK コントリビュート はじめの一歩
yendoooo
1
130
日本MySQLユーザ会ができるまで / making MyNA
tmtms
1
410
SpannerとAurora DSQLの同時実行制御の違いに想いを馳せる
masakikato5
0
580
アプリケーション固有の「ロジックの脆弱性」を防ぐ開発者のためのセキュリティ観点
flatt_security
38
15k
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Being A Developer After 40
akosma
90
590k
What's in a price? How to price your products and services
michaelherold
245
12k
Agile that works and the tools we love
rasmusluckow
328
21k
4 Signs Your Business is Dying
shpigford
183
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Typedesign – Prime Four
hannesfritz
41
2.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
Gamification - CAS2011
davidbonilla
81
5.2k
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