Component-Driven Development, Done Properly
Building interfaces as independent, testable components that are developed and reviewed in isolation before being assembled into pages.
Marcus Adeyemi
The key figures
- Isolation tooling
- component workshops that render a component outside the application
- Testing levels
- unit, interaction, visual regression and accessibility
- Composition
- small components combined rather than large configurable ones
- Prop discipline
- a component with twenty options is usually two components
Why this is worth getting right
It makes the unit of work small enough to review properly and reuse honestly, which is the difference between a design system on paper and one in the codebase.
Do this, not that
Do
- Build and review components in isolation before wiring them into a page
- Test the accessible behavior of the component once, where it lives
- Prefer composition to configuration when the option count grows
- Document each component's intended use next to the component
- Catch visual regressions automatically rather than by eye
Don’t
- Components that know about the page they sit on
- One component with an option for every variation anyone has asked for
- Isolation tooling that drifts out of date with the real application
- Splitting into components so small that composition becomes the hard part
When to bring in help
Our advice Bring in help when the same component has been implemented several times, when visual regressions keep reaching production, or when a component library has become harder to use than writing the markup directly.
Where this comes from
- Figma Help Center — Component structure
- MDN Web Docs — Web components
- Deque University — Accessible component patterns
The figures and practices above come from the sources listed.
Working on something like this?
We take on Web Design & Development work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
