Building Resilient Frontend Systems - NationJS

649e3d33ce29a5e6bb4ff3025c6aaffa?s=47 Ianfeather
December 02, 2017

Building Resilient Frontend Systems - NationJS

649e3d33ce29a5e6bb4ff3025c6aaffa?s=128

Ianfeather

December 02, 2017
Tweet

Transcript

  1. BUILDING RESILIENT FRONTEND SYSTEMS Ian Feather - BuzzFeed

  2. None
  3. RESILIENCE IS FUNCTION IN A HOSTILE ENVIRONMENT

  4. HOW CAN OUR SYSTEMS FAIL? SECTION 1

  5. 3RD PARTY AVAILABILITY

  6. None
  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

  13. None
  14. 3RD PARTY AVAILABILITY OUR OWN BUGS

  15. 3RD PARTY AVAILABILITY OUR OWN BUGS THE NETWORK

  16. None
  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
  38. None
  39. None
  40. None
  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?

  44. None
  45. None
  46. None
  47. PRIORITIZE CRITICAL PARTS OF THE PAGE MAKE ERRORS A FIRST

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

    CLASS CITIZEN REPORT YOUR ERRORS
  49. KNOWING IT’S BROKEN BEFORE TWITTER DOES

  50. None
  51. PRIORITIZE CRITICAL PARTS OF THE PAGE MAKE ERRORS A FIRST

    CLASS CITIZEN REPORT YOUR ERRORS
  52. MITIGATE RISK SECTION 3

  53. BUILD IN REDUNDANCY

  54. Asset SERVER 1

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

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

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

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

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

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

  61. Asset SERVER 1 Asset SERVER 2 Proxy service

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

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

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

  65. CLOUD PROVIDER CDN STATIC ASSET SERVER FONT PROVIDER IMAGE SERVICE

    ADS PROVIDER AB TEST SERVICE
  66. BUILD IN REDUNDANCY

  67. BUILD IN REDUNDANCY SERVE STALE CONTENT

  68. SERVER

  69. SERVER CDN

  70. SERVER CDN

  71. SERVER CDN

  72. SERVER CDN

  73. SERVER CDN

  74. SERVER CDN

  75. CDN SERVER

  76. CDN ✖ SERVER

  77. CDN ✖ SERVICE WORKER SERVER

  78. CDN ✖ SERVICE WORKER SERVER

  79. BUILD IN REDUNDANCY SERVE STALE CONTENT

  80. IN SUMMARY

  81. IN SUMMARY

  82. THANKS

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