SlideShare uma empresa Scribd logo
1 de 85
Baixar para ler offline
BUILDING RESILIENT
FRONTEND SYSTEMS
Ian Feather - BuzzFeed
RESILIENCE IS
FUNCTION
IN A HOSTILE
ENVIRONMENT
HOW CAN OUR
SYSTEMS FAIL?
SECTION 1
3RD PARTY AVAILABILITY
S3
S3
DYN DNS
S3
DYN DNS
CDN
S3
DYN DNS
CDN
S3
3RD PARTY AVAILABILITY
3RD PARTY AVAILABILITY
OUR OWN BUGS
3RD PARTY AVAILABILITY
OUR OWN BUGS
3RD PARTY AVAILABILITY
OUR OWN BUGS
THE NETWORK
1.04%
OF REQUESTS FOR JAVASCRIPT
WILL TIMEOUT
13 MILLION
PAGEVIEWS PER
MONTH
3RD PARTY AVAILABILITY
OUR OWN BUGS
THE NETWORK
3RD PARTY AVAILABILITY
OUR OWN BUGS
THE NETWORK
USERS’ PRIVILEGE
8.9%
OF USERS USE SOME FORM
OF CONTENT BLOCKER
3.84%
WON’T SUCCESSFULLY
DOWNLOAD OUR FONTS
38 MILLION
PAGEVIEWS PER
MONTH
3RD PARTY AVAILABILITY
OUR OWN BUGS
THE NETWORK
USERS’ PRIVILEGE
HOPE FOR
THE BEST
DESIGN FOR
FAILURE
DESIGN FOR
FAILURE
SECTION 2
PRIORITIZE CRITICAL
PARTS OF THE PAGE
User
User
html
User
html
CSS JS IMAGES
User
html
IMAGES
CSS JS IMAGES
User
FONTS
html
IMAGES
CSS JS IMAGES
User
FONTS
html
IMAGES DATA (xhr)
CSS JS IMAGES
User
FONTS
html
IMAGES DATA (xhr)
IMAGES
CSS JS IMAGES
User
FONTS
html
IMAGES DATA (xhr)
IMAGES
CSS JS IMAGES
Images
User
FONTS
html
IMAGES DATA (xhr)
IMAGES
CSS JS IMAGES
HTML
PRIORITIZE CRITICAL
PARTS OF THE PAGE
PRIORITIZE CRITICAL
PARTS OF THE PAGE
MAKE ERRORS A FIRST
CLASS CITIZEN
SOMETHING BROKE.
SHOULD I TELL
THEM?
✘
✘
PRIORITIZE CRITICAL
PARTS OF THE PAGE
MAKE ERRORS A FIRST
CLASS CITIZEN
PRIORITIZE CRITICAL
PARTS OF THE PAGE
MAKE ERRORS A FIRST
CLASS CITIZEN
REPORT YOUR ERRORS
KNOWING IT’S
BROKEN BEFORE
TWITTER DOES
PRIORITIZE CRITICAL
PARTS OF THE PAGE
MAKE ERRORS A FIRST
CLASS CITIZEN
REPORT YOUR ERRORS
MITIGATE
RISK
SECTION 3
BUILD IN
REDUNDANCY
Asset
SERVER 1
Asset
SERVER 1
www.asset-server-one.com/styles.css
Asset
SERVER 1🔥www.asset-server-one.com/styles.css
✖
Asset
SERVER 1🔥www.asset-server-one.com/styles.css
✖
Asset
SERVER 1🔥
Asset
SERVER 2
www.asset-server-one.com/styles.css
✖
Asset
SERVER 1🔥
Asset
SERVER 2
www.asset-server-two.com/styles.css
www.asset-server-one.com/styles.css
✖
Asset
SERVER 1🔥
Asset
SERVER 2
www.asset-server-two.com/styles.css
www.asset-server-one.com/styles.css
Asset
SERVER 1
Asset
SERVER 2
Proxy
service
Asset
SERVER 1
Asset
SERVER 2
www.asset-server.com/styles.css
Proxy
service
Asset
SERVER 1
Asset
SERVER 2
www.asset-server.com/styles.css
Proxy
service
Asset
SERVER 1
Asset
SERVER 2
www.asset-server.com/styles.css
Proxy
service
CLOUD PROVIDER
CDN
STATIC ASSET SERVER
FONT PROVIDER
IMAGE SERVICE
ADS PROVIDER
AB TEST SERVICE
BUILD IN
REDUNDANCY
BUILD IN
REDUNDANCY
SERVE STALE
CONTENT
SERVER
SERVER
CDN
SERVER
CDN
SERVER
CDN
SERVER
CDN
SERVER
🔥
CDN
SERVER
🔥
CDN
CDN
SERVER
CDN
✖
SERVER
CDN
✖
SERVICE WORKER
SERVER
CDN
✖
SERVICE WORKER
SERVER
BUILD IN
REDUNDANCY
SERVE STALE
CONTENT
IN SUMMARY
IN SUMMARY
THANKS
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

Mais conteúdo relacionado

