Written by Drew Lau, VP of Product, Mobify – Traditionally, ecommerce software was built as a single, integrated application, often referred to as a monolith. It was inherently rigid and created with a fixed set of rules for how commerce capabilities were presented on the front-end. Headless commerce refers to a modern commerce architecture in which the front-end is decoupled and connected seamlessly to backends via APIs (Application Program Interfaces).  

The approach advocated by commercetools involves dividing an existing project into business domains and transferring the respective functionality and data out of the legacy platform to a best-of-breed infrastructure with commercetools as the core commerce functionality. So when the commerce system is no longer acting as “the head,” what should be the front-end?

Content-led vs. Decoupled Front-end

Plugging commercetools into a content management system (CMS) or digital experience platform (DXP) won’t cut it as layering a monolithic front-end onto an agile backend mitigates the agility and flexibility advantages. This architecture will require a heavy redeploy of the entire content system for major front-end changes, which won’t allow you to move fast enough to keep up with today’s connected consumer. It will also limit you to the tools, frameworks, templates or layouts prescribed by the content application. A customer-centric approach to headless requires an agile, decoupled front-end layer that eliminates all these constraints. 

A decoupled front-end unlocks agility and gives you the creative freedom to strengthen your brand. By separating the front-end experience, your team can remove the shackles of a monolithic stack and be free to change and innovate the front-end at an accelerated pace.

Agility impacts more than just the tech team, Google Cloud’s DevOps Research and Assessment (DORA) did an in-depth State of DevOps 2019 report and found that agility has a significant impact on an organization’s overall performance. What the report coined “elite performances” are twice as likely to meet or exceed their organizational performance goals than “low performers.” 

So what did this group do differently? Elite performers have 208 times more frequent code deployments, 106 times faster lead time from commit to deploy, 2,604 times faster time to recover from incidents, and 7 times lower change failure rate. An agile customer experience team can experiment often, learn quickly, and foster a culture of continuous innovation and improvement. 

A decoupled front-end also gives you the opportunity to strengthen your brand experience, which is critical considering 67% of customers say their standard for good experiences are higher than ever. As discussed, a CMS/DXP shouldn’t be your front-end, but it’s still an important part of the overall solution. To deliver high-converting, engaging digital experiences, a decoupled front-end seamlessly integrates functionality from both commercetools and your CMS/DXP. You’ll have the freedom to customize the experience and shape your brand’s identify however you wish.

How to Build a Decoupled Front-end

Launching a decoupled front-end requires building the actual front-end experience, as well as all the underlying plumbing for hosting, securing, scaling and integrating the front-end experience. Building this foundational piece – or the “back-end for front-end” as some call it – is deceivingly complex and difficult to do in an efficient manner. 

A modern Front-end Platform as a Service like Mobify is built on headless and serverless principles. This operating model for digital front-ends offers ongoing scalability and supportability, and reduces the total cost of ownership. It allows you to:

• Offload the stress of deploying, scaling, securing, and monitoring high-performing front-end apps to the Application Delivery Network.
• Reduce maintenance costs with a powerful API-driven Integration Architecture that allows you to easily add, swap or remove any backend system.
• Leverage developer tools to build, test, and deploy amazing experiences with Progressive Web Apps and Accelerated Mobile Pages.

Essentially, a modern Front-end Platform as a Service provides all the core front-end infrastructure that retailers need, and the experience you build on top of it is what makes your brand unique.

Day-to-Day Impact for Front-end Stakeholders

Introducing a Front-end Platform as a Service will allow teams to move faster and shift their day-to-day focus from maintenance and support to innovation and value-enhancing work. 

1.  Deploy anything, with confidence

New day-to-day	Old day-to-day
Frequent releases that don’t impact quality or stability Instant rollbacks for mitigation Continuous delivery to drive continuous experimentation	Code freezes during high-impact sales seasons Off-hour deployments that take hours Manual deployments and builds Lengthy rollbacks

2.  Deliver faster customer experiences that improve conversion and loyalty

New day-to-day	Old day-to-day
Sub-second load times Continuous performance optimization Zero degradation, even at peak traffic	Slow to respond experiences Bloated, unoptimized integrations Lowest common denominator performance for everyone Once yearly performance testing

3.  Save time and money with quality integrations

New day-to-day	Old day-to-day
Integrations that enable internal collaboration without impacting performance Integrations that fully unlock the value of 3rd party systems	Integrations that compromise the customer experience Integrations that complicate internal processes Vendor lock-in for 3rd party integrations

4.  Be confident that security and scaling are covered

New day-to-day	Old day-to-day
Continuous monitoring of threats and vulnerabilities Confidence in peak traffic loads and response times Focusing on security early in front-end development	Managing security updates for many servers and regions Managing containers for propagating updates Setting and forgetting firewall and DDoS mitigation settings Planning, adding and paying for excess capacity for only peak periods

5.  Focus on value-enhancing work rather than maintenance

New day-to-day	Old day-to-day
Focusing on features and experiments that delight customers Prioritizing enhancements that are directly drive customer satisfactions	Spending most of your budget and time maintaining containers, application servers, operating systems, and networks Maintaining and auditing complex custom infrastructure for compliance

A Holistic Approach to Headless

There are a lot of moving parts when it comes to a headless commerce approach. In this new world, no one solution should be the center of the tech stack. It’s about bringing together best-of-breed solutions that are independent of one another, but also integrate seamlessly. For a more holistic roadmap to headless, download the Headless Commerce Playbook for Business Leaders, on top of commerce and the front-end, it’ll cover how to approach content in a headless environment, as well as answer frequently asked headless implementation questions. 

[Get the Playbook Now]