Modern e-commerce development with headless frameworks

E-commerce is a famously risk averse segment when it comes to online platforms. It makes sense, (especially amongst smaller business owners), because most stores are not specialised in development and don’t have the resources for a dedicated software development team. As a result, they tend to look for options that have a proven track record (and which preferably are simple to set up and maintain). Their decision making is less concerned with being exceptional as a store and more with being a functional store where they can show off exceptional products. 

This goes some way to explaining the ubiquity of Woocommerce and Shopify and the dominance of Magento when it comes to more complex setups. There are plenty of competitor products out there, no doubt you’re familiar with names like Wix, Zencart, Squarespace and BigCommerce, (and that’s just the tip of the iceberg), but the established reputations and communities around those big three brands have kept them well ahead of the competition.

Ecommerce platforms

Ekreative has built for all three of these platforms over the years, in fact, we recently released a guide to making sure your Shopify app gets accepted, based on our extensive experience of their review process. But there are a number of cases where none of those big three platforms is the best choice. To understand what those cases include, let’s quickly review why you might choose one of these market leaders.

Choosing the right e-commerce platform

 

Woocommerce

woocommerce platform

Woocommerce is technically the most widely used e-commerce platform in the world, (though “platform” is a strong word in Woocommerce’s case) but its users tend to be smaller businesses. There are a few notable exceptions, like the Wall Street Journal and Men’s Health, but you’ll notice that the exceptions are very much content focused models. That’s because Woocommerce is not a standalone e-commerce platform, but a WordPress plugin.

For the huge number of WordPress based sites out there (according to W3Techs 40.2% of the web uses WordPress), this seems like a big plus. Easy to integrate with their existing, content focussed web presence, Woocommerce’s well established open source community ensures that a wide range of plugins are available. If you do need something new, you can always create custom options. 

On the downside though, Woocommerce is a high maintenance option, with frequent updates, patches and plugin conflicts requiring regular developer attention. On top of that, it’s almost impossible to effectively scale, so its use is effectively restricted to smaller businesses with less complex catalogues. 

Shopify

Shopify platform

For ease of use, nothing beats Shotify. Theme setup is uncomplicated, hosting is included, and the overall user friendly simplicity of the system makes it a firm favourite with a wide range of B2C businesses. Again, a lot of small and mid-sized businesses find this option works well for them, though there are a number of notable big brands selling through Shopify, including Budweiser, Tesla, and Penguin Random House UK. 

There are a couple of potential downsides though. First, Shopify runs on a saas model, so the merchant pays a monthly fee to use the platform. Again, for smaller businesses this can make a lot of sense, as the ease of setup and use justifies the cost, but as operations scale up, so do the charges. Additionally, Shopify stores are much less customizable than other options, so for complex catalogues and brands looking to make a unique impression, there’s probably a better choice. 

Magento

Magento Commerce

Magento is the go-to choice for a lot more B2B sellers and bigger brands, including Ford, Nike and Coca-cola. In fact, it’s much more likely to be used for the flagship e-commerce site of a big brand than either of the two other options (when big brands do use Shopify or Woocommerce, it tends to be for a sideshow, e.g. selling branded merchandise, rather than their main sales platform). That’s because it’s the most flexible, customizable and scalable of the big three e-commerce platforms. With Magento you’re able to create a more unique store and scale up effectively. 

There are a couple of downsides here though. The first is that it requires a lot of development hours compared to the other options, so the initial costs of developing the site will be higher. This is the obvious flip side of the coin that you get for having a higher level of customization. For a high performing e-commerce site though, this is an easily justifiable cost of business.  

The other downside might seem a little less obvious at first, but it’s an important one for a platform that requires so many developer hours to implement, and that’s that the technology stack is very dated. Where other areas of the internet follow the cult of the new, Magento trudges along with some pretty old fashioned technologies and approaches. Even Magento 2 is five years old now, and while this is a good sign in terms of the platform’s reliability, it also means that a lot of technological potential is being left on the table! 

E-commerce alternatives needed

We encountered this decision ourselves when approached by the sneaker reseller Klekt for help with their development needs across mobile and web storefronts. As Europe’s foremost Sneaker reseller, they have a large and complex catalogue which is constantly changing. Between this, their desire to stand out as a forward-thinking, technology-driven brand, and their dislike of the lock-in they’d experience if they went with Shopify, Magento might seem like the obvious choice (plus the scale of their operation made Shopify’s subscription fees particularly unattractive). 

