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

Building Resilient Frontend Systems (All Day Hey)

649e3d33ce29a5e6bb4ff3025c6aaffa?s=47 Ianfeather
April 30, 2018
Technology
1
280

Building Resilient Frontend Systems (All Day Hey)

649e3d33ce29a5e6bb4ff3025c6aaffa?s=128

Ianfeather

April 30, 2018
Tweet

More Decks by Ianfeather

See All by Ianfeather
Building Resilient Front End Systems (Smashingconf)
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
44
Building Resilient Frontend Systems (@frontendne)
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
1
120
Testing Without Assertions
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
97
Building Resilient Frontend Systems - NationJS
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
170
Establishing Performance Contexts
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
35
Reducing complexity with a Component API
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
66
Web Fonts and Performance
649e3d33ce29a5e6bb4ff3025c6aaffa?s=48 ianfeather
0
44

Other Decks in Technology

See All in Technology
E2E自動テスト導入・運用をめぐる先入観と実際に起きたこと / Preconceptions and What Happened with E2E Testing
77fa3ebbf229a884c74c905034b1f4c2?s=48 ak1210
4
690
Who owns the Service Level?
93c80c388fe9d8f9df7d030549a0ff0b?s=48 chaspy
5
1k
実験！カオスエンジニアリング / How to Chaos Engineering
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
0
140
HTTP Session Architecture Pattern
484571ccba0db66b69dc11761afdd0c4?s=48 chiroito
1
400
Scrum Fest Niigata 2022 開発エンジニアに聞いてみよう！
478bd912a17b65fa0ab8c1d81912b9b1?s=48 moritamasami
1
210
Learning from AWS Customer Security Incidents [2022]
A431674e1b362e40786876211b77455e?s=48 ramimac
0
1.1k
AWS CLI入門_20220513
1642254df0e7560327cda4ddc071397e?s=48 suzakiyoshito
0
3.9k
キャッチアップ Android 13 / Catch up Android 13
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
2
1.1k
暗号資産ウォレット入門（MetaMaskの入門～NFTの購入～詐欺の注意事項など）
37f853c24b8c02fed3bc1b4dee46bf3e?s=48 kayato
2
190
成長を続ける組織でのSRE戦略：プレモーテムによる信頼性の認識共有 SRE Next 2022
Dccc861c47a9a7bfc7f71a86e1245897?s=48 niwatakeru
7
2.6k
OSINT/GEOINT ワークショップ 20220514 古橋資料
5314ec2302336bf68c95bdb5b1476227?s=48 furuhashilab
2
310
220521_SFN_品質文化試論と『LEADING QUALITY』/220521_SFN_Essay_of_Quality_Culture_and_LEADING_QUALITY
C8cde92274f0ca1ff9b046673d4f2d29?s=48 mkwrd
0
250

Featured

See All Featured
Building an army of robots
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
299
40k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
237
19k
Gamification - CAS2011
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.9k
Stop Working from a Prison Cell
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
261
17k
Imperfection Machines: The Place of Print at Facebook
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
11k
Learning to Love Humans: Emotional Interface Design
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
37k
Java REST API Framework Comparison - PWX 2021
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
11
4.6k
Ruby is Unlike a Banana
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
9.2k
ReactJS: Keep Simple. Everything can be a component!
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
655
120k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
Building a Scalable Design System with Sketch
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
447
30k
Art, The Web, and Tiny UX
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
280
17k

