The development and design practice of building user interfaces with modular components. UIs are built from the “bottom up” starting with basic components then progressively combined to assemble screens.
Modern user interfaces are more complicated than ever. People expect compelling, personalized experiences delivered across devices. That means frontend developers and designers have to embed more logic into the UI.
But UIs become unwieldy as applications grow. Large UIs are brittle, painful to debug, and time consuming to ship. Breaking them down in a modular way makes it easy to build robust yet flexible UIs.
Components enable interchangeability by isolating state from application business logic. That way, you can decompose complex screens into simple components. Each component has a well-defined API and fixed series of states that are mocked. This allows components to be taken apart and recomposed to build different UIs.
History: Software engineer Tom Coleman introduced Component Driven in 2017 to describe the shift in UI development toward component architectures and processes. The idea of modular UI has many parallels in software movements such as microservices and containerization. Historical precedents also include lean manufacturing and mass manufacturing circa early 20th century.
Components are standardized, interchangeable building blocks of UIs. They encapsulate the appearance and function of UI pieces. Think LEGO bricks. LEGOs can be used to build everything from castles to spaceships; components can be taken apart and used to create new features.
Build each component in isolation and define its relevant states. Start small.
Compose small components together to unlock new features while gradually increasing complexity.
Build pages by combining composite components. Use mock data to simulate pages in hard-to-reach states and edge cases.
Add pages to your app by connecting data and hooking up business logic. This is when your UI meets your backend APIs and services.
Design systems: A holistic approach to user interface design that documents all UI patterns in a centralized system that includes assets (Sketch, Figma, etc.), design principles, governance, and a component library.
JAMStack: A methodology for building websites that pre-renders static files and serves them directly from a CDN (as opposed to a server). The UIs of JAMStack sites rely on componentized JavaScript frameworks.
Agile: A method of software development that promotes short feedback loops and rapid iteration. Components help teams ship faster by reusing readymade building blocks. That allows agile teams to focus more on adapting to user requirements.
The Component Story Format is an open standard for component examples based on JavaScript ES6 modules. This enables interoperation between development, testing, and design tools.