7 Technical Considerations for Using Headless E-commerce Technology

Every day, more transactions take place online as the world of e-commerce continues to expand. This rapid growth has shifted the needs of the modern commerce solution. Many companies are now turning to headless e-commerce technology to reduce technical debt and give buyers more consistent, personalized shopping experiences across multiple channels

An August 2020 study from Wunderman Thompson reveals that 76.5% of surveyed companies have already adopted headless e-commerce technology or will do so in the next 12 months (examples of “headless” companies here). With this new setup comes many options not previously available to developers.

Kelly Vaughn, founder and CEO of the Taproom, provides a great overview of the new opportunities that headless commerce is creating. In a presentation she highlights the primary technical and architectural considerations developers now face when building a commerce platform for the future.

In this post we’ll take a look at some of the key questions Vaughn recommends asking when building your e-commerce solution with new e-commerce technology.

Should you modernize your tech stack?

Building a platform that uses a headless architecture affords developers a wide range of options for their tech stack and how they are able to code multiple frontends. This is a breath of fresh air for those used to building storefronts using more traditional approaches such as HTML, CSS, JavaScript, Liquid, or jQuery says Vaughn.

Developers can now consider how to modernize their tech stack to adapt to the new e-commerce setup. This includes finally introducing the JAMstack and other modern framework libraries such as Vue, React, and Angular.

JAMstack, which stands for Javascript, APIs, and Markup, is a modern web development architectural pattern. With JAMstack you ship your frontend presentation markup so visitors receive information the moment the site is loaded. You then use Javascript to add functionalities to your application. This is normally done through APIs.

Using JAMstack can lead to faster performance, better database security, and lower costs as the hosting of static files is cheap or even free.

Can you build a CI/CD pipeline?

According to Vaughn, those who have ever built a theme or made significant changes to the frontend of their store on a monolithic platform know how difficult it is to do any form of Continuous Integration (CI) or Continuous Delivery or Deployment (CD). By decoupling the frontend of the e-commerce solution, developers are able to build a CI/CD pipeline.

A CI/CD pipeline helps automate processes in the development and operations life cycle. This occurs when a developer inputs code to a source code repository all the way to deploying the code to the online storefront. CI/CD also allows for agile development as software changes reach production more frequently.

Can static site generation improve performance?

With a headless storefront you are able to do static site generation. This is an important consideration for e-commerce businesses as Vaughn points out that there is a direct “inverse correlation between low latency and higher conversion rates”. 

Static sites are also built to scale as you don’t need to make a request to the backend servers every single time a customer visits the store. With a static site, you don’t have to scale out the application and database layer, and there isn’t much dynamic application or database present to serve dynamic requests.

You can improve the flexibility and fluidity of your users’ experience (especially mobile) even more by using Progressive Web Applications (PWAs). These let retailers deliver a mobile app-like experience without shoppers having to download an app on their smartphones. They are similar to a responsive web design but offer additional functionality like push messages, offline support, and other native app-like features.

A responsive web design is developed once and the different mobile devices are responsible for displaying an appropriate version of the site based on the screen size. This is usually done with scripts running in the background. 

PWAs present a customized version of the website to the user as they visit. This means that different versions of the same website may need to be developed based on the device in use.

How will you prioritize security?

Proper security should be a priority when building an e-commerce platform. The inherent structure of a headless system makes it more secure against cyberattacks than traditional coupled software as the API layer acts as both an application layer and a security layer.

To start, having one uniformed data structure instead of a single monolithic system makes headless platforms much easier to monitor and control, reducing the risk of critical failure.

Layer abstraction allows the CMS functionality to be hidden under layers of code instead of being directly exposed as is the case with traditional CMSs. Because the system is decoupled, temporary problems with one component won’t impact the entire system’s security and can often be fixed in the background while stores are still up and running.

Should you build a data access layer?

The first architectural consideration to keep in mind is the data access layer. As Vaughn states, “if you choose to go headless you’ll have to choose between creating your own data layer or using a backend service to handle this for you”.

Creating the data layer yourself will take considerable time as you’ll need to build the following:

• Database for the product data in the CMS
• Backend API for collecting data
• Backend authentication system
• Connector and an object loader to bridge the API in your tech stack
• Dashboard to handle indexing and merchandising

This is just part of what will go into building the data layer. While this is certainly doable, you’ll want to weigh the benefits and consider if it is worth the effort to build your own data layer instead of using a SaaS provider to handle the backend.

Should you use a headless CMS?

A headless CMS makes it easy to update the content of your store in real time without affecting its usability. With a traditional CMS, you have to spend resources on both content editing and content rendering. A headless CMS however doesn’t have to handle content rendering.

A headless CMS isn’t bound to a single presentation the same way a traditional CMS is. This enables it to find an audience across multiple channels. With a headless CMS, you can manage content for apps, websites, wearables, and internal interfaces all in one place.

As the headless architecture gains more popularity, the number of headless CMS providers that support this setup is increasing. 

Here are some of the more popular solutions:

• Contentful: Contentful is an API-driven headless CMS that allows developers to create, manage, and publish content on any digital channel.
• WordPress REST API: WordPress is the most popular traditional CMS in the world. While it was designed as a coupled content management system, it has since released its REST API, allowing it to be used with a headless architecture.
• Sanity.io: Sanity is a headless CMS for structured content that comes with an open source editor.

Your e-commerce platform may also offer a headless CMS. For instance, at Fabric we offer a headless CMS as part of our experience management platform (XPM).

How will you make your platform scalable?

When building an e-commerce platform scalability should be a primary consideration. You want to ensure that your solution is able to perform efficiently during traffic peaks. As your store becomes more popular, your e-commerce solution needs to scale with little effort. This will help you avoid unnecessarily large infrastructure management costs.

One of the most critical components that will impact your e-commerce platform’s scalability is its database. One way your database can allow for scalability is through load balancing (having data spread out over several servers). This can help your e-commerce store reliably handle high levels of demand. In a situation where your database does fail, load balancing provides a backup server that takes over the role of the database, ensuring your e-commerce site is always available.

Check with your third-party service provider to see if they provide load balancing. Cloud infrastructure is highly scalable and should be equipped to grow alongside your business.

How will you deploy your storefront?

Finally, you want to choose where to deploy your storefront. To determine the best service for hosting and deploying your site, there are several important factors to consider:

• Is your site a static site or do you have a large database of user information?
• How important is building a CI/CD pipeline?
• Do you want more control, or are you looking for automatic deploys?

If your site is completely static you can use one of several options that are free of charge, the most popular being Github Pages. If you want more control and the ability to choose your git repository you can use Netlify to deploy your site.

If you are looking for a custom pipeline you can use Heroku. Or if you have a massive site to deploy you can use a service built to scale such as Amazon Web Services (AWS) or Digital Ocean.

Conclusion

In summary, here are the following questions you should ask yourself if you’re considering new e-commerce technology or a complete commerce replatform this year:

• Should you modernize your tech stack?
• Can you build a CI/CD pipeline?
• Can static site generation improve performance?
• How will you prioritize security?
• Should you build a data access layer?
• How will you make your platform scalable?
• How will you deploy your storefront?

Taking these points into consideration will help provide a better understanding of what goes into creating a highly-functional platform built for modern commerce in 2020 and beyond.

Bradley Taylor

Tech advocate and writer @ fabric.