Headless vs Traditional eCommerce Platforms: Introducing Commerce Layer

Rate this content
Bookmark

In this lighting talk Fabrizio will go through the main highlights of CommerceLayer, comparing the headless approach to the traditional "monolithic" ecommerce platforms. We will speak about security, performances and scalability.

8 min
10 Jun, 2021

AI Generated Video Summary

Commerce Layer is an Atlas Commerce platform that provides global shopping capabilities. It offers a range of endpoints for managing various aspects of e-commerce. Modular architecture, like the one used by Commerce Layer, offers benefits such as flexibility, scalability, security, omnichannel capabilities, and future-proofing.

1. Introduction to Commerce Layer

Short description:

Commerce Layer is an Atlas Commerce platform that allows you to add global shopping capabilities to any user experience. It offers an extensive range of endpoints for managing prices, shopping, cart, inventory, orders, and more. Compared to traditional monolithic platforms, Commerce Layer provides greater flexibility and avoids the performance issues associated with slow websites.

Hello, everyone. My name is Fabrizio and I'm the partnership manager of Commerce Layer. What is Commerce Layer? Commerce Layer is an Atlas Commerce platform and an order management system. And thanks to its Atlas nature, the idea is that you can pretty much add global shopping capabilities to any sort of user experience you have in mind.

So it could be a website. It could be a mobile app, a chatbot. It could be a video. Actually, you name it. And all of these in a very, very simple and effective way. So as our product is an Atlas Commerce platform, of course, the core of Commerce Layer is its API. So we offer a quite extensive range of endpoints to manage all the different aspects of the commerce experience. So prices, shopping, cart, inventory, orders, and so on. So unfortunately, I cannot go through all the list of the endpoints, but you can find them in our documentation.

And I think it's important to stress the fact that Commerce Layer is an Atlas platform. And this is very true if you compare it to the traditional monolithic solution. So I guess you already heard this term, monolithic platform. But what does it mean? Actually it means having a single platform managing all the features of your e-commerce application. So think about the platform that actually manage everything. So it manage the CMS, the product information management, maybe the order management system, everything in just one single box. This, unfortunately, comes with some challenges and we try to summarize them in five main points.

The first one is that such platforms are actually less flexible. Why? You have to think that you have just one single box where everything is implemented. So this means that you can't change any module of your application in your commerce application without actually replacing everything. So this is quite a big problem. So if new needs emerge in your business that might require, I don't know, maybe a new model or a new application, your platform won't allow that without a full re-platforming. So you can imagine this is quite a big problem.

The other problem related to this traditional application is that most of the time the result is that the websites built on top of those are just slow. Why that? That's because given the architecture of those applications it's very difficult to leverage the power of new concepts like dedicated CDNs, for instance. And as you can imagine a slow website can be a big problem especially if you consider the new Google algorithm for ranking the core web vitals, just to make an example. So being fast is definitely a competitive advantage when you're selling online.

2. Modular Architecture and Benefits

Short description:

There are security issues with having a single application as a single point of failure. Traditional applications may lack a mobile-first approach and can be expensive. The solution is to work on modular architectures, such as the one based on Commerce Layer. This approach offers flexibility, scalability, security, omnichannel capabilities, and future-proofing. For any questions, contact us at commercelayer.io.

There are also security issues if you have just one application and everything is inside that box you have a single point of failure, so if that application fails everything fails. This is a big problem.

Another problem is that considering that these traditional applications let's say have been designed quite some time ago. Most of the time they were built for desktop, so they don't have a really let's say mobile first approach for instance. And the last problem is that they are expensive. There is quite a lot in these boxes. Sometimes you don't need some of the stuff that is in these boxes but you are anyway gonna pay for all of them.

So what is the solution? Well the solution is actually to work on architectures that are modular and this actually means splitting the monolith. So this for instance can be let's say an example of a modular architecture based on Commerce Layer. So Commerce Layer would be the transactional engine managing prices, stock information, checkout APIs and customer account APIs. And around Commerce Layer, you will start integrating all the different services that are needed to deliver the commerce experience. So an endless CMS for instance, a static site generator, this is very true if you are going the gem stock direction, a deployment platform to optimize and maximize the performances and then link Commerce Layer to specific services for the needs that you might have. So tax calculation services, payment gateways, shipping carriers and also the legacy systems like the CRM and ERP.

