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
Android Audio: Beyond Winning On It
atsushieno
0
3.4k
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
3
200
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
3
590
AWSで始める実践Dagster入門
kitagawaz
1
750
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
160
RSCの時代にReactとフレームワークの境界を探る
uhyo
11
3.5k
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
890
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
230
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
はじめてのOSS開発からみえたGo言語の強み
shibukazu
4
1k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
How STYLIGHT went responsive
nonsquared
100
5.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Statistics for Hackers
jakevdp
799
220k
A designer walks into a library…
pauljervisheath
207
24k
Embracing the Ebb and Flow
colly
87
4.8k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Designing Experiences People Love
moore
142
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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