Insight

A Jammy Stack
A guide to the world of headless

E-Commerce
Grant MacLennan

At Neu we often get asked if we "build E-commerce platforms". Our answer: you don't want to build your own E-commerce platform.

Yet, this week we launched a new platform for a well-known brand that included a primary E-commence element. So what the heck am I talking about? (a common question)

The future of building on the internet is a bit like baking a cake. You take parts that people are already doing really, really well to solve specific problems and you glue them to other parts to put together a larger construction. This often goes by the term "JAM Stack" (Javascript, APIs & Markup) and it's something we at Neu specialise in.

To illustrate, here's a typical JAM Stack E-commerce solution:

1 Part Content

You're gonna want some words and pictures to sell your things, right? And you're not going to want to ask a developer to make a change every time you want to make an update? Thought so.

So you need a place to enter and edit this content on the fly. In ye'olde days (trigger warning) you'd maybe host this yourself with something like Umbraco or Wordpress. This is still a decent option, and we often still use WordPress in headless mode, but this means the added overhead of hosting the CMS and making sure it's up to date and secure. Not too Jammy...

Instead, there's a number of CMS as a service platforms available. One of my favourites is Contentful. It'll feel very like the CMS's you're used to, but from a developer point of view, these services are much easier to pull the content out from. You also tend to model the data about your business rather than on a page basis. So you enter content about each of your products rather than a specific product page. This is really useful when you want to launch an Alexa Skill (or whatever's next) as the content and the interface is de-coupled - you'll be glad of this...

1 Part Commerce

Straight up, if you come down this road you're going to pay for your E-commerce solution on a per sale basis. Shopify, for example, is $29 per month and then 2.2% + 20p on sales.

Alot of people boak at this - but let's look at the alternative. Choose a Magento solution you're going to have to pay to host it, pay someone to keep it secure, pay for someone to detect fraud, then pay your payment processor on top. Hosted e-commerce solutions look more expensive at the outset, but when compared with the aggregate cost of rolling your own it's much the same (and Shopify's fraud team is probably going to be better than yours).

From a builders point of view Shopify has an advance GraphQL API. This means they lay out all the pipes for getting products, stock levels, adding to cart and checkout in a way that is so flexible it enables teams to design and build really innovative (and effective) shopping experiences. Experiences that alot of legacy systems just can make happen.

1 Part Framework

We now need something to glue the CMS and Commerce platform together. One of our favourites for this is Gatsby.js. (shout out to Next.js too)

"Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps"

In essence, this means that we can build using React in a componentised nature leveraging modern techniques for data fetching, styling complex UIs and managing data using the CMS and Commerce APIs.

This not only makes the initial get-up-and-go pretty rapid but also makes it really easy to iterate and optimise moving forwards.

1 Part Hosting

You've got the CMS, the Commerce and the Glue - now we need to bake it and serve. For this part you need a build integration and hosting platform. We turn to Netlify.

Netlify literately takes your Gatsby project, mixes it with the various APIs, turns out the HTML, CSS and Javascript required to run your platform and hosts it so users can access it. It's serverless too - so throw as much traffic as you want at it, this baby's never going down.

Made a change in error and you need to rollback? With Netlify it's one click and you can rollback to any deployment you've ever made. This is such a step change from traditional hosting that it's impossible to compare.

Is this a total Hipster stack? Absolutely.

Does it make more traditional methods obsolete? Not at all.

Is it a more modern and efficient way of building platforms? I think so.

You might also like

Explore