Verbosity, Maybe the Key to Better Code
summary
Argues that writing more explicit, duplicated code plus documentation leads to clearer, safer systems than premature DRY. Uses React and TypeScript with react-final-form and react-date-picker to build a “book meeting” form stretched across four product areas where three out of four steps differ, causing component bloat and painful debugging. Recommends separate parent components and a simple dumb form per area, document in Storybook docs, then consolidate when duplication appears duplicate-first, DRY-later.
AI-written summary · about
chapters (16)
- 0:00Introduction and background
- 1:09Dry code principle explained
- 2:34Defining verbosity and conciseness
- 3:35Building the meeting form component
- 6:46Expanding product requirements
- 7:49Dry code leading to complexity
- 13:31Real-world component challenges
- 16:42Three common problems with dry code
- 18:06Business vs developer logic
- 20:35Problem with shared components
- 21:39Solution: Duplicate components
- 23:27Implementing separation of concerns
- 25:09Documenting components clearly
- 26:40Benefits of separation of concerns
- 27:01When to refactor to DRY code
- 27:42Q&A
related talks
42mClean Code vs. Dirty Code: React Best Practices
26mOn the way to making the React components more reusable
39mClean, Concise, Collaborative Code
24mBuild React Apps Fast Using Storybook, DDD, and Atomic Design
35mAvoiding code spaghetti by making ravioli
40mCompassionate Components
26mGood Code
43mScalable Best Practices for Your Development Team