Building Resilient Frontend Systems - NationJS

649e3d33ce29a5e6bb4ff3025c6aaffa?s=47 Ianfeather
December 02, 2017
Technology
0
160

Building Resilient Frontend Systems - NationJS

649e3d33ce29a5e6bb4ff3025c6aaffa?s=128

Ianfeather

December 02, 2017
Tweet

More Decks by Ianfeather

See All by Ianfeather
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
37
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
1
190
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
1
100
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
85
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
27
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
54
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
30

Other Decks in Technology

See All in Technology
23f4d5d797a91b6d17d627b90b5a42d9?s=48 kentaro
3
160
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
380
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
110
6bbb729118654b4f0d72dce782362487?s=48 kouxyz21
0
380
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
170
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
4
690
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
1.6k
484571ccba0db66b69dc11761afdd0c4?s=48 chiroito
0
200
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
250
7a1af5a69aeacaba5042ee2f332fdaf6?s=48 ahrkrak
0
470
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
200
6fcdf8a60e6e2d5df378f716f4f6277a?s=48 puripuri2100
0
240

Featured

See All Featured
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
327
35k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
683
180k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
777
240k
245cee81a9c424266e5e401d844ea881?s=48 lara
590
60k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
256
36k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
393
60k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
49
3.3k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
12k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
4
450
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
218
15k

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

  46. ✘

  47. None
  48. None

  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

  52. None

  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