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

Building Resilient Frontend Systems - NationJS

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
130
Building Resilient Frontend Systems (All Day Hey)
Avatar for Ianfeather ianfeather
1
550
Building Resilient Frontend Systems (@frontendne)
Avatar for Ianfeather ianfeather
1
200
Testing Without Assertions
Avatar for Ianfeather ianfeather
0
150
Establishing Performance Contexts
Avatar for Ianfeather ianfeather
0
130
Reducing complexity with a Component API
Avatar for Ianfeather ianfeather
0
210
Web Fonts and Performance
Avatar for Ianfeather ianfeather
0
230

Other Decks in Technology

See All in Technology
オレ達はAWS管理をやりたいんじゃない！開発の生産性を爆アゲしたいんだ！！
Avatar for wkm2 wkm2
4
500
AIエージェント、 社内展開の前に知っておきたいこと
Avatar for oracle4engineer oracle4engineer
PRO
2
100
Abuse report だけじゃない。AWS から緊急連絡が来る状況とは？昨今の攻撃や被害の事例の紹介と備えておきたい考え方について
Avatar for kazzpapa3 kazzpapa3
1
470
技術的負債の泥沼から組織を救う3つの転換点
Avatar for nwiizo nwiizo
8
3.6k
[JAWSDAYS2026]Who is responsible for IAM
Avatar for Mizuki TSUJI mizukibbb
0
420
ランサムウエア対策してますか？やられた時の対策は本当にできてますか？AWSでのリスク分析と対応フローの泥臭いお話。
Avatar for ひろのぶ hootaki
0
110
AWS DevOps Agent vs SRE俺 / AWS DevOps Agent vs me, the SRE
Avatar for SMS tech sms_tech
3
540
[JAWS DAYS 2026]私の AWS DevOps Agent 推しポイント
Avatar for Toshihiro Furuno furuton
0
140
マルチロールEMが実践する「組織のレジリエンス」を高めるための組織構造と人材配置戦略
Avatar for coconala_engineer coconala_engineer
3
710
聲の形にみるアクセシビリティ
Avatar for tomokusaba tomokusaba
0
170
[JAWSDAYS2026][D8]その起票、愛が足りてますか？AWSサポートを味方につける、技術的「ラブレター」の書き方
Avatar for hirosys hirosys_
3
120
Oracle Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
3
1.7k

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
280
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
2.8k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
98
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
330
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
150
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
940

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