Semelhante a Frontend Resilience

Douglas - Real JavaScript
Douglas - Real JavaScriptDouglas - Real JavaScript
Douglas - Real JavaScript
d0nn9n
 
Cloud Security Primer - F5 Networks
Cloud Security Primer - F5 NetworksCloud Security Primer - F5 Networks
Cloud Security Primer - F5 Networks
Harry Gunns
 
Explaining The Semantic Web
Explaining The Semantic WebExplaining The Semantic Web
Explaining The Semantic Web
Aditya Tuli
 
Practical Tips for Ops: End User Monitoring
Practical Tips for Ops: End User MonitoringPractical Tips for Ops: End User Monitoring
Practical Tips for Ops: End User Monitoring
Dynatrace
 
Scaling Crittercism to 30,000 Requests Per Second and Beyond with MongoDB
Scaling Crittercism to 30,000 Requests Per Second and Beyond with MongoDBScaling Crittercism to 30,000 Requests Per Second and Beyond with MongoDB
Scaling Crittercism to 30,000 Requests Per Second and Beyond with MongoDB
MongoDB
 

Semelhante a Frontend Resilience (20)

Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for Education
 
Выявление и локализация проблем в сети с помощью инструментов Riverbed
Выявление и локализация проблем в сети с помощью инструментов RiverbedВыявление и локализация проблем в сети с помощью инструментов Riverbed
Выявление и локализация проблем в сети с помощью инструментов Riverbed
 
KRNIC Data Driven DNS Security
KRNIC Data Driven DNS SecurityKRNIC Data Driven DNS Security
KRNIC Data Driven DNS Security
 
Migrating Oracle to Aurora PostgreSQL Utilizing AWS Database Migration Servic...
Migrating Oracle to Aurora PostgreSQL Utilizing AWS Database Migration Servic...Migrating Oracle to Aurora PostgreSQL Utilizing AWS Database Migration Servic...
Migrating Oracle to Aurora PostgreSQL Utilizing AWS Database Migration Servic...
 
Running a Megasite on Microsoft Technologies
Running a Megasite on Microsoft TechnologiesRunning a Megasite on Microsoft Technologies
Running a Megasite on Microsoft Technologies
 
IRJET - Review on Search Engine Optimization
IRJET - Review on Search Engine OptimizationIRJET - Review on Search Engine Optimization
IRJET - Review on Search Engine Optimization
 
Catalyze Webcast - Five Myths Of RIA With Laurie Gray - 031808
Catalyze Webcast - Five Myths Of RIA With Laurie Gray - 031808Catalyze Webcast - Five Myths Of RIA With Laurie Gray - 031808
Catalyze Webcast - Five Myths Of RIA With Laurie Gray - 031808
 
Web Performance 101
Web Performance 101Web Performance 101
Web Performance 101
 
Presentation to customers sharing flash across virtualized workloads (1)
Presentation to customers   sharing flash across virtualized workloads (1)Presentation to customers   sharing flash across virtualized workloads (1)
Presentation to customers sharing flash across virtualized workloads (1)
 
Douglas - Real JavaScript
Douglas - Real JavaScriptDouglas - Real JavaScript
Douglas - Real JavaScript
 
Chaos Engineering
Chaos EngineeringChaos Engineering
Chaos Engineering
 
Architecture Patterns for Multi-Region Active-Active Applications (ARC209-R2)...
Architecture Patterns for Multi-Region Active-Active Applications (ARC209-R2)...Architecture Patterns for Multi-Region Active-Active Applications (ARC209-R2)...
Architecture Patterns for Multi-Region Active-Active Applications (ARC209-R2)...
 
Microservices @ SoundCloud
Microservices @ SoundCloudMicroservices @ SoundCloud
Microservices @ SoundCloud
 
Cloud Security Primer - F5 Networks
Cloud Security Primer - F5 NetworksCloud Security Primer - F5 Networks
Cloud Security Primer - F5 Networks
 
Explaining The Semantic Web
Explaining The Semantic WebExplaining The Semantic Web
Explaining The Semantic Web
 
Maintaining the Front Door to Netflix : The Netflix API
Maintaining the Front Door to Netflix : The Netflix APIMaintaining the Front Door to Netflix : The Netflix API
Maintaining the Front Door to Netflix : The Netflix API
 
Practical Tips for Ops: End User Monitoring
Practical Tips for Ops: End User MonitoringPractical Tips for Ops: End User Monitoring
Practical Tips for Ops: End User Monitoring
 
Scaling Crittercism to 30,000 Requests Per Second and Beyond with MongoDB
Scaling Crittercism to 30,000 Requests Per Second and Beyond with MongoDBScaling Crittercism to 30,000 Requests Per Second and Beyond with MongoDB
Scaling Crittercism to 30,000 Requests Per Second and Beyond with MongoDB
 
thesisSlides
thesisSlidesthesisSlides
thesisSlides
 
thesisSlides
thesisSlidesthesisSlides
thesisSlides
 

Último

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Último (20)

Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 

Frontend Resilience