25/07/2024

MACH architecture in action: Building a composable storefront

Digital Experience Platforms Blog article

Author: Kristijan Crnac

In today's rapidly evolving digital landscape, businesses must adapt quickly to stay competitive. Recent market changes have heightened the need for agility and innovation, leading to a surge in interest towards MACH architecture. This modern approach allows companies to build flexible, scalable, and resilient systems that can swiftly respond to changing consumer demands and technological advancements. Our newly developed MACH POC website exemplifies this trend, showcasing the power and potential of a composable architecture in creating dynamic, future-proof digital experiences.

What is MACH anyway?

MACH architecture is a modern approach to composable digital experience platforms (cDXP) focusing on Microservices, API-first, Cloud-native, and Headless principles.

It enables businesses to develop, deploy, and manage independent services that communicate through APIs, utilise full cloud capabilities, and decouple the front-end from back-end logic. This flexible, scalable, and modular architecture allows companies to stay agile, continuously evolve, and choose the best tools available, ensuring they remain customer-centric and future-proof.

The idea behind MACH proof of concept

MACH architecture emerges as a game-changer for agile product development, offering unparalleled flexibility, modularity, and the ability to create customer-centric experiences. It is a complex integration requiring specialized skills and knowledge, but with the right expertise it offers several compelling benefits for businesses:

Scalability: It allows for seamless scaling of individual components to handle increased loads as a business grows, ensuring efficient resource use and optimised costs.

Flexibility and composability: MACH architecture is highly adaptable, enabling businesses to quickly respond to changes and integrate best-in-class solutions to meet specific needs.

Future-proof technologies: Its modular design ensures that new components can be added as needed, keeping the system up-to-date and relevant for years to come.

Faster time to market: By breaking down applications into independent services, MACH enables quicker development, deployment, and updating of features, reducing time to market.

Reduced Costs: Leveraging cloud-native solutions and a pay-as-you-go model, MACH minimizes the need for costly up-front and ongoing investments in hardware, software, and infrastructure.

The primary objectives for the proof of concept (POC) are to:

Showcase a web e-commerce application based on MACH architecture
Build up knowledge around MACH architecture, tools, and products
Automate infrastructure and deployment of containerized services to AKS (Azure Kubernetes Service)
Create services using various technologies such as .NET, Java, and Node.js
Utilise free-to-use and open-source tools and products
Present solutions from our technology partners – Contentful and Commercetools.

Overview of the architecture

The architecture is centred around several cloud-based products, including:

Contentful – A headless CMS used to store content data, exposed to the frontend via Apollo GraphQL service.
Commercetools – A composable commerce platform for managing product catalogues, carts, checkout processes, and other commerce-related functionalities.
Auth0 – Provides authentication, authorization, and user management.
Algolia – A search provider enabling quick searches and filtering of product data from Commercetools and content data from Contentful.

All services are containerized and run as pods in Azure Kubernetes Service (AKS). Without delving too deeply into details, our architecture includes:

System monitoring services (e.g., Loki, Prometheus, Grafana)
A custom microservice layer built with multiple programming languages (e.g., Notification, Apollo GraphQL, User, Payment, Invoice)
A frontend service built on Next.js.

We use the open-source version of Kong as our gateway to expose services to the outside world, accessible by users, administrators, or other systems. The gateway enhances security by handling authentication, JWT validation, load balancing, caching, and more.

The deployment of services, including the creation of the Kubernetes cluster in Azure, is automated using Terraform (Infrastructure as Code). Terraform can create the entire infrastructure and deploy all services in 15-20 minutes from scratch. Decommissioning all resources from Azure Cloud takes even less time, making it an ideal tool for the POC and demo projects.

You might be wondering why we chose to have everything in Kubernetes? We aimed to create a cloud-agnostic solution deployable to any cloud provider, whether Azure, GCP, or AWS. For enterprise projects, this architecture can vary, for example:

Frontend deployed to Vercel or Azure Container Apps instead of AKS
Using managed, scalable, and highly available cloud services like Azure App Gateway instead of Kong Gateway.

Exploring the possibilities: A look at the composable storefront

The website includes standard elements like navigation, search, footer, and various content modules and components, all of which are fully maintainable within Contentful. These elements are seamlessly delivered to the NextJS frontend through the Apollo GraphQL microservice. Our solution supports several components, including hero banners, teasers, product carousels, rich text, and more, which can be placed on any dynamic page created by content editors in Contentful.

Before customers can interact with the commerce part of our website, a new user must be created via the out-of-the-box forms provided by Auth0. Auth0 also supports user management, webhooks, and custom flows, allowing us to connect Auth0 with other third-party systems like Commercetools or our custom microservices.

Customers can use either the search box or the filtering component to search for products, which are retrieved from Algolia using Node libraries and REST API. Algolia supports direct integration with Commercetools and Contentful, enabling us to easily specify which data to index.

Commerce-related functionality, such as shopping cart management, the checkout process, and order creation, is handled through Commercetools, utilizing its GraphQL queries and mutations. The NextJS frontend uses GraphQL mutations and server actions to create carts, add or remove products, change quantities, apply shipping details, and create orders in Commercetools. Upon successful order creation, a PDF invoice is generated by the invoice microservice and sent to the notification service, which emails the invoice to the customer—all handled in the background by the microservice layer.

The solution leverages the Kong gateway for streamlined access and inspection of all services running in the cluster. This tool allows us to apply necessary configurations on the fly, ensuring optimal performance and flexibility. For in-depth analysis of resources and logs, we rely on robust monitoring services cantered around Grafana. This powerful tool provides comprehensive insights, helping us maintain system health and performance.

Building a MACH POC isn’t an easy task, as it involves overcoming numerous technical challenges. From integrating diverse technologies to ensuring seamless communication between microservices, the process demands meticulous planning and execution. However, with the right expertise, valuable insights and guidance the effort pays.

The outlook: Unparalleled adaptability

MACH architecture provides unparalleled flexibility for clients, allowing them to select the best tools tailored to their unique business needs. Its modular design means that components can be easily added, replaced, or removed, ensuring the technology stack can evolve alongside the business. This adaptability not only optimizes performance but also future proofs the organisation against emerging trends and technologies.

If you’re looking to harness the power of MACH architecture for your business our agency is here to support your digital transformation and maximize the potential of your technology investments.

Let’s find out where do you stand in terms of pre-requisites for a successful transformation. Our MACH Maturity Assessment takes 5 minutes and provides you at the end with a customised whitepaper tailored to your maturity score ready for download.

Share

Contact

Ready for the power of MACH?

Get in touch with our experts!

Yannick Zimmer

Business Development Manager, IBM iX Dusseldorf

+49 1723770340

yannick.zimmer@ibmix.de

Kristijan Crnac

Technical architect | Expert lead

kristijan.crnac@ibmix.hr

This may interest you too

Generative AI: Exploring the innovative features of the leading Digital Experience Platforms

Learn more

From a headless CMS to a DXP – the path to creating the ideal digital customer experience

Learn more

Christian Handel_Sitecore Personalize Video Preview Image

Industries at a glance

People at IBM iX

Join the Women in Tech Community

How to accelerate hyper-personalisation in marketing with generative AI