E-commerce is a cornerstone of the modern Internet. Any business that wants to establish a digital presence to sell products online needs an e-commerce website. These websites have become one of the Internet’s defining features.
The traditional “all-in-one” approach to creating an e-commerce solution was the genesis of popular platforms like Shopify and WooCommerce. Standard e-commerce solutions are packages of all the necessary front-end and back-end components to deploy a working website to a server.
On the “old-school” Internet, this was a convenient solution. All developers needed to do was deploy a pre-packaged e-commerce site to a server that users could navigate using their desktop’s web browser. But as technology has become more capable, the demands placed on e-commerce have changed. A modern e-commerce solution needs to interface with more than just a simple web browser. Modern e-commerce takes place on various devices and requires the ability to communicate with numerous services.
One solution to this rising complexity is the headless e-commerce solution. Headless e-commerce decouples the front-end and back-end of e-commerce and handles the back-end details of storing, processing, and managing e-commerce data. A front-end can then use this data through flexible APIs that enable developers to rapidly adapt their content to different formats or seamlessly interact with other software services.
In this article, we’ll compare three popular headless e-commerce solutions, Commerce.js, Nacelle, and Saleor. We’ll highlight the benefits and challenges that developers face when working with each of these platforms.
Choosing a headless e-commerce API
A typical headless e-commerce solution handles all the fundamental tasks we’d expect from an e-commerce website, like inventory management, a shopping cart process, and a checkout process.
Headless e-commerce solutions allow us to minimize concerns about the scalability of our web stores, as the front-end and back-end can scale independently. Headless e-commerce solutions employ a lightweight “API-first” model. By communicating through REST or GraphQL API calls, headless solutions integrate painlessly into most software and scale dynamically with demand.
In terms of features, most headless e-commerce platforms provide essentially the same solutions to the challenges of modern e-commerce. Because headless e-commerce is part of the back-end by definition, choosing which headless e-commerce solution to use primarily comes down to developer preference. Let’s look at what developers can expect when trying out these three solutions.
Commerce.js
Commerce.js is a headless e-commerce solution consisting of three primary REST APIs:
- Products API stores and manages product data, such as inventory for physical and digital goods.
- Cart API stores cart data and provides typical shopping cart features for users.
- Checkout API handles the details of checkout, including billing and shipping.
In addition to its three primary APIs, Commerce.js also offers six additional APIs, including Discounts, Customers, and Merchants.
Commerce.js APIs can work with one another or with other software. The approach of dividing the solution into nine distinct APIs allows developers to freely use different features of Commerce.js without adding any unnecessary bloat to their projects. We can use Commerce.js’s modular components to make a gradual transition to a headless e-commerce solution.
Offering a flexible JavaScript SDK, Commerce.js works with popular front-end frameworks like React and Vue. The Commerce.js GitHub includes a React demo and a Vue boilerplate to help developers quickly set up a front-end.
The modularity of Commerce.js allows developers to integrate its features just about anywhere. We can work in a familiar JavaScript development environment and choose our tech stack freely.
Nacelle
Nacelle describes itself as the “connective tissue” between different systems in our e-commerce stack. Designed for JamStack developers, Nacelle is a headless e-commerce API that sits beneath a React or Vue presentation layer. Able to incorporate data from disparate back-end systems, Nacelle can pull together data from various databases, CRMs, and other sources like product information management (PIM) services to prepare as objects for front-end presentation.
Nacelle divides its offerings into three GraphQL APIs:
- Data Ingestion API ingests data from different back-end systems to create, update, and delete events in Nacelle.
- Storefront API is for e-commerce shopping functions, like cart and checkout.
- Wishlist API is an API for creating and managing customers’ wish lists.
Developers can interact with Nacelle through its GraphQL endpoints or by using the JavaScript SDK. The JavaScript SDK includes native Vue and React integrations, providing us some immediate options for creating a front-end to present data managed through Nacelle.
Providing powerful options for ingesting, managing, and moving data between systems, Nacelle is well-suited for transmitting e-commerce data between different apps, services, and presentation layers.
Nacelle provides some options for helping developers get started quickly. The Nacelle Nuxt Starter includes some pre-built Vue front-end components and provides a hands-on demonstration of creating a Nacelle-powered e-commerce front-end using Nuxt.
Saleor
Saleor is a headless e-commerce solution based on a GraphQL API and JamStack.
Saleor’s architecture has three components:
- Saleor Core is Saleor’s backend. It’s responsible for endpoints in its GraphQL API. It’s Python code with a PostgreSQL database, allowing us to create our Python plugins to extend the functionality of Saleor Core.
- Saleor Dashboard is a React application that enables staff to manage stores and other e-commerce data in Saleor.
- Saleor Storefront is an example storefront created in React and designed to help developers get up and running quickly with Saleor and provide some ready-made front-end components.
While Saleor Dashboard provides some valuable features and Saleor Storefront is a practical means of rapidly implementing Saleor, both components are optional. Developers can interact with Saleor Core using its GraphQL API or through the Saleor JavaScript SDK, providing its e-commerce capabilities wherever they’re needed.
Offering a variety of ready-to-use Progressive Web Apps (PWAs), Saleor gives us a lot of resources to play with. Developers are free to customize the PWAs provided by Saleor and extend the core functionality of Saleor by creating their Python plugins. Combined with the Saleor Dashboard React app, Saleor provides modular parts for almost every component common to a modern e-commerce shop, all built on its headless e-commerce API.
Building a headless e-commerce solution
The extensive capabilities of e-commerce do come with a price. Unlike all-in-one e-commerce solutions, going headless requires some hands-on development time. Because customization and complete flexibility are the most attractive features of the headless approach, developers should expect to spend some time getting their hands dirty with their headless API.
Even with PWAs and pre-built components available, getting the most from a headless API requires developers who understand how to use the capabilities while building secure, stable, scalable applications. Ultimately, the security and performance of headless e-commerce is the responsibility of the developers to create the front-end and back-end systems with which the APIs explored above interlink. With that in mind, we need to find tools that we’re comfortable working with and continually empower our growth.
To see the value of any of the headless e-commerce solutions explored in this article for yourself, try them out. Build a simple app that interfaces with the headless APIs and spend some time pursuing the documentation to see which headless ecosystem best suits your development environment and existing tech stack. See if you’re interested in re-thinking some aspects of your e-commerce approach. And check out this article to learn about what contributes to creating a great checkout experience and increases your e-commerce website’s success.