How Composable Architecture Is Reshaping the Web

Headless architectures are changing the way we build websites. Online brands needs to keep up with these new technologies to stay relevant in their competitive market.

Disclaimer: this article has been previously published on TwicPics blog.

What are the origins of headless systems?

Initially, solutions operated as a single block, a monolith, that ran all the computer systems in one. In other words, the services and functionalities used by companies and websites depended on a global structure that conditioned their design and evolution.

Today, companies and developers are turning to a new system called headless, which is based on associating best-of-breed technologies. Composability makes website evolution fast. Companies are now relying on several partners for each service they have on their website such as payment, #frontend design, media storage and optimization. The main advantages being: quick-acting, flexibility, adaptability, and scalability.

What is a headless architecture?

If we consider that the head corresponds to the front-end (customer facing website), while the body of the site corresponds to the back-end, we can say that one was depending on the other. Indeed, the customer facing website was dependent on the back-office, and was often even generated by it. This was leading to a lack of flexibility for websites.

In the 2010s, the rise of front-end frameworks fast-forward the separation of systems. Their goal was to manage to separate the front-end from the back-end in order to be able to modify one independently from the other. This allowed the development of the front-end and the back-end in isolation.

In fact, it is possible to keep the old structures but manage to modify the front end without having any impact on the back-end, as for example Front-Commerce did with its client Devialet . Indeed, thanks to its front and back-end split, Devialet was able to improve its organic traffic by +25% and its conversion rate by +100%.

In fact, keeping the legacy back-end technology while developing a new front-end can allow websites to evolve in stages. When the front-end is finally independent from the back-end, brands can move towards a complete restructuring of their websites. They will then look more like native #headless websites, which we can see emerging in the second phase of development of headless systems.

The massive growth of front-end stacks gave birth to a large number of API-first services (2015). We can find CMS like BigCommerce or Sylius , PIM like Akeneo: The Product Experience Company , DAM, but also everything concerning cloud commerce and services within the company (payment solutions, research, analysis, etc.), or even some original solution created internally by companies themselves.

These specialized solutions are linked via an API that can allow them to be combined in order to form a complete front-end and back-end architecture. Both teams can be more independent thus develop without influencing each other and at the same time benefit from the best solutions in each of their fields.

Headless architectures’ advantages in a Composable Web context

In contrast to the compact and monolithic structures, headless architectures are composed of several web solutions, each one with a different function, built as a whole. Companies using this system are thus completely in control of their technical roadmap and do not depend solely on one supplier: this is the beginning of composable web and composable commerce.

Digital commerce platforms are experiencing ongoing modularization in a cloud-native, multi-experience world. Application leaders responsible for digital commerce should prepare for a “composable” approach using packaged business capabilities to move toward future-proof digital commerce experiences. - Gartner

The bricks used in a headless system allow the overall structure of the website to be maintained. The website architects can choose the different bricks they wish to use. This choice may correspond to obligations given by the company or to preferences prior to the design of the site. However, developers will always seek to use the best solutions available in each area to ensure that their structure is as modern as possible.

Flexibility of headless systems is favoring the progressive construction of a website. Thus, because each solution has its own features, each team chooses its own tool and can customize it as they wish.

The change of technology also becomes easier. When a technology is overtaken by another one (in terms of efficiency and performance), the old one can easily be replaced by the new one, since only one part of the site is to be changed and not the whole entity.

The aim of the approach is also to get out of the "tunnel effect" created by large monoliths. With different solutions, we can be sure that the slightest evolution will not have a negative impact on all the blocks (both on the businesses and on the customers), but rather smaller changes that are easier to adapt to.

Thanks to this new system, it is possible to improve the #UX, avoiding the frustration of users. Each solution chosen is the most advanced in its respective field, and will definitely have a positive impact on the #ecommerce conversion rate.