Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Resilient Frontend Systems - NationJS

Ianfeather
December 02, 2017
Technology
0
190

Building Resilient Frontend Systems - NationJS

Ianfeather

December 02, 2017
Tweet

More Decks by Ianfeather

See All by Ianfeather
Building Resilient Front End Systems (Smashingconf)
ianfeather
0
100
Building Resilient Frontend Systems (All Day Hey)
ianfeather
1
470
Building Resilient Frontend Systems (@frontendne)
ianfeather
1
180
Testing Without Assertions
ianfeather
0
130
Establishing Performance Contexts
ianfeather
0
110
Reducing complexity with a Component API
ianfeather
0
150
Web Fonts and Performance
ianfeather
0
160

Other Decks in Technology

See All in Technology
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
340
tenntennはなんでnewmoにnew社したの？ - YAPC::Hakodate 2024
tenntenn
PRO
0
290
【インフラエンジニアbooks】30分でわかる「AWS継続的セキュリティ実践ガイド」
hssh2_bin
5
1.7k
業務ヒアリングと知識の呪い
tamai_63
0
290
小さな勉強会の始め方、広げ方、あるいは友達の作り方 / How to Start, Grow, and Build Connections with Small Study Groups
ar_tama
6
2.9k
Low Latency Join Method for Distributed DBMS
yugabytejapan
0
180
ADRを運用して3年経った僕らの現在地
onk
PRO
13
5.8k
寒冷地稲作の歴史にみるコミュニティ
miu_crescent
2
110
kube-vipとkube-proxy置き換えCiliumを積んだ究極のK3sクラスタを建てる
logica0419
4
220
Deno Deploy で Web Cache API を 使えるようになったので試した知見
toranoana
1
110
Oracle Database 23ai 新機能#4 Rolling Maintenance
oracle4engineer
PRO
0
140
Qdrant を用いた検索改善施策の紹介 / Search Engineering Tech Talk 2024 Summer
visional_engineering_and_design
1
210

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Embracing the Ebb and Flow
colly
84
4.4k
BBQ
matthewcrist
85
9.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Raft: Consensus for Rubyists
vanstee
136
6.6k
For a Future-Friendly Web
brad_frost
174
9.3k
Happy Clients
brianwarren
97
6.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
362
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
46
4.9k
GraphQLとの向き合い方2022年版
quramy
43
13k
Practical Orchestrator
shlominoach
186
10k

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