Frontend of a Modern Commerce Architecture with commercetools
Guest Blog

How to Launch the Frontend of a Modern Commerce Architecture with commercetools

commercetools author image Stephanie Wittmann
Stephanie Wittmann
June 2021

Traditional commerce software, built as a strictly coupled application with no clear distinction between frontend and backend, is a thing of the past.

Because of its lack of flexibility and poor performance, it has begun to be replaced with more agile approaches. Enter headless commerce, focusing not only on decoupling the frontend from the backend, but also on composing the whole system from business-oriented cloud-based services that “talk” via API. Headless commerce is currently becoming the modern commerce standard.

Frontend of a Modern Commerce Architecture with commercetools

Decoupling the frontend and backend was the first wave of revolution forced by monolith-caused frustration. But as much as it boosted flexibility, the progress didn’t keep up with the eCommerce dynamics. Why? When these two parts, even decoupled, were hosted together and designed to be tightly paired with each other, the problems with maintaining and extending were basically the same. No matter how customizable, a predefined frontend means that the whole platform is destined to deliver content as websites. In the best-case scenario, it also covered mobile apps, but that’s it. 

And yes, the possibility to work at different speeds by frontend and backend developers was nice, but it wasn’t a game-changer.

The direction, however, was promising, and developers kept exploring it (also because the SaaS-based model – though convenient – by default, turns off most of the customization possibilities).

The current form of headless commerce took the modularity of services even further, making the system fully composable (from the component delivered by different providers) and cloud-native. 

Tech providers can take over the responsibility for almost everything with this approach – from application logic to some cloud services (e. g. scaling). The merchant has to define how it should look and work according to their business need. They may do it by building the frontend from scratch, which takes some time, or they can use a bodiless frontend platform, such as Vue Storefront. The second option cuts their time-to-market thanks to numerous out-of-the-box features that deal with eCommerce logic.  

This concept of separating the client-side (frontend) from the business logic (backend) and strictly decoupling business-oriented services firm each other brings numerous benefits. Stills, to draw out just the essence, it can be said this provides even the biggest and most mature businesses with the manoeuvrability of a scrappy start-up.

In the fast-paced changing commerce industry, keeping up with customer need is considered a must. 

Benefits of a headless approach:
  • Every feature can be added and tested separately without interfering with the whole system

  • Every bug can be fixed independently and added only when it works well

  • No single change impacts the system’s integrity

  • Each team can develop, deploy and scale its services independently of others

  • The entire system is divided into parts, making a new developer’s onboarding process easier

  • Time-to-market of a new application or feature is shorter, and that makes the entire business more flexible

  • We can test/add/remove various 3rd party platforms

Headless architecture translates itself into particular business advantages. To illustrate them, let’s look at an example. One of the crucial obstacles in finalizing purchases is poor user experience. Users make instant decisions to abandon the cart if they are forced to wait for a page to load or figure out the right button to push the process further. At the same time, they expect that the content applies to their personal preferences that differ depending on the location, devices, age, etc. That raises the bar for commerce technology that has to be agile enough to fulfil these extended expectations.

With a monolithic architecture, when the frontend layer is coupled with the backend, every customization of templates, site structure or design can jeopardize system integrity. With a decoupled but predefined frontend, the customization possibilities are still not enough. 

These issues mean experiencing more and more bottlenecks as the business grows e.g. expanding to new countries or offering new products. Preventing companies from making daily frontend updates is basically stopping them from keeping up with constantly changing customers’ needs. And that is not how modern eCommerce business should be done. 

Decoupling the frontend from the backend solves these problems. It assumes that particular system units focus more on specific business features and are not in rigid dependency. This approach reverses the traditional model where technology is superior to business. Thanks to decoupling business-oriented units, it is possible to mold technology to the business, not the other way around. 

API-first frontend platform

The approach, called the MACH approach, is strongly advocated by commercetools, one of the leaders of headless commerce. However, choosing commercetools as the backend requires taking other decisions, where selecting a proper frontend comes first. 

What kind of frontend should be taken into account? A perfect match for a headless platform would be, of course, a “bodiless” frontend with a solid API to enable these two parts to engage in a “casual conversation.” Thanks to the API and – in general – decoupling, business-oriented units (an API-focused frontend allows also adding a headless CMS and other 3rd party services), merchants gain complete control of how they present their brand and shape the user experience with no worries about system stability. It simply accelerates the business processes. 

A separated “head” enables frontend developers to work with no need to look over the shoulders of backend teams. Their potential mistakes don’t interfere with the integrity, so the client-side layer updates can be done daily. It enables delivering high-converting, engaging customer experiences fast and efficiently.

Build or buy? 

Truly separated headless commerce for many years was a go-to direction reserved only for companies with solid financial possibilities as it required custom-made building solutions. However, the situation has changed significantly in recent years. The “headless-oriented” services ecosystem expanded, and the API-first solutions became more accessible and easy to use. Although it is still tricky to find genuinely headless solutions (many of them converted for headless only when the trend kicked off), it is possible. 

Modern Bodiless Frontend Platforms such as Vue Storefront is one of them. It originated a few years ago with the solid platform-agnostic idea at heart, and a robust API was at the center of its founders’ interests from the very beginning. 

frontend of a modern commerce architecture

Vue Storefront gives merchants all the benefits we listed above, and – as the frontend recommended by commercetools itself – it can save hundreds of development hours needed to build a custom-made solution with complete coverage of commercetools features. 

Thanks to a robust API, cloud hosting, regular support, native integrations with best-of-breed eCommerce solutions and ready-to-use features, without which no modern store can operate today, Vue Storefront gives scalability and frees the endless possibilities of revamping the UX and UI layer.

Tailor-make the system from best-of-breed services

Choosing commercetools and pairing it with Vue Storefront gives you more than just a commercetools backend and a Vue Storefront frontend. This set opens up limitless possibilities for adding any services you will ever need. It doesn’t matter if they are already available on the market (in this case, we provide native integrations) or they need to be custom-made. The API allows you to connect and disconnect anything you need or will need in the future.  

With Vue Storefront and commercetools, the sky’s the limit.

commercetools author image Stephanie Wittmann
Stephanie Wittmann
June 2021

Latest Blog Posts