How to Launch the Front-end of a Modern Commerce Architecture with commercetools
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 |
|
|
2. Deliver faster customer experiences that improve conversion and loyalty
| New day-to-day | Old day-to-day |
|
|
3. Save time and money with quality integrations
| New day-to-day | Old day-to-day |
|
|
4. Be confident that security and scaling are covered
| New day-to-day | Old day-to-day |
|
|
5. Focus on value-enhancing work rather than maintenance
| New day-to-day | Old day-to-day |
|
|
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.
Leave A Comment