Designing Components for Fun, Profit and Sanity
summary
Team rebuilds a fresh codebase from scratch after a five year old stack, with a team of 10 facing over a thousand components; the concrete claim is that designing outside-in and breaking UI by splitting along data lines yields fewer awkward, 20‑prop monsters. Practices include using React-friendly patterns, adding data adapters right after fetch, iterating quickly, and accepting some duplicate code. The result: a new component library, fewer brittle props like the input‑text Frankenstein, and measurable performance wins.
AI-written summary · about
chapters (26)
- 0:00Introduction
- 0:50What is Carousel
- 1:24Electrical Engineering
- 1:55Web Platform
- 5:14Components
- 5:44Data Structure Algorithm
- 6:20Single Responsibility Principle
- 6:41Composable
- 7:37Atomic Design
- 8:37Select
- 9:49Reusable Components
- 11:36Soft Imaginary Problems
- 12:23Coding Guideline
- 12:40Pitch
- 13:30Text Component
- 14:15Component Library
- 15:21Pitch Component
- 15:43Dont make it awkward
- 16:53Sleep a Component
- 17:08DataDriven Apps
- 17:35Different Models
- 19:09Component Definition
- 19:26Component Demonstration
- 21:25Props are optional
- 22:07Dont shy about having to placate code
- 22:54Conclusion
related talks
46mBuilding Reusable Components ... That Are Actually Reusable
51mBuilding Better Components — A Journey to a More Resilient Frontend
39mDesigning with Components
18mOff with Their Heads: Rise of the Headless Components
30mReusability: Sharing Components
44mWriting good components
24mCase Study: Creating a Component Library in React JS
24mFrom Sketch to Code Designing a Component Kit