SlideShare une entreprise Scribd logo
1  sur  33
Télécharger pour lire hors ligne
Frontend at Scale - The Tumblr Story
Frontend at Scale 
the Tumblr story
What is Tumblr? 
→ Platform for you to express yourself 
→ ~200 million blogs 
→ 83+ billion posts 
→ HQ in NYC 
→ Founded in 2007 
→ 100+ engineers
What is Tumblr? 
→ Three ways to surface 
content: 
→ The dashboard
What is Tumblr? 
→ Three ways to surface 
content: 
→ The dashboard 
→ Search
What is Tumblr? 
→ Three ways to surface 
content: 
→ The dashboard 
→ Search 
→ Blog network 
! 
(Example: http://16-bitch.tumblr.com/)
Who am I? 
→ Chris Miller 
→ Product Engineering Manager 
→ Content Consumption (a.k.a., The Dashboard)
Our stack 
→ Frontend 
→ Backbone (+ lodash, underscore, etc.) 
→ jQuery (+ some plugins) 
→ SASS (+ Bourbon) 
→ a bit of VelocityJS 
→ Gulp for build
Our stack 
→ Backend 
→ PHP application layer 
→ Some specialized services (Scala, C, etc.) 
→ Data: MySQL, Redis, memcache, HDFS
How does it work? 
→ 1000’s of servers 
→ Deploy dozens of times per day 
→ Monitor and measure everything 
→ Hadoop 
→ OpenTSDB (backed by HBase)
Our process 
→ Teams are small 
→ Iterate quickly 
→ Release early and often, usually to % of users 
→ 2 code review “ok’s” required for all Pull Requests
Feature Flagging
Feature Flagging 
What is it? 
→ Segregate your users to certain features 
→ Control who sees what (and when)
Feature Flagging 
Implementation 
→ Server-side feature flagging 
→ Client-side feature flagging
Feature Flagging 
Usage 
→ Provides 
→ A/B testing 
→ Run beta code alongside production code 
→ Kill switch
Feature Flagging 
A/B Testing 
→ Injected recommendations 
→ A/B(/*) testing of 
positioning 
→ Which position is the 
best? Why?
Feature Flagging 
A/B Test Results 
→ Injected recommendations 
→ A/B(/*) testing of 
positioning 
→ Which position is the 
best? Why? 
Position 2 
Position 3 
Position 4 
Position 5 
Position 6 
Position 7 
Position 8 
Position 9
Feature Flagging 
Ramping & Kill Switch 
→ Ramping new features 
→ Deploy to only “admin” (staff) 
→ …then 1% of users… then 5%… 10%… 25%… 
→ Kill switch 
→ Completely turn off a feature that’s breaking the site… poof
Feature Flagging 
Use Carefully 
→ Feature flagging certain functionality can give a mixed 
experience 
→ Can cause user confusion: 
→ “Why does my mom see this and I don’t?” 
— Confused teenager 
→ Easy to build complex dependencies — don’t
Error Logging
Error Logging 
Launching Features 
→ New features usually have bugs 
→ (Well, not my code) 
→ (just kidding)
Error Logging 
Error Logging 
→ New features usually have bugs 
→ Server-side errors, easy to find
Error Logging 
Error Logging 
→ New features usually have bugs 
→ Client-side errors, also easy to find… 
→ …on my browser
Error Logging 
Error Logging 
→ New features usually have bugs 
→ Client-side errors, not easy to find on your browser 
→ …until recently
Error Logging 
Capture Errors 
→ We built: exceptions.js 
→ Really, it’s just: window.onerror
Error Logging 
Capture Errors 
→ Build dependency-free 
→ Build to be defensive
Error Logging 
Capture Errors 
→ What you do with the logs doesn’t matter; it’s how you use it 
→ We log errors to Scribe… 
→ …throw them into Hadoop 
→ …and count frequency with OpenTSDB
Error Logging 
Error Data 
→ With Hive, we can query Hadoop: 
→ With this, I can see we log around 1.4 million errors per day
Error Logging 
Error Data 
→ With OpenTSDB we can plot the frequency of logs
Error Logging 
We Love Graphs 
→ We made pretty graphs with OpenTSDB and graph everything
Getting it Right 
→ Sometimes we find errors before our users do. 
→ Sometimes. 
→ And it makes us feel good.
Getting it Right 
→ So we dance.
Thank You 
Email - cmiller@tumblr.com 
Follow me - ee99ee.com

Contenu connexe

Tendances

WordCamp SF 2011: Debugging in WordPress
WordCamp SF 2011: Debugging in WordPressWordCamp SF 2011: Debugging in WordPress
WordCamp SF 2011: Debugging in WordPressandrewnacin
 
Unobtrusive js
Unobtrusive jsUnobtrusive js
Unobtrusive jsbretticus
 
JJUG - ActionScript3のススメ
JJUG - ActionScript3のススメJJUG - ActionScript3のススメ
JJUG - ActionScript3のススメSeacolor
 
Java script202
Java script202Java script202
Java script202Wasiq Zia
 
Building Isomorphic Apps (JSConf.Asia 2014)
Building Isomorphic Apps (JSConf.Asia 2014)Building Isomorphic Apps (JSConf.Asia 2014)
Building Isomorphic Apps (JSConf.Asia 2014)Spike Brehm
 
Extending Custom Post Types
Extending Custom Post Types Extending Custom Post Types
Extending Custom Post Types ryanduff
 
Using Firebug & YSlow
Using Firebug & YSlowUsing Firebug & YSlow
Using Firebug & YSlowBrad Vernon
 
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby GroupIntro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby GroupBrad Vernon
 
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...Rob Friesel
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performancejeresig
 
jQuery and the W3C
jQuery and the W3CjQuery and the W3C
jQuery and the W3Cjeresig
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)jeresig
 
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08Tim Stephenson
 
Test Automation using Ruby
Test Automation using Ruby Test Automation using Ruby
Test Automation using Ruby Sla Va
 
Put a little Backbone in your WordPress
Put a little Backbone in your WordPressPut a little Backbone in your WordPress
Put a little Backbone in your WordPressadamsilverstein
 
React Fundamentals - Jakarta JS, Apr 2016
React Fundamentals - Jakarta JS, Apr 2016React Fundamentals - Jakarta JS, Apr 2016
React Fundamentals - Jakarta JS, Apr 2016Simon Sturmer
 

Tendances (20)

Web workers
Web workersWeb workers
Web workers
 
WordCamp SF 2011: Debugging in WordPress
WordCamp SF 2011: Debugging in WordPressWordCamp SF 2011: Debugging in WordPress
WordCamp SF 2011: Debugging in WordPress
 
Unobtrusive js
Unobtrusive jsUnobtrusive js
Unobtrusive js
 
JJUG - ActionScript3のススメ
JJUG - ActionScript3のススメJJUG - ActionScript3のススメ
JJUG - ActionScript3のススメ
 
Java script202
Java script202Java script202
Java script202
 
Building Isomorphic Apps (JSConf.Asia 2014)
Building Isomorphic Apps (JSConf.Asia 2014)Building Isomorphic Apps (JSConf.Asia 2014)
Building Isomorphic Apps (JSConf.Asia 2014)
 
Visual resume
Visual resumeVisual resume
Visual resume
 
Extending Custom Post Types
Extending Custom Post Types Extending Custom Post Types
Extending Custom Post Types
 
Using Firebug & YSlow
Using Firebug & YSlowUsing Firebug & YSlow
Using Firebug & YSlow
 
Why NodeJS
Why NodeJSWhy NodeJS
Why NodeJS
 
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby GroupIntro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
 
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performance
 
jQuery and the W3C
jQuery and the W3CjQuery and the W3C
jQuery and the W3C
 
Js unit testing
Js unit testingJs unit testing
Js unit testing
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
 
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
 
Test Automation using Ruby
Test Automation using Ruby Test Automation using Ruby
Test Automation using Ruby
 
Put a little Backbone in your WordPress
Put a little Backbone in your WordPressPut a little Backbone in your WordPress
Put a little Backbone in your WordPress
 
React Fundamentals - Jakarta JS, Apr 2016
React Fundamentals - Jakarta JS, Apr 2016React Fundamentals - Jakarta JS, Apr 2016
React Fundamentals - Jakarta JS, Apr 2016
 

En vedette

Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5Edureka!
 
Frontend automation and stability
Frontend automation and stabilityFrontend automation and stability
Frontend automation and stabilityMáté Nádasdi
 
Front end Tips Tricks & Tools
Front end Tips Tricks & ToolsFront end Tips Tricks & Tools
Front end Tips Tricks & ToolsSandeep Ramgolam
 
Sinau Bareng Frontend Web Development @ DiLo Malang
Sinau Bareng Frontend Web Development @ DiLo MalangSinau Bareng Frontend Web Development @ DiLo Malang
Sinau Bareng Frontend Web Development @ DiLo MalangMoch. Zamroni
 
User eXperience & Front End Development
User eXperience & Front End DevelopmentUser eXperience & Front End Development
User eXperience & Front End Developmentandreafallaswork
 
Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015Holger Bartel
 
Architecting your Frontend
Architecting your FrontendArchitecting your Frontend
Architecting your FrontendRuben Teijeiro
 
Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Grunt js for the Enterprise Vol.1: Frontend Performance with PhantomasGrunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Grunt js for the Enterprise Vol.1: Frontend Performance with PhantomasDavid Amend
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)Joseph Chiang
 
Wrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsWrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsRyan Roemer
 
A modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at AtlassianA modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at AtlassianMagnolia
 
How to Build Front-End Web Apps that Scale - FutureJS
How to Build Front-End Web Apps that Scale - FutureJSHow to Build Front-End Web Apps that Scale - FutureJS
How to Build Front-End Web Apps that Scale - FutureJSPhil Leggetter
 
W3 conf hill-html5-security-realities
W3 conf hill-html5-security-realitiesW3 conf hill-html5-security-realities
W3 conf hill-html5-security-realitiesBrad Hill
 
Modern Frontend Technology
Modern Frontend TechnologyModern Frontend Technology
Modern Frontend TechnologyShip Hsu
 
Front End Development Workflow Tools
Front End Development Workflow ToolsFront End Development Workflow Tools
Front End Development Workflow ToolsAhmed Elmehri
 
TechTalk #85 : Latest Frontend Technologies
TechTalk #85 : Latest Frontend TechnologiesTechTalk #85 : Latest Frontend Technologies
TechTalk #85 : Latest Frontend Technologiesbincangteknologi
 
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...Prasid Pathak
 
engage 2015 - Domino App Development - Where should I go now?
engage 2015 - Domino App Development - Where should I go now?engage 2015 - Domino App Development - Where should I go now?
engage 2015 - Domino App Development - Where should I go now?René Winkelmeyer
 

En vedette (20)

Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
 
Frontend SPOF
Frontend SPOFFrontend SPOF
Frontend SPOF
 
Frontend automation and stability
Frontend automation and stabilityFrontend automation and stability
Frontend automation and stability
 
Front end Tips Tricks & Tools
Front end Tips Tricks & ToolsFront end Tips Tricks & Tools
Front end Tips Tricks & Tools
 
Sinau Bareng Frontend Web Development @ DiLo Malang
Sinau Bareng Frontend Web Development @ DiLo MalangSinau Bareng Frontend Web Development @ DiLo Malang
Sinau Bareng Frontend Web Development @ DiLo Malang
 
User eXperience & Front End Development
User eXperience & Front End DevelopmentUser eXperience & Front End Development
User eXperience & Front End Development
 
Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015
 
Architecting your Frontend
Architecting your FrontendArchitecting your Frontend
Architecting your Frontend
 
Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Grunt js for the Enterprise Vol.1: Frontend Performance with PhantomasGrunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
 
Wrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsWrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web Applications
 
A modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at AtlassianA modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at Atlassian
 
Frontend technologies
Frontend technologiesFrontend technologies
Frontend technologies
 
How to Build Front-End Web Apps that Scale - FutureJS
How to Build Front-End Web Apps that Scale - FutureJSHow to Build Front-End Web Apps that Scale - FutureJS
How to Build Front-End Web Apps that Scale - FutureJS
 
W3 conf hill-html5-security-realities
W3 conf hill-html5-security-realitiesW3 conf hill-html5-security-realities
W3 conf hill-html5-security-realities
 
Modern Frontend Technology
Modern Frontend TechnologyModern Frontend Technology
Modern Frontend Technology
 
Front End Development Workflow Tools
Front End Development Workflow ToolsFront End Development Workflow Tools
Front End Development Workflow Tools
 
TechTalk #85 : Latest Frontend Technologies
TechTalk #85 : Latest Frontend TechnologiesTechTalk #85 : Latest Frontend Technologies
TechTalk #85 : Latest Frontend Technologies
 
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
 
engage 2015 - Domino App Development - Where should I go now?
engage 2015 - Domino App Development - Where should I go now?engage 2015 - Domino App Development - Where should I go now?
engage 2015 - Domino App Development - Where should I go now?
 

Similaire à Frontend at Scale - The Tumblr Story

Lotuscript for large systems
Lotuscript for large systemsLotuscript for large systems
Lotuscript for large systemsBill Buchan
 
What Your JavaScript Does When You're Not Around (Influx Days 2017 Edition)
What Your JavaScript Does When You're Not Around (Influx Days 2017 Edition)What Your JavaScript Does When You're Not Around (Influx Days 2017 Edition)
What Your JavaScript Does When You're Not Around (Influx Days 2017 Edition)Emily Nakashima
 
No Hugging, No Learning
No Hugging, No LearningNo Hugging, No Learning
No Hugging, No LearningOlaf Alders
 
State ofappdevelopment
State ofappdevelopmentState ofappdevelopment
State ofappdevelopmentgillygize
 
Codemotion Rome 2014
Codemotion Rome 2014Codemotion Rome 2014
Codemotion Rome 2014Ugo Lattanzi
 
Free Mongo on OpenShift
Free Mongo on OpenShiftFree Mongo on OpenShift
Free Mongo on OpenShiftSteven Pousty
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteChristian Heilmann
 
Increasing velocity via serless semantics
Increasing velocity via serless semanticsIncreasing velocity via serless semantics
Increasing velocity via serless semanticsKfir Bloch
 
Adding serverless to legacy applications
Adding serverless to legacy applicationsAdding serverless to legacy applications
Adding serverless to legacy applicationsbrettflorio
 
MongoDB World 2018: Tutorial - Got Dibs? Building a Real-Time Bidding App wit...
MongoDB World 2018: Tutorial - Got Dibs? Building a Real-Time Bidding App wit...MongoDB World 2018: Tutorial - Got Dibs? Building a Real-Time Bidding App wit...
MongoDB World 2018: Tutorial - Got Dibs? Building a Real-Time Bidding App wit...MongoDB
 
Web Api 2.X - Lattanzi
Web Api 2.X - LattanziWeb Api 2.X - Lattanzi
Web Api 2.X - LattanziCodemotion
 
Creating a Responsive Website From Scratch
Creating a Responsive Website From ScratchCreating a Responsive Website From Scratch
Creating a Responsive Website From ScratchCorky Brown
 
FlawDetector - Rubykaigi2013 LT
FlawDetector - Rubykaigi2013 LT FlawDetector - Rubykaigi2013 LT
FlawDetector - Rubykaigi2013 LT ginriki
 
Serverless in production, an experience report (Going Serverless)
Serverless in production, an experience report (Going Serverless)Serverless in production, an experience report (Going Serverless)
Serverless in production, an experience report (Going Serverless)Yan Cui
 
Copass + Ruby on Rails = <3 - From Simplicity to Complexity
Copass + Ruby on Rails = <3 - From Simplicity to ComplexityCopass + Ruby on Rails = <3 - From Simplicity to Complexity
Copass + Ruby on Rails = <3 - From Simplicity to ComplexityAugustin Riedinger
 
Silverlight vs HTML5 - Lessons learned from the real world...
Silverlight vs HTML5 - Lessons learned from the real world...Silverlight vs HTML5 - Lessons learned from the real world...
Silverlight vs HTML5 - Lessons learned from the real world...Peter Gfader
 
Serverless in production, an experience report (FullStack 2018)
Serverless in production, an experience report (FullStack 2018)Serverless in production, an experience report (FullStack 2018)
Serverless in production, an experience report (FullStack 2018)Yan Cui
 
Serverless in production, an experience report
Serverless in production, an experience reportServerless in production, an experience report
Serverless in production, an experience reportYan Cui
 

Similaire à Frontend at Scale - The Tumblr Story (20)

Lotuscript for large systems
Lotuscript for large systemsLotuscript for large systems
Lotuscript for large systems
 
What Your JavaScript Does When You're Not Around (Influx Days 2017 Edition)
What Your JavaScript Does When You're Not Around (Influx Days 2017 Edition)What Your JavaScript Does When You're Not Around (Influx Days 2017 Edition)
What Your JavaScript Does When You're Not Around (Influx Days 2017 Edition)
 
No Hugging, No Learning
No Hugging, No LearningNo Hugging, No Learning
No Hugging, No Learning
 
State ofappdevelopment
State ofappdevelopmentState ofappdevelopment
State ofappdevelopment
 
Angular js
Angular jsAngular js
Angular js
 
Codemotion Rome 2014
Codemotion Rome 2014Codemotion Rome 2014
Codemotion Rome 2014
 
Free Mongo on OpenShift
Free Mongo on OpenShiftFree Mongo on OpenShift
Free Mongo on OpenShift
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
 
Increasing velocity via serless semantics
Increasing velocity via serless semanticsIncreasing velocity via serless semantics
Increasing velocity via serless semantics
 
Adding serverless to legacy applications
Adding serverless to legacy applicationsAdding serverless to legacy applications
Adding serverless to legacy applications
 
MongoDB World 2018: Tutorial - Got Dibs? Building a Real-Time Bidding App wit...
MongoDB World 2018: Tutorial - Got Dibs? Building a Real-Time Bidding App wit...MongoDB World 2018: Tutorial - Got Dibs? Building a Real-Time Bidding App wit...
MongoDB World 2018: Tutorial - Got Dibs? Building a Real-Time Bidding App wit...
 
Web Api 2.X - Lattanzi
Web Api 2.X - LattanziWeb Api 2.X - Lattanzi
Web Api 2.X - Lattanzi
 
Creating a Responsive Website From Scratch
Creating a Responsive Website From ScratchCreating a Responsive Website From Scratch
Creating a Responsive Website From Scratch
 
FlawDetector - Rubykaigi2013 LT
FlawDetector - Rubykaigi2013 LT FlawDetector - Rubykaigi2013 LT
FlawDetector - Rubykaigi2013 LT
 
Serverless in production, an experience report (Going Serverless)
Serverless in production, an experience report (Going Serverless)Serverless in production, an experience report (Going Serverless)
Serverless in production, an experience report (Going Serverless)
 
Copass + Ruby on Rails = <3 - From Simplicity to Complexity
Copass + Ruby on Rails = <3 - From Simplicity to ComplexityCopass + Ruby on Rails = <3 - From Simplicity to Complexity
Copass + Ruby on Rails = <3 - From Simplicity to Complexity
 
Silverlight vs HTML5 - Lessons learned from the real world...
Silverlight vs HTML5 - Lessons learned from the real world...Silverlight vs HTML5 - Lessons learned from the real world...
Silverlight vs HTML5 - Lessons learned from the real world...
 
Serverless in production, an experience report (FullStack 2018)
Serverless in production, an experience report (FullStack 2018)Serverless in production, an experience report (FullStack 2018)
Serverless in production, an experience report (FullStack 2018)
 
Electron
ElectronElectron
Electron
 
Serverless in production, an experience report
Serverless in production, an experience reportServerless in production, an experience report
Serverless in production, an experience report
 

Dernier

Design Analysis of Alogorithm 1 ppt 2024.pptx
Design Analysis of Alogorithm 1 ppt 2024.pptxDesign Analysis of Alogorithm 1 ppt 2024.pptx
Design Analysis of Alogorithm 1 ppt 2024.pptxrajesshs31r
 
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....santhyamuthu1
 
solar wireless electric vechicle charging system
solar wireless electric vechicle charging systemsolar wireless electric vechicle charging system
solar wireless electric vechicle charging systemgokuldongala
 
Graphics Primitives and CG Display Devices
Graphics Primitives and CG Display DevicesGraphics Primitives and CG Display Devices
Graphics Primitives and CG Display DevicesDIPIKA83
 
Gender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 ProjectGender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 Projectreemakb03
 
cloud computing notes for anna university syllabus
cloud computing notes for anna university syllabuscloud computing notes for anna university syllabus
cloud computing notes for anna university syllabusViolet Violet
 
nvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptxnvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptxjasonsedano2
 
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptx
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptxVertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptx
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptxLMW Machine Tool Division
 
Carbohydrates principles of biochemistry
Carbohydrates principles of biochemistryCarbohydrates principles of biochemistry
Carbohydrates principles of biochemistryKomakeTature
 
Guardians and Glitches: Navigating the Duality of Gen AI in AppSec
Guardians and Glitches: Navigating the Duality of Gen AI in AppSecGuardians and Glitches: Navigating the Duality of Gen AI in AppSec
Guardians and Glitches: Navigating the Duality of Gen AI in AppSecTrupti Shiralkar, CISSP
 
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...Sean Meyn
 
Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...Apollo Techno Industries Pvt Ltd
 
Engineering Mechanics Chapter 5 Equilibrium of a Rigid Body
Engineering Mechanics  Chapter 5  Equilibrium of a Rigid BodyEngineering Mechanics  Chapter 5  Equilibrium of a Rigid Body
Engineering Mechanics Chapter 5 Equilibrium of a Rigid BodyAhmadHajasad2
 
Mohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptxMohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptxKISHAN KUMAR
 
CSR Managerial Round Questions and answers.pptx
CSR Managerial Round Questions and answers.pptxCSR Managerial Round Questions and answers.pptx
CSR Managerial Round Questions and answers.pptxssusera0771e
 

Dernier (20)

Design Analysis of Alogorithm 1 ppt 2024.pptx
Design Analysis of Alogorithm 1 ppt 2024.pptxDesign Analysis of Alogorithm 1 ppt 2024.pptx
Design Analysis of Alogorithm 1 ppt 2024.pptx
 
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
 
計劃趕得上變化
計劃趕得上變化計劃趕得上變化
計劃趕得上變化
 
solar wireless electric vechicle charging system
solar wireless electric vechicle charging systemsolar wireless electric vechicle charging system
solar wireless electric vechicle charging system
 
Graphics Primitives and CG Display Devices
Graphics Primitives and CG Display DevicesGraphics Primitives and CG Display Devices
Graphics Primitives and CG Display Devices
 
Gender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 ProjectGender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 Project
 
Présentation IIRB 2024 Chloe Dufrane.pdf
Présentation IIRB 2024 Chloe Dufrane.pdfPrésentation IIRB 2024 Chloe Dufrane.pdf
Présentation IIRB 2024 Chloe Dufrane.pdf
 
cloud computing notes for anna university syllabus
cloud computing notes for anna university syllabuscloud computing notes for anna university syllabus
cloud computing notes for anna university syllabus
 
nvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptxnvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptx
 
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptx
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptxVertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptx
Vertical- Machining - Center - VMC -LMW-Machine-Tool-Division.pptx
 
Carbohydrates principles of biochemistry
Carbohydrates principles of biochemistryCarbohydrates principles of biochemistry
Carbohydrates principles of biochemistry
 
Guardians and Glitches: Navigating the Duality of Gen AI in AppSec
Guardians and Glitches: Navigating the Duality of Gen AI in AppSecGuardians and Glitches: Navigating the Duality of Gen AI in AppSec
Guardians and Glitches: Navigating the Duality of Gen AI in AppSec
 
Litature Review: Research Paper work for Engineering
Litature Review: Research Paper work for EngineeringLitature Review: Research Paper work for Engineering
Litature Review: Research Paper work for Engineering
 
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...
Quasi-Stochastic Approximation: Algorithm Design Principles with Applications...
 
Présentation IIRB 2024 Marine Cordonnier.pdf
Présentation IIRB 2024 Marine Cordonnier.pdfPrésentation IIRB 2024 Marine Cordonnier.pdf
Présentation IIRB 2024 Marine Cordonnier.pdf
 
Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...
 
Lecture 4 .pdf
Lecture 4                              .pdfLecture 4                              .pdf
Lecture 4 .pdf
 
Engineering Mechanics Chapter 5 Equilibrium of a Rigid Body
Engineering Mechanics  Chapter 5  Equilibrium of a Rigid BodyEngineering Mechanics  Chapter 5  Equilibrium of a Rigid Body
Engineering Mechanics Chapter 5 Equilibrium of a Rigid Body
 
Mohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptxMohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptx
 
CSR Managerial Round Questions and answers.pptx
CSR Managerial Round Questions and answers.pptxCSR Managerial Round Questions and answers.pptx
CSR Managerial Round Questions and answers.pptx
 

Frontend at Scale - The Tumblr Story

  • 2. Frontend at Scale the Tumblr story
  • 3. What is Tumblr? → Platform for you to express yourself → ~200 million blogs → 83+ billion posts → HQ in NYC → Founded in 2007 → 100+ engineers
  • 4. What is Tumblr? → Three ways to surface content: → The dashboard
  • 5. What is Tumblr? → Three ways to surface content: → The dashboard → Search
  • 6. What is Tumblr? → Three ways to surface content: → The dashboard → Search → Blog network ! (Example: http://16-bitch.tumblr.com/)
  • 7. Who am I? → Chris Miller → Product Engineering Manager → Content Consumption (a.k.a., The Dashboard)
  • 8. Our stack → Frontend → Backbone (+ lodash, underscore, etc.) → jQuery (+ some plugins) → SASS (+ Bourbon) → a bit of VelocityJS → Gulp for build
  • 9. Our stack → Backend → PHP application layer → Some specialized services (Scala, C, etc.) → Data: MySQL, Redis, memcache, HDFS
  • 10. How does it work? → 1000’s of servers → Deploy dozens of times per day → Monitor and measure everything → Hadoop → OpenTSDB (backed by HBase)
  • 11. Our process → Teams are small → Iterate quickly → Release early and often, usually to % of users → 2 code review “ok’s” required for all Pull Requests
  • 13. Feature Flagging What is it? → Segregate your users to certain features → Control who sees what (and when)
  • 14. Feature Flagging Implementation → Server-side feature flagging → Client-side feature flagging
  • 15. Feature Flagging Usage → Provides → A/B testing → Run beta code alongside production code → Kill switch
  • 16. Feature Flagging A/B Testing → Injected recommendations → A/B(/*) testing of positioning → Which position is the best? Why?
  • 17. Feature Flagging A/B Test Results → Injected recommendations → A/B(/*) testing of positioning → Which position is the best? Why? Position 2 Position 3 Position 4 Position 5 Position 6 Position 7 Position 8 Position 9
  • 18. Feature Flagging Ramping & Kill Switch → Ramping new features → Deploy to only “admin” (staff) → …then 1% of users… then 5%… 10%… 25%… → Kill switch → Completely turn off a feature that’s breaking the site… poof
  • 19. Feature Flagging Use Carefully → Feature flagging certain functionality can give a mixed experience → Can cause user confusion: → “Why does my mom see this and I don’t?” — Confused teenager → Easy to build complex dependencies — don’t
  • 21. Error Logging Launching Features → New features usually have bugs → (Well, not my code) → (just kidding)
  • 22. Error Logging Error Logging → New features usually have bugs → Server-side errors, easy to find
  • 23. Error Logging Error Logging → New features usually have bugs → Client-side errors, also easy to find… → …on my browser
  • 24. Error Logging Error Logging → New features usually have bugs → Client-side errors, not easy to find on your browser → …until recently
  • 25. Error Logging Capture Errors → We built: exceptions.js → Really, it’s just: window.onerror
  • 26. Error Logging Capture Errors → Build dependency-free → Build to be defensive
  • 27. Error Logging Capture Errors → What you do with the logs doesn’t matter; it’s how you use it → We log errors to Scribe… → …throw them into Hadoop → …and count frequency with OpenTSDB
  • 28. Error Logging Error Data → With Hive, we can query Hadoop: → With this, I can see we log around 1.4 million errors per day
  • 29. Error Logging Error Data → With OpenTSDB we can plot the frequency of logs
  • 30. Error Logging We Love Graphs → We made pretty graphs with OpenTSDB and graph everything
  • 31. Getting it Right → Sometimes we find errors before our users do. → Sometimes. → And it makes us feel good.
  • 32. Getting it Right → So we dance.
  • 33. Thank You Email - cmiller@tumblr.com Follow me - ee99ee.com