Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
BUILDING RESILIENT
FRONTEND SYSTEMS
Ian Feather - BuzzFeed
RESILIENCE IS
FUNCTION
IN A HOSTILE
ENVIRONMENT
HOW CAN OUR
SYSTEMS FAIL?
SECTION 1
3RD PARTY AVAILABILITY
S3
S3
DYN DNS
S3
DYN DNS
CDN
S3
DYN DNS
CDN
S3
3RD PARTY AVAILABILITY
3RD PARTY AVAILABILITY
OUR OWN BUGS
3RD PARTY AVAILABILITY
OUR OWN BUGS
3RD PARTY AVAILABILITY
OUR OWN BUGS
THE NETWORK
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
PRIORITIZE CRITICAL
PARTS OF THE PAGE
PRIORITIZE CRITICAL
PARTS OF THE PAGE
MAKE ERRORS A FIRST
CLASS CITIZEN
SOMETHING BROKE.
SHOULD I TELL
THEM?
✘
✘
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
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/ph...
Frontend Resilience
Frontend Resilience
Frontend Resilience
Frontend Resilience
Frontend Resilience
Frontend Resilience
Frontend Resilience
Frontend Resilience
Frontend Resilience
Frontend Resilience
Frontend Resilience
Upcoming SlideShare
Loading in …5
×

Frontend Resilience

207 views

Published on

Frontend Resilience

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Frontend Resilience

  1. 1. BUILDING RESILIENT FRONTEND SYSTEMS Ian Feather - BuzzFeed
  2. 2. RESILIENCE IS FUNCTION IN A HOSTILE ENVIRONMENT
  3. 3. HOW CAN OUR SYSTEMS FAIL? SECTION 1
  4. 4. 3RD PARTY AVAILABILITY
  5. 5. S3
  6. 6. S3 DYN DNS
  7. 7. S3 DYN DNS CDN
  8. 8. S3 DYN DNS CDN S3
  9. 9. 3RD PARTY AVAILABILITY
  10. 10. 3RD PARTY AVAILABILITY OUR OWN BUGS
  11. 11. 3RD PARTY AVAILABILITY OUR OWN BUGS
  12. 12. 3RD PARTY AVAILABILITY OUR OWN BUGS THE NETWORK
  13. 13. 1.04% OF REQUESTS FOR JAVASCRIPT WILL TIMEOUT
  14. 14. 13 MILLION PAGEVIEWS PER MONTH
  15. 15. 3RD PARTY AVAILABILITY OUR OWN BUGS THE NETWORK
  16. 16. 3RD PARTY AVAILABILITY OUR OWN BUGS THE NETWORK USERS’ PRIVILEGE
  17. 17. 8.9% OF USERS USE SOME FORM OF CONTENT BLOCKER
  18. 18. 3.84% WON’T SUCCESSFULLY DOWNLOAD OUR FONTS
  19. 19. 38 MILLION PAGEVIEWS PER MONTH
  20. 20. 3RD PARTY AVAILABILITY OUR OWN BUGS THE NETWORK USERS’ PRIVILEGE
  21. 21. HOPE FOR THE BEST
  22. 22. DESIGN FOR FAILURE
  23. 23. DESIGN FOR FAILURE SECTION 2
  24. 24. PRIORITIZE CRITICAL PARTS OF THE PAGE
  25. 25. User
  26. 26. User html
  27. 27. User html CSS JS IMAGES
  28. 28. User html IMAGES CSS JS IMAGES
  29. 29. User FONTS html IMAGES CSS JS IMAGES
  30. 30. User FONTS html IMAGES DATA (xhr) CSS JS IMAGES
  31. 31. User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES
  32. 32. User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES Images
  33. 33. User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES HTML
  34. 34. PRIORITIZE CRITICAL PARTS OF THE PAGE
  35. 35. PRIORITIZE CRITICAL PARTS OF THE PAGE MAKE ERRORS A FIRST CLASS CITIZEN
  36. 36. SOMETHING BROKE. SHOULD I TELL THEM?
  37. 37.
  38. 38.
  39. 39. PRIORITIZE CRITICAL PARTS OF THE PAGE MAKE ERRORS A FIRST CLASS CITIZEN
  40. 40. PRIORITIZE CRITICAL PARTS OF THE PAGE MAKE ERRORS A FIRST CLASS CITIZEN REPORT YOUR ERRORS
  41. 41. KNOWING IT’S BROKEN BEFORE TWITTER DOES
  42. 42. PRIORITIZE CRITICAL PARTS OF THE PAGE MAKE ERRORS A FIRST CLASS CITIZEN REPORT YOUR ERRORS
  43. 43. MITIGATE RISK SECTION 3
  44. 44. BUILD IN REDUNDANCY
  45. 45. Asset SERVER 1
  46. 46. Asset SERVER 1 www.asset-server-one.com/styles.css
  47. 47. Asset SERVER 1🔥www.asset-server-one.com/styles.css
  48. 48. ✖ Asset SERVER 1🔥www.asset-server-one.com/styles.css
  49. 49. ✖ Asset SERVER 1🔥 Asset SERVER 2 www.asset-server-one.com/styles.css
  50. 50. ✖ Asset SERVER 1🔥 Asset SERVER 2 www.asset-server-two.com/styles.css www.asset-server-one.com/styles.css
  51. 51. ✖ Asset SERVER 1🔥 Asset SERVER 2 www.asset-server-two.com/styles.css www.asset-server-one.com/styles.css
  52. 52. Asset SERVER 1 Asset SERVER 2 Proxy service
  53. 53. Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service
  54. 54. Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service
  55. 55. Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service
  56. 56. CLOUD PROVIDER CDN STATIC ASSET SERVER FONT PROVIDER IMAGE SERVICE ADS PROVIDER AB TEST SERVICE
  57. 57. BUILD IN REDUNDANCY
  58. 58. BUILD IN REDUNDANCY SERVE STALE CONTENT
  59. 59. SERVER
  60. 60. SERVER CDN
  61. 61. SERVER CDN
  62. 62. SERVER CDN
  63. 63. SERVER CDN
  64. 64. SERVER 🔥 CDN
  65. 65. SERVER 🔥 CDN
  66. 66. CDN SERVER
  67. 67. CDN ✖ SERVER
  68. 68. CDN ✖ SERVICE WORKER SERVER
  69. 69. CDN ✖ SERVICE WORKER SERVER
  70. 70. BUILD IN REDUNDANCY SERVE STALE CONTENT
  71. 71. IN SUMMARY
  72. 72. IN SUMMARY
  73. 73. THANKS
  74. 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

×