Frontend Resilience

1. BUILDING RESILIENT
FRONTEND SYSTEMS
Ian Feather - BuzzFeed

3. RESILIENCE IS
FUNCTION
IN A HOSTILE
ENVIRONMENT

4. HOW CAN OUR
SYSTEMS FAIL?
SECTION 1

5. 3RD PARTY AVAILABILITY

7. S3

8. S3
DYN DNS

9. S3
DYN DNS
CDN

10. S3
DYN DNS
CDN
S3

11. 3RD PARTY AVAILABILITY

12. 3RD PARTY AVAILABILITY
OUR OWN BUGS

14. 3RD PARTY AVAILABILITY
OUR OWN BUGS

15. 3RD PARTY AVAILABILITY
OUR OWN BUGS
THE NETWORK

17. 1.04%
OF REQUESTS FOR JAVASCRIPT
WILL TIMEOUT

18. 13 MILLION
PAGEVIEWS PER
MONTH

19. 3RD PARTY AVAILABILITY
OUR OWN BUGS
THE NETWORK

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

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

22. 3.84%
WON’T SUCCESSFULLY
DOWNLOAD OUR FONTS

23. 38 MILLION
PAGEVIEWS PER
MONTH

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

25. HOPE FOR
THE BEST

26. DESIGN FOR
FAILURE

27. DESIGN FOR
FAILURE
SECTION 2

28. PRIORITIZE CRITICAL
PARTS OF THE PAGE

29. User

30. User
html

31. User
html
CSS JS IMAGES

32. User
html
IMAGES
CSS JS IMAGES

33. User
FONTS
html
IMAGES
CSS JS IMAGES

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

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

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

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

41. PRIORITIZE CRITICAL
PARTS OF THE PAGE

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

43. SOMETHING BROKE.
SHOULD I TELL
THEM?

45. ✘

46. ✘

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

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

51. KNOWING IT’S
BROKEN BEFORE
TWITTER DOES

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

54. MITIGATE
RISK
SECTION 3

55. BUILD IN
REDUNDANCY

56. Asset
SERVER 1

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

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

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

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

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

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

63. Asset
SERVER 1
Asset
SERVER 2
Proxy
service

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

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

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

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

68. BUILD IN
REDUNDANCY

69. BUILD IN
REDUNDANCY
SERVE STALE
CONTENT

70. SERVER

71. SERVER
CDN

72. SERVER
CDN

73. SERVER
CDN

74. SERVER
CDN

75. SERVER
🔥
CDN

76. SERVER
🔥
CDN

77. CDN
SERVER

78. CDN
✖
SERVER

79. CDN
✖
SERVICE WORKER
SERVER

80. CDN
✖
SERVICE WORKER
SERVER

81. BUILD IN
REDUNDANCY
SERVE STALE
CONTENT

82. IN SUMMARY

83. IN SUMMARY

84. THANKS

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