Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Building Resilient Frontend Systems - NationJS

Avatar for Ianfeather Ianfeather
December 02, 2017
Technology
230
0

Building Resilient Frontend Systems - NationJS

Avatar for Ianfeather

Ianfeather

December 02, 2017

More Decks by Ianfeather

See All by Ianfeather
Building Resilient Front End Systems (Smashingconf)
Avatar for Ianfeather ianfeather
0
140
Building Resilient Frontend Systems (All Day Hey)
Avatar for Ianfeather ianfeather
1
590
Building Resilient Frontend Systems (@frontendne)
Avatar for Ianfeather ianfeather
1
210
Testing Without Assertions
Avatar for Ianfeather ianfeather
0
160
Establishing Performance Contexts
Avatar for Ianfeather ianfeather
0
140
Reducing complexity with a Component API
Avatar for Ianfeather ianfeather
0
220
Web Fonts and Performance
Avatar for Ianfeather ianfeather
0
240

Other Decks in Technology

See All in Technology
顧客に向き合う開発組織へ。リアーキテクチャとフィーチャーチーム化で挑む組織改革
Avatar for セーフィー safie
0
2.5k
SREへの勘違いに気づいた後の話
Avatar for yuden tomodakengo
0
160
AI Native Platform Engineering 〜PlatformとAgileで“作る速さ”を“価値”へ〜
Avatar for Yuya Mizorogi uya116
0
160
覗いてみよう 関数型ビジュアル言語×2Dグラフィックスの世界
Avatar for Yohei Yamasaki yohyamasaki
0
120
音声コミュニティを守るAI監視基盤_ 90%以上の入力削減を支えたServerless設計と運用判断
Avatar for 岡修平 shuheioka123
0
110
バイブコーディング時代のWebアプリ開発入門~Cloud Runで学ぶセキュアなビルドとデプロイ
Avatar for 尾﨑勇太/Yuta Ozaki waiwai2111
1
150
PQC移行の今 -- IETF からみた現在地
Avatar for Satoru Kanno satokan
3
380
品質と信頼性を地続きにする
Avatar for gr1m0h grimoh
2
1k
リアーキテクチャ後の障害ゼロを目指したShadow Testingの取り組み
Avatar for nihonbuson nihonbuson
PRO
1
180
【ゲームメーカーズスクランブル2026】『Shadowverse: Worlds Beyond』UIとアニメーションで実現する最高のユーザー体験を叶えるプロトタイピング
Avatar for Cygames, Inc. cygames
PRO
1
560
.NET WebAssemblyで実現するクライアントサイドAI推論：NuGetからViteまで、2つのエコシステムを繋ぐビルド戦略
Avatar for Yusuke Yamada yamachu
1
880
AIエージェントの権限管理 3:  Agentic RAG の Fine grained access control 編
Avatar for Renya Kujirada ren8k
1
280

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
330
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.5k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
390
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.6k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
440
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
590
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
2
2.9k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
142
7.7k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
3.1k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.2k

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