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

Building Resilient Frontend Systems - NationJS

Avatar for Ianfeather Ianfeather
December 02, 2017
Technology
0
200

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
110
Building Resilient Frontend Systems (All Day Hey)
Avatar for Ianfeather ianfeather
1
500
Building Resilient Frontend Systems (@frontendne)
Avatar for Ianfeather ianfeather
1
190
Testing Without Assertions
Avatar for Ianfeather ianfeather
0
130
Establishing Performance Contexts
Avatar for Ianfeather ianfeather
0
120
Reducing complexity with a Component API
Avatar for Ianfeather ianfeather
0
190
Web Fonts and Performance
Avatar for Ianfeather ianfeather
0
200

Other Decks in Technology

See All in Technology
Lakehouse в Лемана Тех. От архитектуры до оптимизации
Avatar for Elena Meremyanina emeremyanina1234
0
370
試作とデモンストレーション / Prototyping and Demonstrations
Avatar for Kenji Saito ks91
PRO
0
150
Why every SwiftUI developer should care about the Environment - iOSKonf25
Avatar for Peter Friese peterfriese
0
160
インフラからSREへ
Avatar for Issei Naruta mirakui
20
7.7k
GrafanaをClaude DesktopからMCPで触ってみた
Avatar for 濱田孝治 hamadakoji
0
200
GPU 클라우드 환경에서의 회복탄력적 AI 운영 : 훈련 및 추론을 위한 견고한 아키텍처와 전략
Avatar for Jeongkyu Shin inureyes
PRO
0
140
技術的負債を「戦略的投資」にするためのPdMとエンジニアの連携と実践
Avatar for satomino satomino
3
600
激動の一年を通じて見えてきた「技術でリードする」ということ
Avatar for ktr ktr_0731
8
8.4k
Docker Compose で手軽に手元環境を実現する / Simplifying Local Environments with Docker Compose #CinemaDeLT
Avatar for nabeo nabeo
0
270
転職したらMCPサーバーだった件
Avatar for nwiizo nwiizo
13
9.7k
dbtとリバースETLでデータ連携の複雑さに立ち向かう
Avatar for Toru Morooka morookacube
0
1.6k
地に足の付いた現実的な技術選定から魔力のある体験を得る『AIレシート読み取り機能』のケーススタディ / From Grounded Tech Choices to Magical UX: A Case Study of AI Receipt Scanning
Avatar for moznion moznion
5
1.9k

Featured

See All Featured
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.2k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
6.5k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.2k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
BBQ
Avatar for Matthew Crist matthewcrist
88
9.6k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.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