Transcript

  1. BUILDING RESILIENT FRONTEND SYSTEMS Ian Feather - BuzzFeed - @ianfeather

  2. None

  3. RESILIENCE IS FUNCTION IN A HOSTILE ENVIRONMENT

  4. UNDERSTAND YOUR TIERS OF USER EXPERIENCE

  5. GUARANTEE THE MOST BASIC LEVEL OF UX

  6. 1. HOW OUR SYSTEMS FAIL 2. DESIGNING FOR FAILURE 3.

    MITIGATING RISK 4. LEARNING FROM FAILURE

  7. HOW OUR SYSTEMS FAIL SECTION 1

  8. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE

  9. HTTPS IS TABLE STAKES

  10. HTTPS IS TABLE STAKES

  11. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE

  12. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY

    AVAILABILITY

  13. CONTROL YOUR POINTS OF FAILURE

  14. 2016

  15. 2016 DYN DNS 5 HRS

  16. 2016 DYN DNS 5 HRS AWS s3 9 HRS 2017

  17. 2016 DYN DNS 5 HRS AWS s3 9 HRS 2017

    Fastly CDN 1 HR

  18. 2016 DYN DNS 5 HRS AWS s3 9 HRS 2017

    Fastly CDN 1 HR AWS S3 2 hrs

  19. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY

    AVAILABILITY

  20. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY

    AVAILABILITY 3. DEVELOPER ERROR

  21. ADD SLIDE ABOUT SENTRY

  22. SLACK ALERTS

  23. KNOWING IT’S BROKEN BEFORE TWITTER DOES

  24. THEORY VS PRACTICE

  25. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY

    AVAILABILITY 3. DEVELOPER ERROR

  26. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY

    AVAILABILITY 3. DEVELOPER ERROR 4. THE NETWORK

  27. THEORY VS PRACTICE

  28. THEORY VS PRACTICE

  29. ~1% OF REQUESTS FOR JAVASCRIPT WILL TIMEOUT

  30. 13 MILLION REQUESTS FOR JAVASCRIPT WILL TIMEOUT

  31. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY

    AVAILABILITY 3. DEVELOPER ERROR 4. THE NETWORK

  32. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY

    AVAILABILITY 3. DEVELOPER ERROR 4. THE NETWORK 5. USER’S PRIVILEGE

  33. ~9% OF OUR USERS USE SOME FORM OF CONTENT BLOCKER

  34. ~4% WON’T SUCCESSFULLY DOWNLOAD OUR FONTS

  35. 40 MILLION PAGEVIEWS PER MONTH

  36. HOW OUR SYSTEMS FAIL 1. MALICIOUS INTERFERENCE 2. 3RD PARTY

    AVAILABILITY 3. DEVELOPER ERROR 4. THE NETWORK 5. USER’S PRIVILEGE

  37. HOPE FOR THE BEST?

  38. DESIGN FOR FAILURE SECTION 2

  39. DESIGN FOR FAILURE 1. PRIORITIZE CRITICAL PARTS OF THE PAGE

  40. User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES

  41. User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES

    Images

  42. User FONTS html IMAGES DATA (xhr) IMAGES CSS JS IMAGES

    HTML
  43. None
  44. None
  45. None

  46. DESIGN FOR FAILURE 1. PRIORITIZE CRITICAL PARTS OF THE PAGE

  47. DESIGN FOR FAILURE 1. PRIORITIZE CRITICAL PARTS OF THE PAGE

    2. MAKE ERRORS A FIRST CLASS CITIZEN

  48. SOMETHING BROKE! SHOULD I TELL THEM?

  49. None

  50. ✘

  51. ✘

  52. IT BROKE. SHOULD I TELL THEM?

  53. None

  54. DESIGN FOR FAILURE 1. PRIORITIZE CRITICAL PARTS OF THE PAGE

    2. MAKE ERRORS A FIRST CLASS CITIZEN

  55. MITIGATE RISK SECTION 3

  56. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES

  57. CONTROL YOUR POINTS OF FAILURE

  58. None

  59. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES

  60. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN

    REDUNDANCY

  61. HAVE TWO OF EVERYTHING

  62. Asset SERVER 1

  63. Asset SERVER 1 www.asset-server-one.com/styles.css

  64. Asset SERVER 1 www.asset-server-one.com/styles.css

  65. ✖ Asset SERVER 1 www.asset-server-one.com/styles.css

  66. ✖ Asset SERVER 1 Asset SERVER 2 www.asset-server-one.com/styles.css

  67. ✖ Asset SERVER 1 Asset SERVER 2 www.asset-server-two.com/styles.css www.asset-server-one.com/styles.css

  68. ✖ Asset SERVER 1 Asset SERVER 2 www.asset-server-two.com/styles.css www.asset-server-one.com/styles.css

  69. Asset SERVER 1 Asset SERVER 2 Proxy service

  70. Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service

  71. Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service

  72. Asset SERVER 1 Asset SERVER 2 www.asset-server.com/styles.css Proxy service

  73. PLAN Z

  74. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN

    REDUNDANCY

  75. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN

    REDUNDANCY 3. SERVE STALE CONTENT

  76. SERVER

  77. SERVER CDN

  78. SERVER CDN

  79. SERVER CDN

  80. SERVER CDN

  81. SERVER CDN

  82. SERVER CDN

  83. CDN SERVER

  84. CDN ✖ SERVER

  85. CDN ✖ SERVICE WORKER SERVER

  86. CDN ✖ SERVICE WORKER SERVER

  87. MITIGATE RISK 1. LOCK YOUR RUNTIME DEPENDENCIES 2. BUILD IN

    REDUNDANCY 3. SERVE STALE CONTENT

  88. LEARN FROM MISTAKES SECTION 4

  89. LEARN FROM MISTAKES 1. POSTMORTEMS

  90. BLAMELESS

  91. HOW DID WE HANDLE IT AS A TEAM?

  92. HOW COULD IT HAVE BEEN PREVENTED?

  93. LEARN FROM MISTAKES 1. POSTMORTEMS

  94. LEARN FROM MISTAKES 1. POSTMORTEMS 2. FIRE DRILLS & CHAOS

    TESTING

  95. FIRE DRILLS ARE A SAFE SPACE TO PRACTICE

  96. 1. LIMIT IMPACT 2. BE DECISIVE 3. DELEGATE EARLY

  97. CHAOS TESTING

  98. DELIBERATELY INTRODUCE FAILURE TO ENSURE YOUR SYSTEMS ARE RESILIENT

  99. LEARN FROM MISTAKES 1. POSTMORTEMS 2. FIRE DRILLS & CHAOS

    TESTING

  100. IN SUMMARY

  101. KNOW WHAT’S IMPORTANT TO YOUR USERS

  102. IDENTIFY HOW YOUR SYSTEM WILL DEGRADE

  103. IDENTIFY POINTS OF FAILURE AND BUILD IN FAIL-SAFES

  104. LEARN FROM EVERY FAILURE

  105. THANK YOU IAN FEATHER - BUZZFEED - @IANFEATHER