Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Building Resilient Frontend Systems - NationJS

Avatar for Ianfeather Ianfeather
December 02, 2017
Technology
0
210

Building Resilient Frontend Systems - NationJS

Avatar for Ianfeather

Ianfeather

December 02, 2017
Tweet

More Decks by Ianfeather

See All by Ianfeather
Building Resilient Front End Systems (Smashingconf)
Avatar for Ianfeather ianfeather
0
120
Building Resilient Frontend Systems (All Day Hey)
Avatar for Ianfeather ianfeather
1
530
Building Resilient Frontend Systems (@frontendne)
Avatar for Ianfeather ianfeather
1
200
Testing Without Assertions
Avatar for Ianfeather ianfeather
0
140
Establishing Performance Contexts
Avatar for Ianfeather ianfeather
0
130
Reducing complexity with a Component API
Avatar for Ianfeather ianfeather
0
200
Web Fonts and Performance
Avatar for Ianfeather ianfeather
0
230

Other Decks in Technology

See All in Technology
AWS CLIの新しい認証情報設定方法aws loginコマンドの実態
Avatar for wkm2 wkm2
6
740
re:Invent 2025 ふりかえり 生成AI版
Avatar for TakaakiKakei takaakikakei
1
210
re:Invent2025 コンテナ系アップデート振り返り(+CloudWatchログのアップデート紹介)
Avatar for 枡川健太郎 masukawa
0
360
形式手法特論：CEGAR を用いたモデル検査の状態空間削減 #kernelvm / Kernel VM Study Hokuriku Part 8
Avatar for y_taka_23 ytaka23
2
460
Challenging Hardware Contests with Zephyr and Lessons Learned
Avatar for misoji engineer iotengineer22
0
210
MapKitとオープンデータで実現する地図情報の拡張と可視化
Avatar for ZOZO Developers zozotech
PRO
1
140
今からでも間に合う！速習Devin入門とその活用方法
Avatar for Izumu KUSUNOKI ismk
1
700
Database イノベーショントークを振り返る/reinvent-2025-database-innovation-talk-recap
Avatar for emi emiki
0
170
AWS Bedrock AgentCoreで作る 1on1支援AIエージェント 〜Memory × Evaluationsによる実践開発〜
Avatar for Yusuke Shimizu yusukeshimizu
6
400
Microsoft Agent 365 についてゆっくりじっくり理解する！
Avatar for skmkzyk skmkzyk
0
320
寫​了​幾年​ Code，​然後​呢？​軟體​工程師​必須重新​認識​的​ DevOps
Avatar for Cheng-Wei Chen cheng_wei_chen
1
1.4k
世界最速級 memcached 互換サーバー作った
Avatar for yasukata yasukata
0
340

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.8k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.3k

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