e-commerce site and app

Klekt needed a highly customisable e-commerce site and app, which operated smoothly at scale and didn’t lock them into a specific vendor. 

While Magento is a clear choice over Shopify in this case, it’s still not ideal. Yes, it’s self-hosted and allows more room for customization, but Magento is still an all in one e-commerce solution. There’s still a degree of lock-in and inflexibility that comes from choosing Magento because of this. For a truly flexible e-commerce solution, that would empower our developers to create a high-performance storefront, we needed to look a little further afield. Luckily, there are a number of other options out there which allow for even more control over the end product. 

Headless frameworks 

Eventually, we decided to use Vendure over Shopify, Magento, or any of the other e-commerce platforms out there. It might seem like an unusual choice to pick a newer system (Vendure is still in Beta at the time of writing) for such an important role. On this occasion though, the client actually proposed Vendure as an option, and after careful analysis we came to the conclusion that it was a great fit for this project. There were a couple of big reasons for this decision. 

Vendure 

Vendure framework

The first reason for choosing Vendure is that it’s a “headless” framework, which is to say that it only handles the shop backend and needs to be connected up to a separately developed frontend and cms backend if needed. There’s a potential downside here in the complexity of the system, but it’s far outweighed by the positive, that you can make the frontend with whatever technology you like and thus play to the strengths of your development team. We made Klekt’s web front end with Next.js to take advantage of our deep React and Next.js experience (an option that would be much harder with a Magento setup), but it would be just as easy to make the front end with an Angular based framework. We also developed a mobile front end with React Native, which is similarly hooked up to the Vendure back end. 

This headless approach then gives you total control over each part of your system. You’re not locked in to themes made for a specific platform, but can take your custom look and functionality to new levels. If we were to put the four  platforms we’ve discussed on a scale from least to most customizable, it would start off with Shopify as the least customizable, then we’d have Woocommerce and Magento in the middle and Vendure completing the trend, providing a highly customizable route.  

Secondly, Vendure very much emphasises it’s modern technology stack. It’s GraphQL based and built with TypeScript and Nodejs. Not only does this stack and approach feel much more up to date than Magento’s, all in one, non-API based offering, but as our team has built a range of custom backends with the Nestjs framework for Node.js, again it enables us to play to our strengths. Of course, having a modern technology stack isn’t an end in itself. The ease of use for our developers though, combined with the flexibility these technologies allow for, ensure that the end result we produced was higher performing in every way.

Prismic

Prosmic

We actually took the idea of headless frameworks and ran with it on this project. As well as using Vendure for the project back end, we also used Prismic to create the CMS functionality. The concept behind Prismic is very similar to that of Vendure, but with a focus on CMS rather than e-commerce back ends. Together, Prismic and Vendure really highlight this modern trend for developing with highly specialised frameworks that can deliver great results within their area of expertise while allowing you increased flexibility in the rest of your stack. 

Open source

A lot of great e-commerce tools are open source, including Magento and Woocommerce as well as Vendure (which is available under the MIT license). Specialising in beautiful bespoke sites, we’ve made plenty of custom plugins and contributions to open source projects over the years. In the case of Vendure, (which already offers some powerful options, but is still officially in its Beta stage), we were able to make meaningful contributions to the framework’s ability to scale up, submitting architectural changes that allow for a higher number of products to be managed.   

Collaboration image

Contributing to the framework ourselves is helpful for a range of reasons. First of all, it helps us meet the needs of the project we’re working on. Secondly, it helps ensure that our developers have a deep understanding of the framework and its capabilities. Thirdly, it’s always good to give back to the community whose efforts contribute to our success. And fourthly, as future e-commerce projects arise with similar needs, we’ll know where to look for reliable results. 

Headless frameworks moving forward

While it’s clear that not every e-commerce project requires the level of flexibility offered by headless frameworks, for high performing, flagship store sites (and apps) this seems like a winning approach:

  • It allows for more design options, powering unique, stand out store fronts  
  • It places operation scale up in the developer’s hands, removing reliance on all in one solutions
  • It’s comfortable for the developers, enabling them to work efficiently and productively with modern tools
  • In all areas it allows for more flexibility and higher levels of customization. 

It remains to be seen whether Vendure and other headless frameworks will have the same long-lasting success of simpler to set up platforms like Shopify. Still, given the appeal they hold for developers and the performance they offer to stores, we think this is a development trend that’s going to be with us for a long while yet.