Composable Applications and Component-Driven Development: The Composable Platform
Building composable apps in an orchestrated and scalable way using a component-driven development platform.
“Helping developers work smarter and faster with a sharable, building-block approach to creating consistent experiences is central to Dell Digital’s modern, customer-centered focus. Sharing components empowers developers to develop and release features faster and in a consistent way. They can publish and access components and UX features applicable across many digital experiences.
Before, developers had been really frustrated with having to write seemingly a million lines of code over and over again, figuring out details and doing the testing. With readily available components, they can now develop and deliver in one quarter the time it took previously. They can now put their efforts into more innovative feature development.”
Technology Transformation Leader at Dell, Bit Platform (read article →)
By 2024, Gartner believes that 70% of organizations will have composability as a key criteria for app development, gaining speed through discovery; greater agility through modularity; better leadership through orchestration; and resilience through autonomy.
In this article, we’ll dive into the required capabilities for building a composable architecture in a component-driven way, and how to streamline and scale the process with a dedicated platform and OSS tools.
Why component-driven development and composable apps?
Prior to Component Driven Development (CDD) and composable app development, the monolithic project-oriented toolchain made the process of scaling the development of multiple products and teams very challenging. Each application was developed as a siloed code project with all its features as internal code implementation that’s highly coupled to a specific project, making it difficult to separate, share and update different application parts across the system.
Patched solutions required a lot of architecture bending, additional tools built and integrated, and created complex problems such as code-sharing, version control, dependency management, updates etc. Each project became harder to scale as more features and devs joined, while organizations had no effective way to share components, collaborate on changes, and orchestrate updates. As a result, developers had to write the same code over and over again leading to a tremendous waste of time and resources and to inconsistent product experiences. Organizations as a result experienced diminishing ROI on software development.
CDD is an evolutionary composable approach to modern software development. It defines an architectural design pattern that solves fundamental challenges that have held-back software development for decades, via composability and modularity for application development.
CDD defines a composable architecture where applications are composed like Lego through smaller, independent and reusable building blocks — components. CDD is a reuse-based approach; components are shared and managed as building blocks and made available to all teams and products in the organization, to be efficiently reused and orchestrated at scale.
Components can be anything from simple UIs to features, micro-frontends, full user-experiences, apps, utils, and even front and backend logic. By splitting development into loosely coupled-components, development can be distributed between teams and components become reusable assets which are shared and orchestrated across products.
The benefits of composability and CDD are game-changing in the short and long term:
- Delivery speed: Reusable components allow developers to accelerate development and reduce development time by 80% on new products — as they don’t have to re-write code, make decisions, and repeat work over and over again (see Dell Case Study with Bit).
- Product consistency: Reusable components provide optimal consistency in code, design and user-experience across the organization’s products and digital experiences.
- Efficiency and ROI: With reusable components developers don’t have to write the same code over again, cutting development costs per app by up to 80%. Each component is built once and becomes a shared asset with compounding value (see ROI case study).
- Autonomous teams and rapid delivery — Domain-expert teams can autonomously own, develop and ship components for different business responsibilities (e.g. “UI”, “Payments” etc), allowing rapid-delivery and fast response to emerging needs.
- Scalable and maintainable architecture — A composable app system built with components is highly modular, and can be more easily maintained and scaled. With a CDD platform, components can be shared, updated and orchestrated across the system.
Additional benefits include smarter planning — when new needs arise, architects and developers decide whether to extend existing components or create new ones; higher-quality products — component reuse prevents the majority of bugs and mistakes and the quality of software products greatly improves; experience customizations — each experience can be easily customized with different versions to optimize different user journeys even at a large scale; cross-functional collaboration — designers, developers and all stakeholders can plan and actively participate in the development process directly over actual app components; development agility — CDD improves agility by breaking down decisions and delivery to the component-level; governance and visibility — leaders gain an X-Ray view into the organization’s available technological assets and can track the usage and impact of components and initiatives in the organization; standardization and modernization — with CDD development is standardized from techs used by components to their release process. New features can be added to legacy apps in an ever-green process; faster on-boarding — on-boarding developers to new products is faster when they just need to work on components.
Going composable with a dedicated Component-Driven Development Platform
While CDD can exist in small pockets without a supporting platform, composability at scale requires a variety of solutions to maximize ROI and ensure a frictionless experience.
CDD and composable app development require a long list of capabilities in order to be successful and to be scaled. As old tools were not built for component-driven development in the first place, the effort, time, cost and complexity risk of building and maintaining a complete alternative solution are massive.
While the past project-driven development toolset does not provide the required capabilities to facilitate this new type of development, dedicated platforms and toolchains such as Bit provide a complete set of solutions in a single, scalable workflow.
Take a minute to look through this OSS composable platform foundation:
A dedicated platform sets the foundations for CDD and composability to be successfully applied and scaled, while providing all the required capabilities in one workflow. It reduces the time and cost of building and patching tools to solve a long list of capabilities (which can be well into years and millions of dollars), and eliminates the risk of facing complex challenges and issues.
Required capabilities of a CDD and app composability platform
To allow the successful development of applications via composable components, and to scale this process effectively in the organization, a long list of critical capabilities are required.
Bit and Bit Cloud offer a complete solution for innovative teams building composable software products. As the industry leading component-driven development platform, it powers composable app development at scale for thousands of teams and fortune-500 companies.
Below is a short summary of key capabilities required for a CDD platform and provided by Bit.
1. Component-driven development toolset
In order for components to become building-blocks and to be shared across products, they must be decoupled from the internal implementation of a specific project. The past project-driven toolset was never built for this purpose, and makes this process extremely hard to achieve.
Bit provides a complete OSS toolset for the development and composition of composable components, as “containerized” and managed application build blocks, including:
Bit component: A Bit component works as a “container” for any unit of software. It includes everything required to develop, build, use, update and manage the component independently.
A Bit component can be an app, a feature, a micro-frontend, a user-experience, a UI piece, or even a backend service or a CLI script. Each component can be developed and used anywhere.
Component workspace: Bit’s workspace allows developers to create, manage and compose components. It can be spawned in or outside any existing codebase. The workspace provides a simple and consistent experience for developing, versioning, testing, managing, and composing components via dependencies without the limitations of a repo and without paralyzing manual configurations. A built-in GUI and fast dev-server provide an enjoyable live visual feedback.
Component dev-environments: Bit allows developers to define and reuse dev-environments for their different components in order to develop, build, test, lint etc each component. Environments are also components, and can be customized, shared and reused. Each component has a fully independent dev lifecycle, and development becomes more standardized.
2. Component source-code control and versioning
In order for CDD to be applied, the source-code of each component must be Independently controlled and each component must be independently versioned. However, the past project-driven tools were simply not built for this job. Without a dedicated CDD toolset, an incredible amount of work and time will be wasted on this process, in an un-scalable way.
With Bit, each component’s source code is managed and controlled separately. Each component is versioned independently and can be updated alongside other components that depend on it. All in one simple, consistent and scalable workflow. Bit Cloud features such as “component-compare” and “change review” provide a complete workflow for suggesting, reviewing and collaborating on changes to components across the organization.
3. Dependency management: automated, smart and consistent
As the organization builds and shares components, they are composed together as dependencies and defendants. As your graph of components and dependencies grows, it quickly becomes hard to manage your dependencies and prevent painful issues.
Bit provides a unique mechanism to automatically define and manage dependencies in an effortless and consistent way. Instead of drowning in configuration files and facing complex issues such as missing or conflicting dependencies, Bit provides automatic dependency detection, consistent version management, and smart update policies to help streamline and scale dependency management from the local workspace to the entire application system.
4. Packaging and distribution
Without a dedicated solution, packaging and distributing independent components is a challenging task that’s even harder to scale. It requires a lot of manual work and patches to package, publish, maintain, and manage many small components.
With Bit’s dedicated CDD toolset each component is independently versioned and seamlessly packaged as part of your development workflow, and can be distributed with artifacts built, delivered and stored. Each component automatically becomes a published package as it’s exported regardless of where and how you develop it and your architecture.
5. Central platform for sharing and collaborating
A central platform is key to the success of a CDD, composable app development, and a shared component system. Through the hub, components are organized, shared, and made available to everyone in the organization. It must provide many additional required solutions such as discoverability, a process for suggesting and collaborating on component changes, the orchestration of updates across the organization, and component analytics and control.
Building this platform is an overwhelming undertaking for any organization. Over 5 years and tens of millions of dollars were invested into Bit Cloud, the world’s #1 complete composable product development platform. It provides all required capabilities for organizations to leverage and scale CDD, share components, and collaborate — in one place. It comes enterprise-ready with top security and compliance standards, and powers development for large global teams.
6. Discoverability and search
As many components are shared on the platform it becomes crucial to make them easily discoverable to everyone on the team or in the organization. While searching for code in the organization’s repos used to be daunting, discovering components should be quick and simple.
A scalable platform for shared components must be equipped with great solutions for exploring, searching and choosing components. Bit Cloud provides the most advanced discoverability solutions in the market, with a powerful natural-language contextual search and features, making it easy to search and evaluate components by context, functionality, tech etc.
7. Consumption, installation and integration (build time and runtime)
Components must be easily consumed and used in other different components and products. Without a dedicated solution, this requires a set of additional tools and solutions.
Bit components can be easily consumed in a variety of ways. They can be installed as packages directly from Bit Cloud or any other registry, and used via build time integration. It also plays well with your Artifactory and CIs. Additionally, components can be forked or imported as source-code for quick local modifications, making it easy to adopt components and contribute to the system.
In use-cases such as Micro Frontends for example, components can be integrated at runtime as well using a variety of tools such as Single SPA and Module Federation (see here).
8. Up-to-date component documentation and visualization
Documentation for components is key to effectively reusing them in the organization. Without a component platform, additional tools will have to be added, which will only provide a static visual version of the components that is not automatically up to date and includes limited information.
With Bit, documentation is a native part of components and is continuously updated with the latest versions and changes.
Instead of an external static documentation site, documentation is available as part of the actual components shipped to production. It includes visual previews, APIs and props, test results, dependencies, techs used and more.
Docs can also be enriched using modern techs (e.g. MDX) and Figma designs can be embedded alongside the previews. A complete Figma integration is on the roadmap.
9. Change suggestions and review process
In a composable application system, changes are suggested and shipped to components across the system. The past project-driven toolchain does not provide such a solution at the component level for composable apps.
With Bit, developers can make changes to a set of components and create a “change request” on Bit Cloud. Changes might impact other components and products, so the full impact of changes across the system is reflected in the request. Changes to code, visual design, dependencies and more can be reviewed, discussed and updated across the system.
In the review process, designers and other stakeholders can join in to review, discuss and participate in the releases process directly over the components about to be shipped to production. Designers can even be assigned as mandatory reviewers to approve changes across the system.
10. Component-driven builds: Ripple CI
A critical part of CDD is the ability to build, test, and integrate changes to components across multiple apps and teams in the composable system. The build system must also be able to handle a myriad of dependencies, build rules, code checkers, linters, and testing solutions.
As past CI are built for a single project, they struggle with performance and are limited to building one version of once project at a time. Teams had to fight over the main branch, and updating a component across projects was a long, costly and incredibly challenging process.
Ripple CI is the world’s first component-driven CI. It taps into the power of composability to free everyone to deliver simultaneously, and continuously integrates the entire organization. It’s available on Bit Cloud and can be used to radically improve delivery and change integration:
- Only changed/impacted components are built — Ripple is the fastest CI in app-development history, and only builds changes to impacted components.
- Split and simultaneous builds — changes to different components in the same applications can be built simultaneously; no more fighting over the main branch.
- Cross-applications build process — Ripple CI builds changes to components and their impacted dependencies across all impacted applications in the organization.
- Isolated building and testing — each component is built and tested in isolation, making it easy to dive in and fix a specific component in case it fails to pass.
- Partial updates and re-builds — components that pass can be updated, and only failed components will have to be fixed and built again. No more “all or nothing” builds.
- Simulations and previews — as part of the build process Ripple CI provides visual simulations of the change’s impact on every page and product in the organization.
11. Orchestrated updates
Updates to components must be streamlined and synchronized across many different products and teams in the organization. Without a dedicated solution, it is a next-to-impossible mission.
With Bit Cloud, approved component changes can be merged and updated across the entire organization in one atomic process — keeping all teams and products in perfect sync.
This is made possible by the graph of Bit components in the organization, and the ability to merge changes and release new versions of components to all dependent products and teams. Developers can build, test, review, merge and update the entire system in one workflow.
A GitHub/GitLab integration is on the roadmap to automatically create and track pull-requests, to provide seamless backwards compatibility with the repository and project ecosystem.
12. Component analytics and visibility
In order to manage a CDD implementation and shared components, the platform must provide a means of exposing analytics about the development activities of the component system.
With Bit Cloud, leaders gain X-Ray visibility into the creation of components, their usage and adoption, new updates, and the technological stacks they use. When a new feature is added or a change is made across the system, leaders can measure its impact on the entire organization, technologically and business wise.
13. Permission-based user management
A scalable CDD platform for shared components must include advanced features for user and team permission management at the enterprise level. Bit Cloud comes equipped with advanced permissions and control at the scope, organization and actions level for all users on the system, so that the organization can control the permissions of members of the organization.
14. Ecosystem compatibility and integrations
A dedicated platform for CDD must remain compatible with the app development ecosystem. Keeping your solutions up to date and compatible with a fast-evolving technological landscape is a challenging task for any team on their own. Bit was designed to be easily compatible and extendable to support the latest versions of the modern stack and new tools, and our dedicated team works constantly to ensure compatibility and support with the technologies and tools you use, and provide it by design to every organization that builds with the platform.
15. Enterprise-readiness: security and compliance
A shared component platform must meet all the necessary enterprise requirements in terms of security and compliance. Bit is equipped with SOC2 type 2 compliance and best-in-class security features such as SSO and VPN access control. It is trusted by Fortune-100 teams.
16. Expert support and advisory
A system of shared components can be enhanced with expert knowledge to save time, eliminate risk, and speed up the success of the system. Bit’s team is highly experienced and works constantly with the world’s best team to build and scale CCD and composable apps.
Bit’s enterprise programs provide support and advisory by industry experts with SLA based engineering-level support; use-case oriented PoC and onboarding with expert architects; access to assigned SEs, CSs and AEs; Periodic health-checks and advisory meetings with our team
Common use-cases and where to start
A composable transformation does not have to happen overnight. It can take place gradually, solving one problem or enabling one desired solution at a time. Below are a few popular use-cases for introducing CDD and composability into your organization and workflow. Our team of experts can successfully guide you through each with tailored programs and resources.
1. Composable frontends (Micro frontends):
Scaling frontend development is hard with a monolith. A better alternative is composing your products with independent components as micro-apps that work loosely together.
It’s easier for developers to build and iterate on different application parts, as each component is developed in a different codebase and released independently. It’s easier for teams to split ownership, scale development, and work autonomously side by side. Bit facilitates this workflow, and allows the sharing and updates of Micro frontends across applications and products. Bit plays well with both build time and runtime integration, using your favorite tools.
→ Watch “from monolithic app to Micro Frontends” (coding demo)
2. Composable design-system (UI/UX consistency):
Surveys show that before composability, over 74% of design systems failed to get adoption in the organization. This is because a library published as a single package is just hard to adopt; it’s like a CD-Rom with components you have to use, and can’t customize to fit different needs.
Instead, Bit UI components — and composable theme components — allow you to create a shared ecosystem of independent UI components, get adoption, orchestrate updates, and get contributions from teams across the organization. It also improves designer-developer collaboration by bringing in designers to review and discuss changes across the system visually.
→ Check out our own “teambit/design” scope on Bit Cloud
→ Watch “Building a composable DS that gets adoption”
3. Scalable and managed code reuse:
Duplicating code across the organization’s applications and projects is a fast lane to maintenance hell. Instead, any common code functionality can be a Bit component, so it can be easily reused, managed and updated across the system in a scalable and effortless way.
→ Watch “Reusing JS utils at scale” (coding demo)
4. Modernizing legacy apps:
Modernizing legacy apps used to mean entering a long and costly project to rebuild and replace the app. However, Bit components allow you to create new features with new techs outside the legacy app, and gradually add them. You can also extract and componentize existing features, to gradually modernize an app without an upfront all or nothing investment.
→ Watch “Modernizing apps with components” (coding demo)
5. Composable application architecture:
Teams often scale with the need to solve multiple problems that arise from their codebase architecture and state, such as code-sharing, splitting development, and legacy refactoring. The choice between monorepos and polyrepos leads to an impossible tradeoff and creates new pains such as versioning, builds and dependency management However, a composable app architecture and CDD with a platform like Bit provides the benefits of both in one scalable workflow and architecture.
→ Watch “Dependency management in a “monorepo” with Bit” (coding by pnpm’s author)
6. Composable backends:
CDD is not just for frontend. More and more teams choose to apply CDD and enjoy its benefits in their backend and microservices as well. With composability and through managed shared backend components, scaling and managing your microservices becomes a lot easier.
→ Watch “Component-driven microservices with NodeJS and Bit” (coding demo)
6. Composable enterprise: agile and future-ready
In a 2021 report Gartner foresaw that “organizations must be able to deliver innovation quickly and adapt applications dynamically — reassembling capabilities” and that 75% of vendors will use a composable application architecture to beat their competition. As composable software unlocks a composable organization, Bit is currently the leading composable enterprise transformation engine for enterprises that have to compete in a fast digital environment.
What’s next?
The beauty of CDD is that it’s not all or nothing.
You can start by creating an account and organization on bit.cloud and start by creating a component and two — and use them in one of your applications. Then you can add another component, and another one…
Fairly quickly, you will begin to notice the compounding effect of composability as every feature you create can be easily used to build more apps, shared across the team, and updated across multiple applications.
Tapping into composability and component-driven development will render both team and your applications future-ready and give you an advantage in your ability to ship great digital experiences faster.
Go ahead and get started and feel free to drop questions or share your own experience in the comments below 🍻
Thanks for reading 🙏
