Hot Swapping Our Rails Front End In Secret - A Rebrand Story
summary
Betterment replaces its entire front end across apps in eight weeks by dark‑deploying a rebrand behind TestTrack feature flags, shipping a rewritten design system called Style Closet and using Rails’ action pack variants to keep old and new views side‑by‑side. The team ships 44 releases, 247 Style Closet PRs, cuts retail CSS from ~10,000 to ~2,000 lines and reduces payloads from 86K to 40K gzipped, and flips the global switch on schedule — it works.
AI-written summary · about
chapters (25)
- 0:00Intro
- 0:28Chris LoPresto
- 3:48Feature Flag Framework
- 4:49TestTrack
- 7:05Launch Techniques
- 7:42Rebrand Design System
- 8:45New CSS Behind Feature Flag
- 9:59Add View Logic
- 12:47Action Pack Variants
- 15:24Design System Woes
- 16:50Design System Inspiration
- 17:15Style Closet 2.0 Tenets
- 18:10Spacing System
- 18:46Color System
- 19:10Breakpoint System
- 19:35Typography System
- 19:50Vertical Rhythm
- 20:07Grid System Based on
- 21:10Layout Components
- 21:34Visualization Tools
- 22:49Are constraints good for you?
- 23:38Reskin Mode
- 25:12Pull Requests
- 27:01CSS Specificity
- 29:18CSS Payload Size
related talks
31mReact on Rails
40mOptimize for developer speed
35mChanging the wheels on the bus at 80 mph: Upgrading to Rails 3
23mRails Frontend Evolution: It Was a Setup All Along
35mFrontendless Rails frontend
26mKeeping the Rails Magic Alive After 18 Years
23mCrafting Rails Culture
19mStealth-mode North Star! Rebranding in secret with feature flags