Composable Applications: A Practical Guide

Composable package is simply a creation attack that intends to simplify nan improvement and attraction of package systems. It does truthful by breaking down nan strategy into independent components that tin beryllium mixed and reused successful different ways.

Composability permeates done each shape of nan improvement lifecycle, from first creation and architecture to implementation and onward to deployment. It’s important to admit that ‘composable’ exists not arsenic a binary property but arsenic a continuum.

A strategy tin beryllium much aliases little composable depending connected nan grade of independency of its components. The much independent nan components are, nan much composable nan strategy is.

Two factors for “component independence”

The grade of “independence” exhibited by components successful a package strategy tin mostly beryllium attributed to 2 main factors:

1. The creation patterns and principles utilized to abstracted nan system's concerns into independent components, specified arsenic nan azygous work principle, nan open/closed principle, nan dependency inversion principle, and truthful on.

2. The devices and technologies utilized to support nan components' development, deployment, and management.

In this article, we’ll usage Bit to create and merchandise independent components and merge them into a larger strategy aliases application.

Component ownership and entree power will beryllium managed by segregating nan components' root codification into chopped “remote scopes,” which service arsenic dedicated hosting environments connected bit.cloud

bit.cloud for Bit constituent hosting

This attack facilitates precise power complete who tin entree and modify each component, ensuring that permissions are aligned pinch organizational roles and responsibilities.

A demo statement connected bit.cloud. Components successful nan org are hosted connected abstracted “scopes”.

In this phase, nan extremity is to place nan different concerns of nan strategy and abstracted them into independent components.

Components and their APIs should beryllium designed to reside contiguous needs, not lick problems that are not yet present. This is known arsenic nan YAGNI (You Ain’t Gonna Need It) principle.

It’s not only a look for simpler and much maintainable systems but besides ensures components will beryllium afloat tested successful real-world scenarios. If a constituent is not being used, it is not verified (trust is an important facet of constituent reusability).

Existing components are often recovered and reused to reside immoderate of nan “concerns” that were identified.

Searching for a “discussions” server (Bit component) connected bit.cloud

This process of searching for existing solutions does not extremity astatine nan “top-level” but continues to smaller levels of constituent granularity successful a recursive manner.

Elementary components successful a “design” scope

Components are seldom built from scratch but alternatively composed from existing components.

Each constituent is fixed a constituent ID. The ID is constructed from nan constituent name, which specifies its main purpose, nan namespaces that explicate its context, and nan scope, which defines who owns nan component.

The Bit constituent ID — composed of nan proprietor name, nan namespaces and nan constituent name

It’s important to adopt a business-centric mindset erstwhile constructing, naming, and organizing Bit components. Component names should beryllium descriptive and intimately aligned pinch nan circumstantial business needs they address.

Similarly, components should beryllium organized into ‘scopes’ (remote constituent hosting) successful a mode that reflects their business building and functionality. That is, ownership and entree power should beryllium based connected business logic, not method considerations.

Components should beryllium named according to their purpose, not implementation

This business-oriented naming normal serves aggregate purposes.

First, it makes nan codebase much accessible to each stakeholders, including non-developers specified arsenic designers and merchandise managers. This fosters a much inclusive and businesslike collaboration, pinch an accrued feedback loop among each squad members.

Second, properly-named, business-centric components make constituent dependency graphs easier to understand, which, successful turn, makes it easier to refactor code, identify, and resoluteness bugs.

The dependency chart of portion of a system

Lastly, a business-oriented naming normal makes it easier to find and observe components, promoting constituent reuse and redeeming clip and resources.

In this shape of nan improvement process, nan extremity is to build nan components successful a measurement that makes them easy to harvester and reuse. As mentioned earlier, utilizing nan SOLID principles arsenic wide guidelines is simply a bully starting point.

However, adhering to nan correct principles and patterns is not enough. To support components independent, reusable, and portable, support them arsenic Bit components.

A Bit constituent is simply a standalone portion of codification that tin beryllium developed, tested, and versioned independently. It tin beryllium shared and reused crossed different projects, and it tin easy merge into larger systems aliases applications.

Unlike packages published from a monorepo, Bit components are decoupled from a circumstantial repository aliases a project-level build setup. Each constituent is wholly autonomous, pinch its ain type history, build pipeline, and tooling.

For example, let’s create a elemental quiet Bit workspace:

Now, let’s create a caller component. We’ll create a React constituent arsenic an example, but support successful mind that immoderate different tech aliases model tin beryllium utilized to instrumentality your Bit components. We’ll big nan constituent successful our creation scope, named “sparks”:

At this stage, nan constituent is still coupled to nan workspace/repository. To make it independent, we request to type and merchandise it:

The constituent is now being built, tested, and versioned successful nan cloud, independently of nan workspace.

The ‘button’ Bit constituent is built isolated from its workspace

Once nan build process is complete, nan constituent is fresh to beryllium consumed by different projects.

The ‘button’ constituent successful its distant scope “sparks”

One measurement to devour it would beryllium to instal it:

Alternatively, instal successful a non-Bit project:

Remember that Bit components are not tied to a circumstantial repository aliases project-level build setup. This intends that they tin beryllium developed and maintained successful immoderate repository. For example, let’s create a caller Bit workspace and import nan component:

The workspace should now person nan constituent disposable arsenic a package successful nan node_module directory, but besides arsenic root files successful nan moving directory:

This shape is astir deploying nan components successful a measurement that makes it easy to standard and negociate nan system.

We’ve already seen really Bit components tin beryllium versioned and released independently. The merchandise process, truthful far, has been constricted to publishing packages and hosting nan constituent root codification successful different “scopes” successful bit.cloud.

However, nan merchandise process tin beryllium extended to see nan deployment of nan components. Not each components request to beryllium deployed independently, but immoderate mightiness beryllium deployed arsenic microservices, serverless functions, micro frontends, aliases afloat applications.

For example, to deploy our demo Bit constituent to Netlify, we’ll adhd a caller record to its directory:

Then, we’ll adhd nan pursuing codification to nan file:

From now on, each merchandise of this constituent will see its deployment to Netlify. That is, this component’s build pipeline, which includes compiling, linting, testing, packaging, and truthful forth, has been extended pinch an further measurement — deployment arsenic a Vite app to Netlify.

Similarly, components tin beryllium deployed arsenic serverless functions to AWS, arsenic a microservice to Google Cloud, and truthful forth.

Regardless of nan deployment strategy, nan strategy remains composable arsenic nan components are still independent and tin beryllium mixed and reused successful different ways.

Having a centralized strategy alternatively than a distributed 1 does not mean nan strategy is nary longer composable. The cardinal is to support nan components independent and reusable.

When components are independent, nan improvement strategy, deployment strategy, and strategy architecture tin beryllium changed quickly and safely.

This is nan principle of composability: nan expertise to quickly alteration nan strategy without breaking it.