John Faber Managing Partner Follow
May 30, 2023

A composable business model represents an innovative approach to conducting business. It involves leveraging best-of-breed tools and services that can be customized to meet the specific needs of a business. Composability extends across various aspects of a business, and in this post, we will focus on the composable web experience.

At the core of the composable web model lies the hosting layer. Unlike the traditional model, where a single provider handles everything, the composable model embraces a combination of hosting platforms and technologies. This flexibility allows businesses to choose the most suitable hosting options based on their specific requirements.

By adopting a composable web model, businesses can select the hosting platforms and technologies that best align with their needs for different parts of their web infrastructure. This approach offers greater flexibility and empowers businesses to optimize their web experience by leveraging the strengths of various tools and services.

The basic composable hosting model looks like this: 

Basic Composable web Stack

Composability in the hosting layer allows your company to select the most suitable LAMP stack provider and Next.js provider for your application. A decoupled model allows your content management platform to operate with fewer resources. As a static website, the decoupled front end requires minimal resources, even during high-load situations.

One of the significant advantages of composability in hosting is the ability to switch out providers easily and quickly based on specific needs such as features and cost. This flexibility empowers your business to make informed decisions regarding hosting requirements. For example, you can evaluate which provider can robustly and inexpensively host your content management platform. Additionally, you can focus on the tools they offer to speed up innovation on the front end. This may involve evaluating features like development frameworks, pre-built components, deployment automation, and scalability options. By considering these factors, you can choose a hosting stack that aligns with your company's composable goals and enables faster innovation on the front end of your application.

Business features and integrations are the subsequent layers of composability.

Composable Stack

Here we see several API integrations on the Next.js front end. The example client added a DAM for their image collection, a CRM system delivering specific user content, and an enterprise SSO authentication.  In this model, each piece is managed by a particular team responsible for the application.

Complex Composable Stack

Teams work on what they specialize in, using established company-wide enterprise tools.  These tools can be swapped or added to as the business requires. 

Composable architecture is an approach where the elements of your web technology stack are organized into modular, autonomous, orchestrated, and discoverable components.

  • Modular: The web experience is divided into components or modules in a composable architecture. Each module focuses on a specific functionality or capability, allowing for independent development, deployment, and scalability. This modular design enables flexibility and ease of customization, as components can be added, removed, or replaced without affecting the entire system.
  • Autonomous: The components in a composable architecture are designed to be self-sufficient and independent. This autonomy enables easier maintenance, scalability, and updates, so changes in one component do not disrupt the functioning of others.
  • Orchestrated: Composable front-end architecture relies on APIs (Application Programming Interfaces) to orchestrate the interaction and integration between components. Each component is packaged to expose its functionality and data through well-defined APIs. 
  • Discoverable: In a composable architecture, components are designed to be easily discovered and understood by technical and non-technical users. This means the components are documented, described, and presented clearly and concisely.

By adhering to these principles of modularity, autonomy, orchestration, and discoverability, composable architecture empowers businesses to build flexible and scalable web experiences. It allows for the composition and recombination of components to create tailored digital experiences, adapt to evolving requirements, and foster innovation by leveraging best-of-breed solutions.

The composable stack provides new development workflows, speeding up innovation and reducing delivery time.  The image below shows a cross-team workflow with three teams working together on a feature they want to deploy. 

NextJS Workflow

Design, Marketing, and the CX team collaborate closely with the CSS and API teams to implement new features and designs on the branch preview. Let's outline the workflow for deploying changes and developing new features within this decoupled context:

Deployment Workflow:

  • When developers change the application, they commit the updated files to the Git repository.
  • A Git push command is executed to deploy these changes, triggering the deployment process to the Next.js provider.
  • The Next.js provider then updates the live environment with the latest code and files, reflecting the changes made by the developers.

Feature Development Workflow:

  • For developing new features, developers create a new Git branch to isolate the changes related to that specific feature.
  • Within the Git branch, the developers work on implementing the new feature and making the necessary code and file modifications.
  • A functional preview of the section being worked on is generated as the feature is being developed. This allows stakeholders, including Design, Marketing, and CX teams, to review and provide real-time feedback on the feature's progress.
  • The functional preview is live, enabling the teams to visualize and interact with the feature before it's merged into the main codebase.
  • Once the feature is completed and approved, the changes from the Git branch are merged into the main branch, incorporating the new functionality into the application.

This workflow ensures effective collaboration and version control throughout the development and deployment. It allows for continuous integration and iterative development, where changes can be tested and reviewed in isolated branches before being integrated into the main codebase. 

Decoupling the front end results in a modern workflow that accelerates innovation by giving teams a frictionless way to iterate on features. Composable architecture empowers your company to build flexible and scalable digital web experiences. Using a flexible, composable model, your company can adapt quickly to implement new technologies.

Are you considering moving to a composable model?   Do you want to decouple your Drupal site?   Let's talk about your project!