As a Magento store owner, you’ve definitely heard the buzzword “headless commerce”. It’s a web architecture that implies the separation of a site’s frontend and backend. Online retailers are now actively investing in such a transformation.
Why? Basically, to ensure the further evolution of their stores in terms of customer experience. The headless approach facilitates developing and plugging several user interfaces for different devices. Now merchants leverage this capability to improve the speed and level up the UX/UI on smartphones. When it becomes relevant, eCommerce players will add more various frontends and increase conversions on those touchpoints.
Headless is opposed to a monolithic approach which means the frontend is generated on the backend. Most likely, your store is monolithic. So, what’s the issue? When you were selling only via desktop, it was fine: you supported just one channel. But then mobile use started to grow. It turned out that monolithic websites can’t provide the same satisfying shopping experience on smartphones as on desktops. The need for an upgrade became inevitable.
Below we’ll explain how Magento headless architecture differs from the monolithic one with examples. Then we’ll outline the options you have for now and the future perspectives of the approach. Finally, we’ll discuss some challenges and expenditures of Magento 2 headless development.
1. What Is Headless Magento & How It Differs from Monolithic Architecture
Let’s say your Magento store has been around for many years. You might have a responsive mobile interface, which was “born” from the desktop design. Perhaps, you optimize the site from time to time, but the performance is not as good as it should be.
Is it as convenient to shop in your store through smartphones as via desktops? How do you boost your mobile conversion rate? These are some of the typical pain points for Magento store owners. These problems are in place partially due to the monolithic architecture.
1.1 Monolithic Architecture
Put simply, any traditional online store is a merged system. Its frontend (or “head”) and backend are tightly connected. The vast majority of stores, including Magento ones, currently operate this way.
Over time, this principle has led to several acute issues:
a) Stores are notably slow on mobile.
- The primary reason is the need to fetch an HTML document from the backend every time a user goes from page to page. In other words, your frontend is always generated on the backend. This is the working principle of all monolithic sites.
- Besides this, such online stores are in constant need of Magento mobile optimization. But “therapeutic” strategies may not bring significant improvements when it comes to the speed on modern devices.
b) Usability falls short of expectations if consumers shop via mobile.
Most stores still do not provide separate frontends for particular devices. Even for smartphones. There are numerous usability problems your customers might encounter in this case, for instance:
- The header might take up too much space on the main and product pages (check out Zara’s website from your phone);
- The above-the-fold area on a product page displays very little info about an item: a user sees only a photo (not even entirely). No name, no price, no rating, no “Add to cart” button (take a look at Ikea’s website). Therefore, users are forced to scroll down instead of seeing the needed data straight away.
And so on. We’ve described only a couple from the very long list of drawbacks in stores where mobile UX/UI is overlooked.
c) Routine maintenance, customization, and scaling are getting tougher.
- You’d like to display a wish list button or add any other new feature to the user interface? You simply want to alter the location of blocks on the product page? Developers need to edit the backend code to make any layout changes.
- As a side effect, the code itself is bloating.
d) Strategic development is hampered as well.
For online retailers, new devices on the market (smartwatches, TVs, voice assistants, and so forth) mean potential touchpoints to cover. In the measurable future, you might find reasonable crafting frontends for each of them. It’s possible but extremely challenging to maintain a few “heads” with the monolithic approach:
- With each new frontend (for phones and then new channels) added to the backend codebase, your website becomes more complex. In the future, it will be more difficult to split it all.
- Changes or mistakes in one place of this single codebase may affect other parts of your store.
- The described approach is outdated. In the meantime, modern technologies (e.g., a progressive framework React JS) help create frontends faster and give your customers a convenient UX/UI.
1.2 Headless Architecture
In turn, headless commerce rests on three relatively independent pillars: a frontend (or several frontends), a backend, and API as a communication layer in between. Developers literally cut off the “head” and then sew it on with an API.
The fundamental difference from monolithic websites is that you stop supporting the frontend on the backend. These parts exist in parallel, expanding the flexibility and possibilities of your selling platform. That’s why the demand for headless Magento 2 eCommerce solutions is increasing.
This approach helps to address all problems mentioned above (and more):
a) Speed of the online store increases.
As a result of the “surgery” (splitting the front and back), the role of the backend is reduced to providing particular data through API requests.
- Firstly, we don’t wait for the backend to generate the HTML and send it to the user (this happens on the frontend);
- Secondly, we request and receive only the dynamic data. The header, footer, files, and media that remain unchanged on every page aren’t rendered every time.
b) UX/UI becomes highly adaptable to customer requirements.
Headless is all about creating a corresponding interface to each specific device. A store (re)built this way has at least a desktop and mobile “heads”. This considerably improves the customer experience and, eventually, your conversion rate.
For instance, on smartphones your online store will match the following principles:
- Minimalistic and rational usage of the available screen space;
- Conveniently located buttons for operating with one hand;
- Appropriate fonts and element sizing;
- And so on.
c) The development process accelerates.
- Fewer steps are required to make changes because the frontend no longer depends on the backend;
- Your team can perform tasks on the front and back simultaneously;
- Developers and designers have unprecedented freedom to experiment on the frontend.
d) Omnichannel becomes real.
Headless architecture prepares online merchants for tomorrow when people will shop through any connected device. You’ll be able to create and plug new “heads” quite easily and quickly.
💡 To create “multiple heads” for your store, you’ll need either professional full-stack developers or frontend pros with a deep understanding of Magento architecture. If you lack internal resources, our Magento developers are ready to help.
2. How to Make Your Magento 2 Headless
Is Magento headless as of now? Yes. Starting from version 2.3, Magento supports GraphQL as an API. Before those who wanted to split the front and back relied only on custom API solutions. We can take this as the beginning of the Magento headless commerce epoch.
It goes without saying that the future of eCommerce is headless. But at this point, we should regard this matter in two time dimensions: today’s and tomorrow’s.
2.1 Headless as a Timely Solution: a PWA
Which short-term advantages will the switch to headless architecture bring you, and where do you start? We’ll need to at least decouple the frontend and backend of your store to make it headless.
Note that if your Magento is older than 2.3, you’ll need to update it. If you’re still operating on Magento 1, then Magento 2 migration is a core step.
If you’re already on Magento 2, we’d recommend starting your store’s transformation by building a progressive web app. Every Magento store owner wants their desktop and mobile touchpoints to be equal in speed, performance, and UX/UI terms in line with customer demands. A PWA is the most sought-after form of headless Magento that meets all these requirements.
This advanced solution gives merchants three competitive advantages on the market:
- Your store has separate frontend and backend parts. It gives a boost to the Magento performance and speed.
- The store has two frontends designed specifically for a desktop and mobile. It leads to enhanced usability, which drives conversions.
- The mobile version of the store looks and behaves like a native app. A PWA adopts many features and design nuances from mobile applications (e. g., push notifications) to increase mobile conversions.
Recently we’ve made a selection of Magento PWA examples with extra attention to the mobile UX\UI strengths and weaknesses of these sites. This article will prompt you on how to gain unparalleled UX\UI for your store.
Since Google coined the term PWA in 2015, hundreds of brands have launched their progressive web apps. Some opted for PWAs as a replacement for a mobile app, while for others, it became an additional option to broaden customer reach.
Based on our experience, we’ve chosen a few technologies for building PWAs: React JS or PWA Studio and GraphQL as an API. You’ll find all the needed information about these solutions and major development steps in the following guides:
- React JS framework: How to Build a PWA Storefront for Magento 2: a Detailed Guide for Pros
- PWA Studio toolkit: How to Develop a Site Using Magento PWA Studio
- A side-by-side analysis of frameworks: ReactJS vs PWA Studio vs Third-Party Themes: Which to Use on Magento 2
- GraphQL API: Magento GraphQL: Overview and How to Use Guide
2.2 Headless as a Groundwork for the Future
What will eCommerce look like in the coming decades? Nobody knows exactly, but it will be way more technologically sophisticated. Let’s see which opportunities you’ll obtain in the long term if you embody the headless commerce Magento architecture.
a) Cover new channels as they become popular.
For example, in the next couple of years, you decide to launch a native app or a frontend for a virtual assistant. With a decoupled online store, this can be done using the already created API.
b) Implement full-fledged omnichannel.
This approach implies frictionless customer experience as users switch between various touchpoints during shopping. The ultimate goal of a business here is to guarantee flawless UX/UI, no matter which devices a prospect uses.
c) Be ready for the next step: microservice architecture.
For reaching even more agility in development, it’s possible to split a backend (a catalog, checkout, etc.) into independent units called microservices.
As of now, there are very few platforms that offer such an option. Magento, alongside other renowned CMSs, hasn’t implemented support for microservices yet: its backend is monolithic.
We expect Adobe to divide Magento into microservices fairly soon because this tendency is steadily gaining popularity. When that time comes, you’ll be able to change the backend, while the frontend will already be up-to-date.
💡 Doing away with monolithic architecture in favor of a headless one is a worthy investment in your business growth. Turn to our Magento PWA development services if you want to make your store more flexible and react faster to market changes.
3. What to Be Prepared for When Your Magento Store Goes Headless?
At last, let’s discuss what business tasks you have to resolve if you go headless with Magento 2.
3.1 Developers
With the headless approach, an online store must have separate development teams:
- Full-stack developers to deal with the backend;
- Frontend developers who are familiar with Magento peculiarities and work on progressive frameworks like React JS. Onilab’s team has been working with Magento for 7+ years, and in 2019 we launched our first PWA.
3.2 Software Solutions
One substantial pitfall of the headless approach is that not all third-party modules support headless yet. If some integrations you currently use don’t work through an API, you’ll have to customize them for headless or replace them with suitable analogs.
However, more and more modules are created right for API-based selling platforms as the most promising ones.
3.3 Time & Money
At this stage, you are probably sure that a headless Magento PWA is a worthwhile solution for your store. Then you need to find out how much you should invest and how long it takes to rebuild your store. So how much does headless Magento cost?
Well, decoupling the store and creating a PWA can’t be finished overnight. It’s a laborious process that demands hundreds of hours of development. Our Magento PWA pricing guide will give you realistic timing and sums for all main headless Magento development steps.
In Conclusion
Along with the rest of the eCommerce world, Adobe bets on headless commerce as the next breakthrough for online businesses and actively promotes headless Magento.
You might have doubts whether this trending architecture and technologies behind it are stable enough. Maybe it’s better to wait for a while? As a team that has created 10+ Magento PWAs, we see that the digital infrastructure is fully prepared for the move towards headless. The size of a store doesn’t matter.
There’s no time like the present to outpace competitors. Check out our headless commerce pricing guide to learn about the cost-efficiency of the solution. So, as soon as you decide to make your Magento headless, feel free to reach out to us for Magento PWA development services. We’ve accumulated a lot of expertise in the area and are ready to turn it to your advantage.