A Guide to Component Driven Development (CDD)
Let components drive the development of your applications.
Update:
Read the new and updated version for 2023 with a full overview of composable application development, component-driven development, and required capabilites from solutions you can build or apply:
Almost every company in the world, from tech giants to service providers, relies on web application development to ship and market their products to billions of people. A single organization creates and maintains dozens or hundreds of web apps to build products, manage work, engage customers, drive marketing, and increase revenues.
Modern web technologies like components allow organizations to speed up and scale the development of web applications, create simple and decoupled codebases for autonomous teams, allow smooth integrations, increase the number and page of independent team releases, and allow more code reuse.
Component-driven development means embracing components as the new primitive of the web, and tapping into their modular power to achieve better speed, scalability, and standardization for web application development.
To learn more about how to better build with components, check out “How we Build Our Design System” and “How We Build Micro Frontends”:
Advantages of component-driven development
Simply put, component-driven development means designing your software applications by building loosely-coupled independent components. Conway’s law suggests this also means designing your organization in a similar way.
Much like decoupled micro-services enabled scale and efficiency for back-end development, the concept of component-driven development can enable similar advantages for teams building modern web applications in React, Vue, Angular or similar technologies.
Through component-driven development, organizations can achieve strategic goals that make their web development faster, more scalable, and efficient:
- Autonomous teams — That own well-defined features or products.
- Simple, decoupled codebases — Where teams can develop their own components without being delayed and complicated by others.
- Incremental upgrades — That teams can leverage to update independent components in their application in a fast and modular way.
- Rapid releases — That let teams independently and continuously deliver to product upgrades and fixes without waiting or fighting over master.
Addy Osmani lays out some key benefits of CDD for the quality of the software as well, as laid down in his FIRST principles:
- Faster development: Separating development into components lets you build modular parts with narrowly-focused APIs. This means it’s faster to build each component and learn when it’s good enough.
- Simpler maintenance: When you need to modify or update a part of your application, you can extend or update the component instead of having to refactor larger parts of your application. Think of it as performing surgery on a specific organ rather than on a whole system of the body.
- Better reusability: Through the separation of concerns components can be reused and extended to build multiple application instead of having to rewrite them over and over again (see: Sharing (components) is caring).
- Better TDD: When building modular components it becomes much easier to implement unit-tests to validate the focused functionality of each component. Larger systems can be more easily tested as it’s easier to understand and separate the responsibilities of every part of the system.
- Shorter learning curves: When a developer has to dive into a new project, it’s much easier to learn and understand the structure of a defined component than dive into an entire application.
- Better modeling of the system: When a system is composed out of modular components, it’s easier to grasp, understand and operate on.
Tools for Component Driven Development
There are several tools worth knowing when aiming to embrace component-driven development, each valuable for different use-cases.
Bit — The component-driven platform
If you take a look at Bit’s homepage, you will notice something cool — whenever you hover over a component, you can see that it is indecently integrated into the page as a fully modular unit.
And, you can see that these components are published in two different sets, each from a different codebase, owned and developed by a different team.
The first is Evanagislt — Bit’s marketing site’s components. These components are owned and developed by Bit’s marketing developers in their own codebase and exposed via the bit.dev platform.
The second is base-ui — Bit’s base components used to compose many parts of the web platform’s UI itself. These components are also autonomously owned and developed by Bit’s platform developers in their own codebase.
Bit includes two key parts —
a) A set of open-source tools that let developers build isolated components, resolve their dependencies, compose them into applications, control the independent build process, version and publish each component, and so on.
b) A cloud platform where all published components are shared, documented, made discoverable, and can be installed into different applications. Through the cloud platform teams can get and release updates to specific components, and learn how every change impacts dependant components in different apps.
By facilitating component-driven development, Bit provides increased speed, scale, and efficiency for the development of modern web applications.
It accelerates the development process through the modular creation and composition of components, it increases the number and pace of team releases, it reduces maintenance costs and overhead through the separation of concerns, and it provides better scalability for both the development process and the organizational structure.
Key advantages of Bit in making web development more efficient include:
Acceleration of web development
Bit greatly speeds the velocity of web development for the organization. It provides teams with the tools to quickly create, compose, upgrade, and manage components in their applications. It helps teams expose and integrate components with each other to build faster together, and brings component reuse up to 100% to save overlapping work. As a result, organizations can reduce time to market and increase the pace of delivery.
Standardization and governance
Bit helps to standardize the development process of components. It gives the organization tools such as customizable component development environments and automated workflows to define and regulate the way components are developed, built, tested and documented by all different teams and in all different applications.
Autonomous teams
Bit lets the organization define a flexible team structure that gives teams true autonomous ownership over their features or products, from development to production. Teams can independently develop components in their own codebases, constantly release innovation, and smoothly expose and integrate components with each other.
Scalable, decoupled codebases
Each team works independently in its own codebase, decoupled from other teams and with full separation of concerns, making each codebase much simpler to build, test and maintain. This gives the organization an improved ability to scale web development in the same sense that micro-services enables to scale back-end development.
More releases to production
Bit helps teams to increase the number and pace of releases to production. It leverages components to free the continuous delivery process of teams from each other, so that each team can constantly release upgrades, changes, or hotfixes multiple times a day. It provides teams with the tools to ensure they will not break anything, or anyone, else. Benchmarked testing shows up to X30 more releases to production by product teams.
Incremental upgrades
Bit prevents version bloating, master-branch wars, and delayed delivery cycles. Instead, it leverages components to allow the incremental release of modular upgrades to production. Unlike legacy techs, Bit does not build changes to an entire monolith. Instead, it only runs on the component dependency-graph, across all applications.
Structuring innovation
A small team empowered to make decisions and relentlessly drive toward their goals will deliver results and insights much more quickly than a larger group. After all, who knows the product’s users and problems better than the team who owns it?
Yet while product teams should be autonomous to deliver innovation, they still need to work together, and comply with the organization’s standards, tools, and guidelines.
Bit provides the organization with the tools to structure innovation. It empowers products teams to rapidly and independently release features and upgrades to production. At the sme times, it provides the organizations with tools to standardize, regulate, and monitor the development and status of components across all different teams and applications.
100% Component reuse and consistency
Bit makes every component in the organization reusable. It gives developers tools to very easily share their components with others, and reuse components shared by other to adopt into their own applications. It provides discoverability, collaboration, and management to independent components at scale to ensure reuse and consistency.
Improved resilience and maintainability
Bit lets organizations enjoy the benefits of building modular software. If something breaks, it will not break the entire application, and it’s much easier to replace, change, or fix it. When component-driven software is built in a modular and managed way, maintenance or changes become much easier, cheaper and less painful to perform.
Eliminating bugs and glitches in production
Bit provides tools to ensure that all component go through a standardized and automated pipeline for common tasks like build, test etc. No component that does not meet the organization’s criteria will ever make it to production. And thanks to Bit’s component-driven build mechanism, developers can know exactly how every change will impact all related components across all the organization’s applications.
Reduction of cost, resources, and effort
Bit saves organizations a great amount of development time, resources, and costs for web development. It reduces the amount of duplicated code in the organization, speeds the delivery of new features, reduces maintenance costs on fixes or changes, and eliminates a long list of tools and resources wasted on legacy problems and setbacks.
UI component explorers: StoryBook and Styleguidist
Storybook and Styleguidist are environments for rapid UI development in React. Both are great tools for speeding the development of your components.
Here’s a short rundown.
Storybook is a rapid development environment for UI components.
It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
StoryBook helps you develop components in isolation from your app, which also encourages better reusability and testability for your components.
You can browse components from your library, play with their properties and get an instant impression with hot-reload on the web. You can find some popular examples here.
Different plugins can help make your development process even faster, so you can shorten the cycle between code tweaking to visual output. StoryBook also supports React Native and Vue.js.
React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that lists component propTypes and shows editable usage examples based on .md files.
It supports ES6, Flow and TypeScript and works with Create React App out of the box. The auto-generated usage docs can help Styleguidist function as a visual documentation portal for your team’s different components.
- Also check out React Live by Formidable Labs.
Differences between StoryBook and StyleGuidist
With Storybook you write stories in JavaScript files. With Styleguidist you write examples in Markdown files. While Storybook shows one variation of a component at a time, Styleguidist can show multiple variations of different components. Storybook is great for showing a component’s states, and Styleguidist is useful for documentation and demos of different components.
Benefits of CDD for dev teams
When leveraging CDD development teams enjoy faster development times, more code reuse, better TDD and a unified consistent UI design system.
People can code with access to components already written, and collaborate on changes. New features or apps just means adjusting and tweaking your base components, and preventing mistakes later discovered in production.
Codesharing also means less code to maintain, so you can focus on building new things. When you build from the components up, you also get everyone aligned on the same page using the same building blocks, so your entire development workflows become standardized and yet remain flexible.
Some teams report up to 60% faster development through modular components based on a UI component design system implemented as React components. Some organization find they can delete ~30% of their codebase by adopting CDD. Uber, Airbnb, Shopify & more are moving to components.
Conclusion
Personally, I don’t think it’s surprising that CDD5 is more effective. As Brad Frost states in Atomic Design, modularity and composition are the basis for efficiency in physics, biology, economy and much more. In software, modularity breeds the same advantages: speed, reliability, simplicity, reusability, testability, extendability and composability. It’s better.
In the frontEnd of our applications, through CDD we also give a consistent UI and expirience for our users throughout our products and features. That makes them love what we build, and feel a bit happier. Everybody wins.
Thanks for reading! 🍻
