Going Headless with Adobe Commerce and Magento Open Source
Magento has been a popular ecommerce platform for midsize to large ecommerce brands for over a decade. But since its acquisition by Adobe in 2018 – and its paid enterprise version rebranded as Adobe Commerce – the platform has evolved to support headless commerce.
Headless commerce refers to the decoupling of the frontend presentation layer from the backend commerce engine. In recent years, headless commerce has gained popularity as a way to deliver incredibly fast, personalized customer experiences.
In this article, we review the headless capabilities of Adobe Commerce and Magento Open Source. We cover the following:
Headless commerce 101
Headless commerce stands in contrast to a monolithic, or traditional, ecommerce platform. The technical architecture of platforms such as Magento tightly couple the backend commerce engine with the frontend user interface.
There are several disadvantages, however, to a monolithic architecture. First, it can slow down getting new features and functionality to market as developers have to often make changes to both the backend and frontend of a tightly coupled system.
Second, slow page loading speeds are a common issue with traditional ecommerce platforms. As many research studies have demonstrated, conversion rates decline the slower web pages load for users.
Finally, a monolithic architecture hinders the ability of brands to reach their customers on platforms other than desktop and mobile. Customers now live on other digital platforms, such as voice assistants and other Internet of Things (IoT) devices. A traditional ecommerce platform is ill equipped to reach customers on these other platforms.
Headless architecture, on the other hand, addresses these issues. By decoupling the frontend from the backend, brands are able to quickly create and maintain highly performant frontends on any device or platform. Check out our guide to dig deeper into what is headless commerce.
Magento and Adobe Commerce
Magento was released in 2008 as an open source ecommerce platform. It quickly gained popularity among midsize and large brands for its ability to support a diverse set of ecommerce operations.
In 2016, Magento Commerce was released as a paid, enterprise ecommerce platform while the open source version was branded as Magento Community. After the Adobe acquisition, Magento Commerce was rebranded as Adobe Commerce and Magento Community as Magento Open Source.
In this section, we review the differences between Magento Open Source and Adobe Commerce. While they both support headless commerce, what differentiates Abode Commerce from other top headless commerce platforms are unique features and functionality that allow brands to create highly personalized customer experiences.
Magento Open Source
Magento Open Source is an ecommerce platform available to all brands. Historically, the open source platform has been popular with small to midsize ecommerce brands.
Like many other traditional ecommerce platforms, such as Shopify and BigCommerce, Magento makes available a robust set of features for brands to manage their ecommerce operations.
Your team has the ability to manage products, customers, and order data all from the admin user interface. The admin user interface also includes an intuitive drag and drop page builder where you content and marketing teams can create new pages and update existing content.
Given that Magento is open source, your brand is in charge of deployment and hosting, as well as managing upgrades and bug fixes. This requires that brands have to either hire in-house developers or retain an external development agency.
But given that Magento is the second most widely used ecommerce platform after Shopify, there is no shortage of Magento-experienced developers to hire.
Adobe Commerce
Adobe Commerce, the paid enterprise version of Magento, is also open source but comes with an additional suite of powerful capabilities and features. The full list of additional features would be too many to list here, but there are a few of most noteworthy features that come with Adobe Commerce:
Enhanced security capabilities, such as PCI compliance
Integrated B2B functionality
Advanced targeting and segmentation capabilities
Enhanced content management features
Real-time product inventory visibility
Robust customer account management capabilities
In addition to the ones we mentioned here, what truly distinguishes Adobe from other ecommerce platforms is its cloud infrastructure as well as AI powered features that enhance the customer experience.
Cloud Infrastructure
Adobe Commerce makes available to ecommerce brands a complete development and deployment environment in the cloud. This offering is referred to as a Platform as a Service (PaaS).
Adobe Commerce’s PaaS provides not only servers and storage, but also development tools, middleware, database management systems, and more. The PaaS offering sits on top of Amazon Web Services and Microsoft Azure’s cloud infrastructure.
The service deploys your site onto Fastly’s Content Delivery Network (CDN). A CDN is a network of global servers that caches your website and delivers it to where your customers live. It allows your brand to deliver highly performant, fast loading websites.
Live Search
Shoppers expect the search feature on storefront to match those on prominent online marketplaces such as Amazon and Ebay. Powered by Adobe Sensei, Live Search is an AI and machine learning powered feature that enhances the search functionality of your storefront.
Adobe Sensei performs a deep analysis of aggregated visitor data. When combined with your product catalog, Adobe Sensei is capable of accurately matching search queries with what shoppers on your site are looking for.
Product Recommendations
Personalized product recommendations can lead to a higher number of shoppers purchasing products on your site. Also powered by Adobe Sensei, your storefront can surface products your shoppers are likely looking for based on an analysis of your visitor data and product catalog.
With the product recommendations features, your storefront can add a section labeled “Customers who viewed this product also viewed” on your product detail pages.
Core headless features
While Adobe Commerce and Magento Open Source come with a variety of features and functionality to power your ecommerce operation, there are 2 features in particular that are geared towards going headless. In this section, we discuss the web APIs and the PWA Studio.
Web APIs
The bedrock of any headless commerce solution is its Application Programming Interface (API). An API is a programming interface that developers write queries against to request or send data to a service or frontend.
Adobe Commerce’s web APIs give you access to your product, customer, and order data, as well as your cart and checkout object.
Adobe Commerce provides your developers with three different API protocols to write queries against: REST, GraphQL, and SOAP. In this section, we’ll discuss REST and GraphQL as they are the two most commonly used API protocols.
REST, which stands for Representational State Transfer, has historically been the most widely used API protocol. One downside to REST is that it is prone to over-fetching data, which can slow down performance. Alternatively, REST can also under-fetch data, requiring additional API calls, which can also negatively impact performance.
GraphQL, on the other hand, is optimized for performance by allowing queries to fetch only the data requested and nothing more. As a result, GraphQL queries should be used whenever possible, especially when powering customer-facing experiences, such as your frontend application.
PWA Studio
PWA Studio is a set of tools and libraries that allow your developers to build Progressive Web Applications (PWA). A PWA is a type of web application that can also be downloaded onto a smartphone device and behave as a mobile app, with the capability to send notifications and work offline.
PWA Studio comes with the Venia storefront, a proof of concept storefront that accelerates development. It also comes with a variety of customizable UI components which speeds up time-to-market by preventing your developers from building components from scratch.
Adobe Commerce also makes available a Page Builder integration so your content and marketing teams can create and update content in the admin panel. As going headless can often require content and marketing teams to rely more on developers to update content, the Page Builder integration gives your internal teams greater autonomy.
Another critically important feature Adobe Commerce provides is the UPWARD server, which serves as a backend to your frontend application. The UPWARD server proxies all requests from the PWA Studio to the commerce engine and any third-party services.
You can offload any data formatting logic to the UPWARD server rather than take up valuable browser resources that could impact performance. Your frontend can also query multiple services with one data request, with the UPWARD server handling the individual API calls, which also makes the frontend more performant.
Evaluating Headless Adobe Commerce
The criteria for evaluating a headless commerce solution is different from what you should use to evaluate a traditional platform. While some criteria, such as pricing and customer support, are shared between both categories, others are different.
Three criteria in particular stand out as important to critically evaluate when considering headless commerce platforms:
API capabilities
Developer experience
Integrations
These criteria are important because a core feature of any headless commerce platform is the APIs. As a result, your teams will need to evaluate their capabilities, how well your developers can work with them, and how easily your teams can integrate other third-party services to your commerce engine.
In addition to pricing and customer support, we also cover these three criteria in this section.
Pricing
As an open source solution, Magento Open Source is completely free. You’ll have to absorb the cost of deployment and hosting, but there is no license for your brand to purchase.
Adobe Commerce, the paid enterprise version of Magento, does not advertise pricing on their website. But in general, enterprise plans generally run into the tens of thousands of dollars per year. You’ll need to contact the Adobe Commerce sales team to get a quote for your brand.
Customer Support
Customer support is only available for brands on the Adobe Commerce enterprise plan. Adobe Commerce, on the other hand, provides no customer support for brands on Magento Open Source.
For companies on Magento, there is luckily a large community of ecommerce brands that you can consult with to help you with whatever problem you need to resolve. As the second most widely used ecommerce platform on the market, there is no shortage of agencies or blog articles for you to consult.
API capabilities
As mentioned above, Abode Commerce makes available to your developers the 2 most widely adopted API protocols: REST and GraphQL.
APIs generally place various types of limits on their use. Rate limits, for example, are a common way of constraining API usage by restricting the number of calls made. If the number of calls made to an API exceeds a certain threshold, an error is sent as a response. Rate limits help prevent denial of service attacks as well as optimize performance during periods of heavy traffic.
As an option source platform, Adobe Commerce allows you to set your own rate limits in either the admin panel or programmatically via APIs. By default, no rate limits are set but when activated, rate limits can be set to whatever your team decides.
Developer experience
Headless commerce platforms require extensive developer work on the frontend and backend codebase. As a result, evaluating the developer experience is critical when adopting a headless commerce platform.
When evaluating the developer experience of any platform, it’s important to review the following: (1) the thoroughness of the technical documentation, (2) any tutorials or starter kits that accelerate productivity, (3) and access to technical assistance.
Adobe Commerce provides developers with a great experience on all 3 fronts. The documentation includes a thorough review of the REST and GraphQL APIs, as well as guidance on how to customize the commerce engine and PWA Studio. Included in the documentation is a step-by-step review on how to integrate third-party services and set up unit and integration tests.
Adobe Commerce’s documentation also includes a variety of tutorials on how to create custom frontend and backend code. And the PWA Studio is essentially a starter kit for your developers to accelerate their productivity, allowing you to launch new features to market quicker.
In terms of technical assistance, Adobe Commerce’s open source status and popularity is an advantage. Your developers can get any technical questions answered on platforms such as Stack Overflow.
Integrations
Magento has enjoyed widespread popularity for over a decade. As a result, there are many pre- built integrations that your developer can use to connect with your commerce engine.
Furthermore, the Adobe Developer Documentation contains guides that walk your developers through how to manually integrate third-party services, such as a Content Management System (CMS) or Product Inventory Management (PIM) solution with your commerce engine.
What is distinctive about Adobe Commerce is the availability of integrations with the Adobe Experience Cloud. This product suite specializes in helping B2C and B2B brands understand and deliver personalized experiences to their customers.
In this section, we cover three Adobe Experience Cloud products that can help your business target your customers with personalized experiences.
Adobe Real-Time CDP
Adobe Real-Time CDP is a Customer Data Platform that collects data from all your systems and creates customer profiles that powers personalization across all your channels.
Customer profiles are created and updated in real time as customers interact with your various channels. Adobe products, such as the Experience Manager (which we discuss below) can consume these profiles and allow your marketers to launch campaigns or target these segments with personalized products, promotions, or articles.
Adobe Experience Manager
Adobe Experience Manager is a Content Management System that gives your marketers and content creators greater autonomy over publishing and previewing content.
It integrates widely with other Adobe products. In addition to pulling in customer profiles from Real-Time CDP, it also integrates with Creative Cloud. For example, media assets worked on by your design team are automatically synced to Experience Manager.
Adobe Target
Adobe Target is an AI-powered multivariate testing platform that allows brands to target customer segments with A/B tests. Launch and manage a multitude of tests across all your channels to find personalized experiences that turn shoppers into buyers.
One of the many benefits of Adobe Target is that a great deal of the work around launching and managing tests is automated. For example, if a particular version of a test is deemed the winner, Adobe Target will automatically make the winning version permanent.
Wrap Up
Adobe Commerce and Magento Open Source are ecommerce platforms that come with robust features to support headless commerce. With industry standard APIs and PWA Studio, your brand can stand up a performant custom frontend integrated with as many third-party services to support your business needs.
What makes Adobe Commerce distinct from other headless platforms, however, is its potential integration with other Adobe products. With Real-Time CPD, Adobe Experience Manager and other products, you give your marketers a great deal of insight into your customers and the tools to target them with personalized experiences.
