Rebuilding Reddit, A Case Study - Chris Slowe, CTO, Reddit
0 likes483 views
This document summarizes Chris Slowe's experience rebuilding Reddit. Some key points: - Slowe returned to Reddit in 2015 to help undo past mistakes and became CTO in 2017 to lead the rebuild. - The rebuild focused first on mobile apps and web to address issues like an outdated aesthetic and lack of trust in changes. - An initial small team used React and grew significantly over time with design, product, and engineering additions. - Extensive user testing was conducted throughout development to address issues and gather feedback. - Performance was a challenge given Reddit's legacy codebase but tooling helped identify and address problems. - Data and analytics were improved to better guide decisions and understand user behavior during the rebuild
![For the tech, not going to lie. Tiny helps!
“With unlimited power, we would have picked a different
language. But instead we decided on TypeScript in an hour,
possibly over lunch.
“By mid-February [2017], it was working well enough that it
was mandated as The Way.”](https://image.slidesharecdn.com/rebuildingreddit-acasestudy-chrisslowectoreddit-180814202056/85/Rebuilding-Reddit-A-Case-Study-Chris-Slowe-CTO-Reddit-23-320.jpg)
Rebuilding Reddit, A Case Study - Chris Slowe, CTO, Reddit
- 1. Rebuilding Reddit Chris Slowe, CTO, Reddit
- 2. A little about me ● PhD in Experimental Physics ○ Emphasis on the “science is messy” part ● Founding Engineer at Reddit (’05-’10) ○ Mostly doing platform and Infrastructure work when they still let me code. ○ Though the frontend stack we’re replacing is mostly my fault. We all have experimental phases. ● Returned to Reddit in middle ‘15 just in time to help undo my past mistakes ○ CTO in early ‘17, so guess they are my mistakes again.
- 4. What is Reddit? Reddit is the frontpage of the internet A social network where there are tens of thousands of communities around whatever passions or interests you might have It’s where people converse about the things that are most important to them
- 5. Reddit by the numbers Alexa Rank (US/World) MAU Communities Posts per month Comments day Votes per day 4th/6th 350M+ 1M+ 10.7M 2.8M 58M
- 6. Bring community and belonging to everyone Our Mission
- 7. Problems with rebuilding Reddit Problem: Reddit’s finely tuned aesthetic has been described as “dystopian Craigslist”. This is not a grand launching off point for everyone. It doesn’t help that Reddit is primarily a platform for criticising Reddit!
- 8. Reddit in 2006 (prototype.js)
- 9. Reddit in 2008 (jQuery!)
- 10. And 9 years later! Reddit in 2017….yeah
- 11. We decided to start with mobile apps
- 12. And our users noticed a certain subtle difference
- 13. Problems with rebuilding Reddit Problem: Reddit is already special to millions of people as it is...and they don’t necessarily trust us to not mess that up.
- 14. Our users have their own aesthetic sense
- 15. Why the fear? Prior art August 2010 December 2010
- 16. Why the fear? Prior art...oh. August 2010 December 2010
- 17. Whenever they signed up, it was perfect for them
- 18. Making the Next Thing Pick a technology and (mostly) stick to it, with about 9 years of technological advancement to take advantage of!
- 19. Enter React: New framework, new paradigm ● First rewrite was instructive...as a disaster. Targeted redoing mobile web. ○ Smaller traffic (than the web site) ○ Little downside for doing a better job
- 20. Enter React: New framework, new paradigm ● First rewrite was instructive...as a disaster. Targeted redoing mobile web. ○ Smaller traffic (than the web site) ○ Little downside for doing a better job ● Second rewrite went better ○ Small surface area meant we could iterate ● After learning how (not) to use React, settled on a plan for an initial web rebuild
- 21. Initial foray into redoing web as a project by a single engineer over a holiday break
- 22. Initial team was tiny ● Started late December 2016 ● Company size was 150, Engineering 70 ● 2 engineers spearheading the work ● Rabidly working to build out a team ○ Grow a cohesive design team from scratch ○ Bulk up our Product org ● Hired a Director ○ Grow the primary redesign team (RCX)
- 23. For the tech, not going to lie. Tiny helps! “With unlimited power, we would have picked a different language. But instead we decided on TypeScript in an hour, possibly over lunch. “By mid-February [2017], it was working well enough that it was mandated as The Way.”
- 24. Making the Next Thing User Testing All Mods + Beta Mods Alpha User Alpha Internal Opt-In Alpha Opt-In Mods Ext. Users Ext. A/B Testing All Mods All Beta Users GA Invite Only Default Invite Only All Users Qual Feedback via Survey ~1,000 Users Qual Feedback via Survey ~1,000 Users Quantitative Feedback via metrics 1,000 - 100,000 Users Quantitative Feedback via metrics 100,000 - 1,000,000 Users Sample Opt In
- 25. Enter UX Design! ● Not just building a new product, also building a whole Product org around it ● The redesign is going to be the main new product surface, so hired core and federated design teams. ● User Research team spun up to cover: ○ New user stories (“I don’t know what I’m looking at”) ○ Power user stories (“Why are you killing Reddit?”) ○ Hundreds of hours of videos and interviews ● Most importantly: Give Snoo depth!
- 26. Design issue: CSS ● Legacy stack allows for arbitrary styled components with CSS! ● Tradeoff: total DOM lock-in
- 27. Design solution: Structured Styles
- 28. Design issue: Whitespace ● Legacy stack is super dense.
- 29. Design solution: Ultra-compact mode
- 30. Performance issues Problem 1: ● Current app: server rendered “instant” load ● React app: “single page” shell with content via API ● Issue: Even if they are the same speed, the new one looks slower! ● Resolution: Measure everything! Problem 2: ● Scrolling should be buttery smooth (“Reddit is JUST TEXT!”) ● ...but we’re still learning about React and how to properly manage paint and layout.
- 33. The Conspiracies
- 34. The Conspiracies
- 35. Community Assistance and Improvement
- 36. TL;DR Listen to your users
- 37. Making the Next Thing Being guided by data
- 38. Pre-2015: “Analytics” before the pipeline ● Pros: Resilient and scalable ● Cons: Async, inflexible, limited metadata ○ whatever can be crammed into a (single) pixel per view App App App
- 39. 2017-8: BigQuery & Real Time Analytics Midas (Enrich) App App App Event Collector s Event Collector s Event Collector s Event Collector s Minsky (ML) Spamurai (Rules)
- 40. Event debugger
- 41. Event debugger
- 42. Event debugger
- 44. The reveal
- 45. The reveal
- 46. With thanks to the team