1.
BUILDING RESILIENT
FRONTEND SYSTEMS
Ian Feather - BuzzFeed

2.
RESILIENCE IS
FUNCTION
IN A HOSTILE
ENVIRONMENT

3.
HOW CAN OUR
SYSTEMS FAIL?
SECTION 1

4.
3RD PARTY AVAILABILITY

5.
S3

6.
S3
DYN DNS

7.
S3
DYN DNS
CDN

8.
S3
DYN DNS
CDN
S3

9.
3RD PARTY AVAILABILITY

10.
3RD PARTY AVAILABILITY
OUR OWN BUGS

11.
3RD PARTY AVAILABILITY
OUR OWN BUGS

12.
3RD PARTY AVAILABILITY
OUR OWN BUGS
THE NETWORK

13.
1.04%
OF REQUESTS FOR JAVASCRIPT
WILL TIMEOUT

14.
13 MILLION
PAGEVIEWS PER
MONTH

15.
3RD PARTY AVAILABILITY
OUR OWN BUGS
THE NETWORK

16.
3RD PARTY AVAILABILITY
OUR OWN BUGS
THE NETWORK
USERS’ PRIVILEGE

17.
8.9%
OF USERS USE SOME FORM
OF CONTENT BLOCKER

18.
3.84%
WON’T SUCCESSFULLY
DOWNLOAD OUR FONTS

19.
38 MILLION
PAGEVIEWS PER
MONTH

20.
3RD PARTY AVAILABILITY
OUR OWN BUGS
THE NETWORK
USERS’ PRIVILEGE

21.
HOPE FOR
THE BEST

22.
DESIGN FOR
FAILURE

23.
DESIGN FOR
FAILURE
SECTION 2

24.
PRIORITIZE CRITICAL
PARTS OF THE PAGE

25.
User

26.
User
html

27.
User
html
CSS JS IMAGES

28.
User
html
IMAGES
CSS JS IMAGES

29.
User
FONTS
html
IMAGES
CSS JS IMAGES

30.
User
FONTS
html
IMAGES DATA (xhr)
CSS JS IMAGES

31.
User
FONTS
html
IMAGES DATA (xhr)
IMAGES
CSS JS IMAGES

32.
User
FONTS
html
IMAGES DATA (xhr)
IMAGES
CSS JS IMAGES
Images

33.
User
FONTS
html
IMAGES DATA (xhr)
IMAGES
CSS JS IMAGES
HTML

34.
PRIORITIZE CRITICAL
PARTS OF THE PAGE

35.
PRIORITIZE CRITICAL
PARTS OF THE PAGE
MAKE ERRORS A FIRST
CLASS CITIZEN

36.
SOMETHING BROKE.
SHOULD I TELL
THEM?

37.
✘

38.
✘

39.
PRIORITIZE CRITICAL
PARTS OF THE PAGE
MAKE ERRORS A FIRST
CLASS CITIZEN

40.
PRIORITIZE CRITICAL
PARTS OF THE PAGE
MAKE ERRORS A FIRST
CLASS CITIZEN
REPORT YOUR ERRORS

41.
KNOWING IT’S
BROKEN BEFORE
TWITTER DOES

42.
PRIORITIZE CRITICAL
PARTS OF THE PAGE
MAKE ERRORS A FIRST
CLASS CITIZEN
REPORT YOUR ERRORS

43.
MITIGATE
RISK
SECTION 3

44.
BUILD IN
REDUNDANCY

45.
Asset
SERVER 1

46.
Asset
SERVER 1
www.asset-server-one.com/styles.css

47.
Asset
SERVER 1🔥www.asset-server-one.com/styles.css

48.
✖
Asset
SERVER 1🔥www.asset-server-one.com/styles.css

49.
✖
Asset
SERVER 1🔥
Asset
SERVER 2
www.asset-server-one.com/styles.css

50.
✖
Asset
SERVER 1🔥
Asset
SERVER 2
www.asset-server-two.com/styles.css
www.asset-server-one.com/styles.css

51.
✖
Asset
SERVER 1🔥
Asset
SERVER 2
www.asset-server-two.com/styles.css
www.asset-server-one.com/styles.css

52.
Asset
SERVER 1
Asset
SERVER 2
Proxy
service

53.
Asset
SERVER 1
Asset
SERVER 2
www.asset-server.com/styles.css
Proxy
service

54.
Asset
SERVER 1
Asset
SERVER 2
www.asset-server.com/styles.css
Proxy
service

55.
Asset
SERVER 1
Asset
SERVER 2
www.asset-server.com/styles.css
Proxy
service

56.
CLOUD PROVIDER
CDN
STATIC ASSET SERVER
FONT PROVIDER
IMAGE SERVICE
ADS PROVIDER
AB TEST SERVICE

57.
BUILD IN
REDUNDANCY

58.
BUILD IN
REDUNDANCY
SERVE STALE
CONTENT

59.
SERVER

60.
SERVER
CDN

61.
SERVER
CDN

62.
SERVER
CDN

63.
SERVER
CDN

64.
SERVER
🔥
CDN

65.
SERVER
🔥
CDN

66.
CDN
SERVER

67.
CDN
✖
SERVER

68.
CDN
✖
SERVICE WORKER
SERVER

69.
CDN
✖
SERVICE WORKER
SERVER

70.
BUILD IN
REDUNDANCY
SERVE STALE
CONTENT

71.
IN SUMMARY

72.
IN SUMMARY

73.
THANKS

74.
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