Composable Commerce: How To Build a Site That’s Easy To Rip and Replace
Tags: composablecommerce, headlessecommerce, ecommerce, tutorial
Published: 2022-12-16 15:15:29

## What is Composable Commerce?
Composable commerce is the idea that you can build a site that is easy to rip and replace down the road. Composable Commerce is a concept that is not new, but it is becoming more and more critical as the pace of change in the eCommerce industry continues to accelerate. 

Headless eCommerce has been around for a while, but the idea of composable commerce differs from Headless. Composable Commerce is a business practice that is enabled by Headless. With composable commerce, it's not just the ability to swap out the front end that sets it apart, but also the ability to swap out the back end utilizing a framework called Packaged Business Capabilities, or PBCs.

![Dominic Gozza at Next Conference](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5m8t5y6s0dcqd0ei5yiw.png)

## The Essentials of a Composable Commerce Website
Composable commerce is essential for eCommerce websites because it allows you to build a flexible and scalable site, allowing your company to integrate new features and functionality into your site quickly and efficiently. With composable commerce, your organization is granted the flexibility required to meet the market as it changes. By considering composability, we aim to solve a few unique business problems:

-  **Craft a Completely Customized Customer Experience:** Selecting any combination of features and functionality is a distinct advantage, as it allows you to tailor a site that is entirely unique to your business and its needs.

-  **Gain More Flexibility:** Everything is customizable as opposed to the strict cookie-cutter templates you get from monolithic platforms. You are free to build something you need.

- **Faster and Easier to Grow and Scale:** Business and customer needs change rapidly. With composable commerce by your side, you are no longer locked with the solutions offered by big platforms and can swap solutions and components to suit your needs, when you need them.

> "I like to use real-world analogies. Commerce is when you go to a restaurant and the dish is already prepared. Composable commerce is when you go to a restaurant like CAVA or Chipotle, where the ingredients are prepared but you still have something that is custom to you." 
_Manish B. Hirapara (CEO at [PeakActivity](PeakActivity.com))_

## Best Practices: Strategy & Implementation
There are a few best practices that we recommend when it comes to composable commerce. The first is to start with a headless architecture, rather than an all-in-one platform, as it will allow you the most flexibility when breaking down each unique functionality into PBCs (Packaged Business Capabilities).

You can break down the Packaged Business Capabilities into smaller components, easily swapping components in and out, as needed. For the front end, you can build highly testable React components utilizing libraries like Storybook, mock data fetching, user interaction, and more, all in a single component for a large PBC.

Take the standard eCommerce flow, for example. 

You have a product page, a cart page, a checkout page, and a confirmation page. Each of these pages can be broken down into smaller components that can be swapped out as needed and should not impact one another. The Product page should not care if the cart page is using a different component for the cart summary. The checkout page should not care if the confirmation page uses a different component for the order summary. This allows you to build a site that is highly flexible and scalable.

![Components of a taco](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72w3va6pd4cqgh7a2fhg.png)

## Common Challenges to Prepare For
As with all things in life, there will be challenges. Working in a composable commerce or headless environment requires managing multiple tools and platforms. It is an absolute must to maintain a crystal clear set of documentation regarding a site's architecture. This documentation will allow you to quickly onboard new developers and help them understand how the site is built and how it works. This will also help you to identify and resolve issues quickly.

Another challenge is that you have to be able to build highly testable components. This is important because you want to be able to swap out components as needed without breaking the site. This means you need to be able to test each component in isolation and make sure it works as expected. This is where tools like [Storybook](https://storybook.js.org/) come in handy. Storybook allows you to build a component library that can be used to test each component in isolation, thus enabling you to find and fix any bugs promptly.

Be prepared to DIY a lot of things. You will need to build a lot of things from scratch. Since you have multiple services coming from numerous places, you'll need to ensure that the design and UX are uniforms across the board. (PS: This is where design systems come in handy.) While this can be daunting, this is an overall benefit as it allows you to create a unique site for your business and further help you stand out from the competition. 

Leveraging a password manager is essential to efficiency and security. You will have a lot of different services and platforms that you will need to access. Having a password manager will help you keep track of all of them and ensure you have access to everything you need. (We like [LastPass Business](https://www.lastpass.com/products/business?sfdcid=7014P000001BbIP&utm_medium=cpc&utm_lp=brand_b2b&gclid=CjwKCAiAy_CcBhBeEiwAcoMRHHXfY-qX9LyXOIdWlnxjDy_Yrn01jinWffTg9jU0ddBdrYJz6TXWnBoCAOcQAvD_BwE&gclsrc=aw.ds).)

Don't forget about Analytics, Telemetry, and Monitoring. You will need to be able to track and monitor the performance of your site. This will help you identify issues and resolve them quickly. (We like [DataDog](https://www.datadoghq.com/).)

## You Don't Need to Keep Your Composure
In the end, composable commerce is a great way to build a flexible and scalable site. Driving toward Innovation and Tech Agility is the goal, and composable commerce is a great way to get there.