And what are the benefits of this approach? Well, as you can imagine, everything now is extremely flexible. You can swap in and out modules, very easily without doing a full replatforming. The scalability comes, let's say, it's much easier because now you can scale just one specific module and avoid, let's say, very expensive, let's say, expensive upgrades of your central platform. So, you can just selectively scale modules of your architecture. It's more secure because now you don't have a single point of failure anymore. And it's omnichannel by design because all of these modules actually has an API interface. So, you can connect pretty much everything, whatever touchpoint you think about to this sort of architecture. And last but definitely not least, is future proof. Being future proof actually relies in the fact that you can change whatever module depending on your needs without, let's say, doing a full re-platforming.

Thank you very much for your attention and in case you have any question, you can drop me a line at my email or just book a demo of our platform at commercelayer.io.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit Remote Edition 2021React Summit Remote Edition 2021
9 min
Scaling WordPress with Next.js
As modern as the web is, WordPress is still king. It’s not the most scalable, but is still compelling with its long history and UX. How can we leverage Next.js to bring WordPress to the modern web? We’ll walk through the tools that Next.js provides us to scale WordPress to the world. We’ll talk about what APIs we can use to easily wrangle WordPress content and how we can make the dynamic bits static.
Vue.js London Live 2021Vue.js London Live 2021
19 min
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
Building an online store these days is not an easy task. With so many competitors Time to Market is the key to success. That's why we decided to build an integration between Vue Storefront- Lightning-Fast Frontend Platform for Headless Commerce, and Vendure - modern, headless GraphQL-based e-commerce framework. Both tools are built using modern JavaScript stack (Nuxt.js and Nest.js) and have several out of the box integrations like search engines, CMS's, payments, and so on. Also, both projects have a huge community of Open Source contributors who support the development process. In this presentation, I will show you how fast you can create your store with VSF and Vendure.
React Summit 2023React Summit 2023
25 min
Off with Their Heads: Rise of the Headless Components
Aren't You Tired of Repeating Yourself? Tired of repeating the same code over and over again in your React projects? In this talk, we'll discover the power of headless components, a design pattern that separates the logic from the presentation layer, allowing you to create reusable and flexible UI components.
We'll explore how headless components can simplify your development process, saving you both time and effort. We'll examine popular headless component libraries and provide tips for integrating them into your projects. Whether you're a beginner or an experienced developer, join us to discover how headless components can help you streamline your React development and create high-quality, customizable UIs.
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
API-first Development with Headless WordPress
When the burden of rendering is removed from WordPress, it becomes an open source API platform. With a few plugins like WPGraphQL, you can create an extensible backend for your React apps to consume which enables modern architectures and development practices in WordPress.
GraphQL Galaxy 2021GraphQL Galaxy 2021
23 min
Exploring the WordPress Graph with Next.js & WPGraphQL
Headless Wordpress using its built-in REST API is a powerful solution to scale WordPress to the web, but complex relationships can easily turn into chains of requests, making maintainability difficult along with the potential cost of performance.
With WPGraphQL, we can harness the benefits of GraphQL, leading to a better developer experience and optimized request logic, making sure we’re only delivering what we need to our users.We’ll explore these advantages and how these pieces fit together with modern tools like Next.js to build great experiences for the web.

Slides & more

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
WorkshopFree
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components
React Advanced Conference 2023React Advanced Conference 2023
104 min
Building High-Performance Online Stores with Shopify Hydrogen and Remix
WorkshopFree
I. Introduction- Overview of Shopify Hydrogen and Remix- Importance of headless e-commerce and its impact on the industry
II. Setting up Shopify Hydrogen- Installing and setting up Hydrogen with Remix- Setting up the project structure and components
III. Creating Collections and Products- Creating collections and products using Hydrogen’s React components- Implementing a Shopping Cart- Building a shopping cart using Hydrogen’s built-in components
VI. Building the home page with Storyblok- Cloning the space and explaining how it works- Implementing Storyblok in the repo- Creating the Blok components- Creating the Shopify components- Implementing personalisation
React Advanced Conference 2021React Advanced Conference 2021
170 min
Build a Custom Storefront on Shopify with Hydrogen
Workshop
Hydrogen is an opinionated React framework and SDK for building fast, custom storefronts powered Shopify. Hydrogen embraces React Server Components and makes use of Vite and Tailwind CSS. In this workshop participants will get a first look at Hydrogen, learn how and when to use it, all while building a fully functional custom storefront with the Hydrogen team themselves.
React Advanced Conference 2022React Advanced Conference 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.