Headless Commerce Explained for the Tech-Curious

Has the eCommerce world lost its head? Given how quickly retailers have had to accelerate their digital transformations to offer robust eCommerce experiences, you may be inclined to think so.

But we’re not just referring to how quickly eCommerce changed in the year 2020—which McKinsey indicates saw 10 years of growth happen over three months in the US—we’re also talking about how it sped up the adoption of headless commerce.

Explaining the Headless Hype to Non-Technical Folks

You’ve seen the hype: headless is the future of commerce! Monolithic commerce platforms are old news, destined for the garbage bin of history. The MACH Alliance (Microservices, API-first, Cloud-native Saas and Headless) was created from rising stars like commercetools and Amplience. And now we’ve sped headfirst into a period that will be known for omnichannel retail, Internet of Things (IoT) and Progressive Web Apps (PWA).

There is a lot of excitement around headless commerce these days, much of it centered around its business advantages. However, there are also many technical advantages that might be somewhat tricky for non-engineers to grasp.

This post will attempt to convey the technical advantages of the headless revolution to “tech-curious” readers who are not developers but would like to understand the appeal of headless on a somewhat more technical level.

What is Headless Commerce?

Headless commerce refers to a commerce architecture where the backend services and user interface are decoupled. This decoupled approach enables a situation where all of the eCommerce functionality is handled in the backend. Developers are then given the flexibility in the frontend to create customized interfaces and deliver content, product information and more to multiple devices. All of this is made possible with the help of APIs.

This contrasts with traditional commerce architectures based on a monolithic platform like SAP Hybris, Magento or Salesforce Commerce Cloud aka Demandware. With these systems, the backend and frontend are both parts of one big integrated package. This can accelerate the initial speed of implementation, but over time, can hamper flexibility and lead to greater total cost of ownership (TCO).

But popular platforms like Magento and Shopify must have heard about omnichannel retail by now. Surely they know that PWAs are a thing. It is hard to believe that the biggest commerce incumbents are oblivious to trends which have been gaining in popularity for years.

The truth is that the headless commerce craze isn’t about anything as specific as PWAs or IoT. It’s about a couple of trends that have been quietly revolutionizing software development over the past few years: API-driven architectures and modern web frameworks.

Let’s explore both in turn and examine why they are important, in terms that are (hopefully) understandable to the layperson, and how they drive the move to headless commerce.

API-Driven Architectures Explained

When people talk about an API nowadays, they generally mean a web API. It’s still all about two pieces of software talking with each other, but in this case, they do so over the internet using web protocols like HTTP or HTTPS.

Before this, most API communication happened on a single computer; for example, a Windows application sending requests to operating system services to store data or display graphics. By bringing remote APIs into the mainstream, web APIs have enabled a whole new software paradigm where different services running remotely on disparate servers can work together to form a coherent whole.

Web APIs have been around since the early days of the web, with the first examples appearing in 2000. They were popularized by services like Flickr and Twitter, which had an open API at their core, enabling developers to tap into their capabilities to integrate them into other apps or layer on a new user interface. But until recently, web APIs were generally seen as adjuncts to a traditional application. Flickr, Twitter, and their ilk still had their own user interface, which was the primary way users interacted with them.

The API Economy Evolution

A new trend has emerged in recent years: companies whose primary product is an API and whose main customers are therefore other developers. Twilio was an early example; leading venture capitalist, Fred Wilson described their demo in 2008—where they showed off APIs that made it trivial for developers to make phone call—as “the best startup pitch ever.”

The resulting API economy, which facilitates the exchange of value between API consumers and providers, has created several billion-dollar companies like Sendgrid and Stripe (not to mention Amazon subsidiary AWS) whose main product is a set of APIs, as well as countless smaller API-centric startups targeting specific developer needs.

As a result, impressive apps can be built with limited resources by tapping into the vast new ecosystem of remote web APIs for payments, telephony, mapping, storage and every other imaginable purpose.

Headless Commerce vs Traditional Commerce

There are a few differences between headless commerce and traditional commerce, but the critical difference is in headless commerce’s flexibility. Traditional commerce is built on a monolithic foundation that brings certain restrictions in terms of how the customer experience can be designed. Developers cannot customize and personalize the user experience, preventing them from adapting to new channels and providing commerce functionality for new devices quickly.

Headless commerce, on the other hand, can make connections between disparate systems more efficiently. Instead of being restricted by a predefined frontend template, developers can customize current experiences as they see fit or build new ones from scratch to adapt to the changing digital landscape. This ability to customize and flexibility to adapt, which headless commerce has over traditional commerce, comes from the API-driven architecture.

If you are using a monolithic commerce platform, you rely on the platform itself to integrate with every specific API. With headless, the commerce platform is an API, and you use best-of-breed frontend development tools to integrate with it and with any other API that strikes your fancy.

Headless commerce is thus a much more natural fit with the modern API-driven software paradigm. As the number and variety of API-driven startups explode, there is no way that commerce monoliths can keep up. By going headless, developers become first-class citizens who can take advantage of every hot new API as soon as it becomes available.

