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.

Frontend Resilience

105 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

×