Headless Commerce In 2020
What Is Headless?
The first place to start is to actually understand what Headless is. For simplicity purposes, I would consider Headless and PWA (Progressive Web Application) the same thing in that its an architecture in which your frontend is decoupled from the backend. Thus the name: Headless. Your backend or eCommerce functionality has no built-in head (frontend), the head (frontend) is separate.
This paradigm started in the early 2010s when headless frameworks like Angular, React, and Vue.JS became popular. It has taken longer to move into eCommerce versus traditional web applications which are often headless in the tech space because they have large engineering budgets to build cutting edge web applications. Most eCommerce websites use platforms like Shopify and Magento and the templating is part of those platforms which is not headless.
Site Speed: Progressive Web Applications can load much faster because they are only bringing in the data they need when loading. Rather than completely reloading the page, you might just reload the catalog, the footer, sidebar, and the header might stay the same. There are more technical explanations but for simplicity purposes, you are only loading what you need, not the whole page on every page refresh / reload, and in the end, you should end up with a faster website.
Mobile First: By having an independent frontend you can really focus on mobile and mobile-first experiences. You are no longer tied to some platform-specific frontend templating structure and can build exactly what you need to display. This is great for mobile and overall frontend flexibility.
Flexibility: One of the major issues of having everything tied into one platform is that if you want to add new things to your backend etc or maybe change the frontend you have to go through a platform like Shopify or Magento etc. However, with headless, you could more easily change your backend systems like an ERP or the eCommerce platform itself and simply tie that into your existing frontend instead of having to completely rewrite everything. There is more room to iterate than to completely blow things up…
Platform Agnostic: One of my favorite things about Headless is that it can tie directly into an ERP, eCommerce system, and a CMS like WordPress. We find no platform does everything really well, and sometimes using 3 or 4 great systems works better than trying to cram everything into one big bloated software.
Direct Connection to Backend: One of the major issues with eCommerce systems is that they have multiple systems tying into the main eCommerce platform and then all displaying that all on the frontend. This can be quite a disaster at times and hard to manage. You can simply tie in the exact data streams you need with headless to the frontend versus trying to aggregate it all into one system.
Offline Capabilities: Headless applications can work offline to some degree and can be very effective for slow internet or when mobile internet is going in and out of service. It’s far more effective for this kind of environment that traditional websites.
Push Notifications: Headless applications can offer similar functionality like push notifications to mobile apps. Its a great way to achieve a mobile app like experience without having to invest in a completely separate infrastructure from your website.
Future Proof: The world is moving in the direction of headless commerce. Move now or become obsolete. Building a non-headless site is more and more at risk of becoming obsolete in the near future.
Developers Won’t Hate It: Good developers want to build headless. They know it’s better. You will attract and retain better talent by going headless.
Where Do You Start:
I think the best place to start is to get an understanding of the three major frameworks most headless projects use. Those would be Angular (by Google) React (by Facebook) and Vue.Js all of which are open source. They all have their pros and cons and anyone could make an argument why one is better than the other. We personally prefer Vue.Js but they all follow a similar paradigm of development. You could simply build a custom frontend with one of these frameworks and tie in your eCommerce platform or backend systems as needed.
However, I think a better place to start is this:
Headless eCommerce Focused Platforms:
These are platforms are a bit further along than the above frameworks for eCommerce.
Vue Storefront: This is the one we are most excited about. It is platform agnostic and plays nicely with Magento and other popular platforms. It is super flexible, open-source, and the community is growing fast. This is our number one option for headless right now.
Moltin: Moltin is a new headless focused eCommerce platform that is designed to use mini-modules and things you need on the backend as required and connect to PWA frameworks like React etc on the frontend.
OrderCloud: Ordercloud is a B2B focused headless platform that gives you incredible backend flexibility and can easily connect to PWA based frameworks like Vue or React.
Nacelle: Nacelle is a new headless platform similar to VueStoreFront that says they can integrate with popular platforms like Shopify and Magento. They are a newer company that is evolving fast and building out a platform that is meant to be more easy to setup than some of the other custom PWA frameworks.
Magento: Magento has been pushing in the PWA direction and now has its own React kit as well as a growing community of tools like Vue Storefront to power headless Magento.
BigCommerce: BigCommerce has pushed hard to move in a more headless direction. They are working hard to be more of an API focused platform that integrates with other CMS platforms like WordPress well for content and headless for a unified frontend experience.
Shopify: We are seeing more and more Shopify sites and there are going headless via custom React / Vue etc and there are platforms like Nacelle that are trying to build on top of Shopify.
There are other headless platforms but these are some of the main ones we have seen.
I personally see the future of eCommerce moving faster and faster into Headless Commerce with 2020 being a big year for more mature companies to move in this direction. It’s much easier to build a high-quality frontend experience with a PWA framework like Vue or React and it will lead to happier developers, more quality talent on your projects, and better outcomes.
We see 2020 being a big shift for PWA but there still being a lot of bugs and issues being worked out and 2021 being an even bigger year in which it is more common to simply build all-new eCommerce projects as a headless / PWA project.
The thing I am most interested in is where does that leave the eCommerce platform? We are already seeing some eCommerce platforms turned into weird versions of ERP and PIM etc with our headless clients. At what point do you directly integrate a better ERP or PIM and get rid of your eCommerce platform? This begs the question. Should the eCommerce platform be completely rethought of as a back-office tool in the coming decade?