The Case for Modern Web Frameworks

In the early days of the web, applications ran on a web server and sent web pages to the user’s browser as HTML. Fill out a form, click on a button, and the server-generated a new page based on your input and sent it back to your browser. The resulting user experience was very clunky compared to desktop applications than ran directly on your computer. Who wants to stare at a white screen for a few seconds every time they interact with an app, waiting for the server to process their input and send a new page back to them?

This started to change in the early 2000s as browser vendors like Microsoft and Mozilla added capabilities to their browser, enabling them to make requests to servers to retrieve data and trigger actions independent of user activity. Some may remember the term AJAX (Asynchronous JavaScript and XML), which was used at the time to describe this type of behavior (although it has long since fallen into disuse). Instead of a bunch of HTML, the server would send over a bit of HTML and a lot of JavaScript, which ran locally in the browser and enabled the app to load new data and display it without waiting for a whole new webpage.

Gmail is one of the earliest examples of an AJAX web app, and it caused quite a stir upon its release in 2004. Suddenly there was an example of a highly sophisticated web app that felt like a traditional desktop app. Click on something, and the user interface updated almost instantaneously. But creating high-quality web apps of this type was a significant technical challenge accessible only to highly skilled developers.

In 2010, Google released AngularJS and a new generation of so-called “single-page app” (SPA) frameworks emerged. SPAs are basically just Gmail-like apps; they load one page, and all subsequent updates are driven by API calls to the server to fetch new data. A host of competing frameworks with weird names like Batman, Knockout and Ember followed, all with a similar goal: to make it easy for “real” developers (as opposed to jQuery-writing script kiddies) to write complex, powerful SPAs.

Headless Commerce Benefits: Why Go Headless?

Today’s two hottest web frameworks are React (developed by Facebook) and Vue, with emerging contenders like Svelte beginning to attract attention. Developers love to use them because they can take advantage of cutting-edge software development best practices and tap into a vast ecosystem of libraries, tools and frameworks to implement complex functionality with minimal effort. Because they retrieve application data via remote APIs, they are also a perfect fit for the API-driven architectures described before.

However, instead of benefiting from elegant and powerful frameworks created by genius computer scientists at Facebook and elsewhere, traditional commerce developers found themselves stuck writing server-side templates and jQuery, an approach that lost its lustre over a decade ago.

The same is true on mobile, where both native development (on iOS and Android) and cool cross-platform frameworks like React Native and Flutter offer a fantastic developer experience. Still, traditional commerce developers have to play in their platform’s limited sandbox instead. Luckily, this is where headless functionality and headless commerce come to the rescue.

There is no way that monolithic platforms can keep up with the frenetic pace of innovation in this space. And consuming web APIs is an integral part of modern web app development. By turning the commerce platform into an API, developers can use whatever web and mobile frameworks they want, from established leaders like React and Vue to bleeding-edge alternatives like Svelte.

To summarize there are three stand-out reasons to go headless:

1. Accelerated Digital Transformation

Headless commerce makes digital transformation easier for businesses as it’s made for the current innovation we’re experiencing. Traditional commerce platforms can definitely make it simple to set up an initial eCommerce store. However, as new devices such as smart speakers, smartwatches, and other IoT devices enter the fray, it becomes tougher to integrate them.

The API-driven flexibility facilitated by headless commerce means that brands and the developers working with them won’t have to struggle to create new systems for each channel and thus have an easier time adapting.

2. Easier Content Delivery

While integrating with new devices and channels is essential to growth, your presence on a touchpoint is useless without your products, content, and messaging.

Unlike traditional commerce approaches, where your content lives in an app that’s supporting one to two channels exclusively, going headless allows you to take your content out of channel silos, and publish it absolutely anywhere, product information and payment gateways and all.

3. Reduced Costs

A traditional eCommerce platform that locks your content into one or two channels (most commonly a website and perhaps a native mobile application) isn’t just restricting your expansion into new channels, it’s making it more expensive.

For instance, if you want to launch an Alexa Skill that allows customers to purchase your products, you’ll need to draft in new software and re-create much of your content. With a headless commerce solution, your existing content is ready to go, and you can use the software you already have to deliver that content to Alexa. That’s a new touchpoint added to your arsenal with less time wasted and less money spent.

Take Commerce Headless and Let Developers Develop

It’s probably clearer now why many describe headless commerce’s advantages in terms of PWAs, omnichannel commerce, and the like. To truly understand the benefits of headless, you need a relatively sophisticated grasp of what it means to be a modern software developer, something impossible to convey in a pithy soundbite.

At Salsita, we spend our days rocking out in an ever-expanding universe of remote server APIs using frameworks whose power and elegance would have been unimaginable a few years ago… and which just keep getting better.

With headless, commerce development can finally be just like any other kind of web or mobile app development, taking advantage of the new tools and techniques as soon as they emerge. And that is unambiguously a good thing.