Building and maintaining messenger.com
summary
Building messenger.com means a full‑page React app with concrete front‑end choices: CSS modules with docblocks and automated class munging, a global CX class transform that lets static analysis pull CSS into bundles, and a packager step that merges frequently co‑loaded CSS to save requests. The team drops legacy browser support to use flexbox, fixes an RTL comma bug by switching fonts to Ariel, measures titles in JavaScript for truncation, replaces icon images with styled divs, and notes one machine‑generated package name once broke ad blockers.
AI-written summary · about
chapters (13)
- 0:00Start
- 1:41how do we front-end at Facebook
- 1:55modules
- 4:45static analysis
- 5:15the two modes
- 8:50less or sass
- 9:29CSS Constants
- 9:55How did it all start?
- 10:09style-agnostic components
- 11:20no old browsers!
- 11:43new css stuff!
- 13:09one font definition
- 16:58Messenger Interface Guide
related talks
14mBuilding the New Facebook with React and Relay
30mRebuilding Facebook Chat
42mChallenges for Developers of Building Large Web Applications
13mSpeed at Scale: Optimizing The Largest CX Platform Out There
47mThe Micro Frontend Architecture: How to Turn Your Website into a Giant Collaborative Puzzle
55mA Little Story About A Big Bang Redesign
29mPreprocessors, Components, and CSS in JS or: How I Learned to Stop Worrying and Love the Website
16mMightyMeld Architecture 101: Future of Frontend