Design Pattern
A known way of solving a common problem.
Definition
A reusable solution to a recurring interaction problem, described independently of any specific implementation.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
In plain language
A known way of solving a common problem.
Example
Faceted filtering is a pattern. A specific filter panel component is an implementation of it.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Component
TermA named, reusable piece of interface with a defined API and set of states.
Key difference
A component is a specific, reusable implementation. A pattern is the repeatable solution behind it, which may be built from several components and may be implemented differently in different places.
Use Design Pattern when
- The answer is a way of doing something, not a single element.
- It composes several components, or none in particular.
- The guidance is about when and why, not about props.
Use Component when
- The thing has props, variants and a place in the library.
- The question is what it renders and how it behaves.
- Two teams should be using exactly the same one.
Local chart
TERM·038 · Region X · Grid D6
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Deeper reading
The full entry behind this definition.
- Jakob's LawLAW·003 · Law
- FilteringPAT·004 · Pattern
- NavigationPAT·001 · Pattern
Nearby in the Atlas
Adjacent territory, found through shared tags rather than a stated link.