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.

This talk has been presented at JSNation Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Commerce Layer is an Atlas Commerce platform and an order management system designed to add global shopping capabilities to any user experience, whether it be a website, mobile app, chatbot, or video.

Being an Atlas platform means that Commerce Layer offers a modular architecture, contrasting with traditional monolithic systems. This modular approach allows for greater flexibility, scalability, and security by enabling the integration of various services and applications without a full replatforming.

Traditional monolithic platforms are less flexible, often slow due to outdated architecture, have security vulnerabilities as a single point of failure, are not designed with a mobile-first approach, and can be expensive as they bundle unnecessary features.

Commerce Layer provides a range of APIs to manage different aspects of the commerce experience including pricing, shopping carts, inventory, and orders. These APIs form the core of the platform, enabling seamless integration and management of commerce functionalities.

Commerce Layer enhances online selling by providing a fast, secure, and scalable platform that supports omnichannel experiences through API-driven modular components. This allows businesses to easily adjust and expand their e-commerce capabilities.

A modular architecture in e-commerce offers increased flexibility, easier scalability, enhanced security, and omnichannel capabilities. It allows businesses to swap in or out modules as needed without significant downtime or expense.

Commerce Layer can be integrated into existing systems using its APIs. It is designed to work seamlessly with various services such as CMS, static site generators, deployment platforms, tax calculation services, payment gateways, shipping carriers, and legacy systems like CRM and ERP.

Fabrizio Picca
Fabrizio Picca
8 min
10 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
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

Scaling WordPress with Next.js
React Summit Remote Edition 2021React Summit Remote Edition 2021
9 min
Scaling WordPress with Next.js
Watch video: Scaling WordPress with Next.js
WordPress is still widely used, with over 800 million installs. The Jamstack is a modern approach to building static HTML websites that utilize JavaScript and APIs for dynamic content. Serving static HTML files is faster than server-based solutions like WordPress. Serving static files from storage or a CDN allows for infinite scalability. WordPress is a compelling option for nontechnical users due to its familiarity and thriving ecosystem.
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
Vue.js London Live 2021Vue.js London Live 2021
19 min
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
This Talk discusses the full stack open-source e-commerce using ViewStorefront and Venge. ViewStorefront is a lightning-fast frontend platform for headless commerce, while Venge is a framework for the back-end. Both tools are highly customizable and built using modern frameworks. Creating an online store with Venge is quick and easy. Overall, this Talk presents a dream stack for open-source e-commerce and encourages contributions to the projects.
Off with Their Heads: Rise of the Headless Components
React Summit 2023React Summit 2023
25 min
Off with Their Heads: Rise of the Headless Components
Watch video: Off with Their Heads: Rise of the Headless Components
Headless Components are efficient for app development, but there's a lot of work involved, especially for menus. The customizability wall is a problem with component libraries, but it can be solved through reverse engineering and design. Headless Components offer no markup or basic markup to be overwritten, providing flexibility in code and design quality. Radix and React ARIA are recommended stylus component libraries with different APIs. Kodaks' experience with headless components highlights the ability to mix and match easily and the potential for market gaps in the headless space. Radix is a popular choice for headless components due to its well-documented and user-friendly API. Headless components aid in testing, distribution of design systems, and accessibility. MUI is a self-consistent and rich library, while Radix focuses on accessibility and default accessibility. Kodaks integrates well with headless libraries and welcomes feedback through Discord.
Exploring the WordPress Graph with Next.js & WPGraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
23 min
Exploring the WordPress Graph with Next.js & WPGraphQL
WordPress is widely used, and it now supports a REST API for headless usage. Serving static HTML files allows for infinite scaling and surviving viral traffic. GraphQL can be used to interface with WordPress data, reducing complexity. WordPress can be coupled with plugins like Yoast and ACF, and WPGraphQL works seamlessly with these plugins. GraphQL allows for selecting only necessary data and has performance advantages over REST APIs.
API-first Development with Headless WordPress
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
API-first Development with Headless WordPress
This Talk discusses API-first development with headless WordPress, highlighting its benefits and the availability of resources. It explores the use of plugins and frameworks like WPGraphQL and the headless framework from WP Engine to create custom post types and make GraphQL calls. The Talk also covers building websites, querying and caching data, deploying apps with the Atlas platform, and improving user experience. It touches on authentication, efficiency, backend resources, and WooCommerce integration in headless WordPress, as well as WordPress accessibility and SEO optimization.
Contentful and headless
React Finland 2021React Finland 2021
19 min
Contentful and headless
How Contentful helps you to manage all the data in a headless e-commerce website.

Workshops on related topic

Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
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.
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
Top Content
WorkshopFree
Matteo Frana
Matteo Frana
- 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
Building High-Performance Online Stores with Shopify Hydrogen and Remix
React Advanced 2023React Advanced 2023
104 min
Building High-Performance Online Stores with Shopify Hydrogen and Remix
WorkshopFree
Alexandra Spalato
Alexandra Spalato
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
Build a Custom Storefront on Shopify with Hydrogen
React Advanced 2021React Advanced 2021
170 min
Build a Custom Storefront on Shopify with Hydrogen
Workshop
Matt Seccafien
Cathryn Griffiths
2 authors
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.
Building custom storefronts on Shopify with Hydrogen
React Summit 2022React Summit 2022
71 min
Building custom storefronts on Shopify with Hydrogen
WorkshopFree
Abe Haskins
Megan Majewski
2 authors
Get hands-on with Hydrogen, a React-based framework powered by Shopify. In this workshop, we'll explore the framework and get a custom storefront up and running quickly. You'll learn how (and when) to leverage React Server Components and caching mechanisms to build fast, dynamic, custom storefronts.
Build a Product Page with Shopify’s Hydrogen Framework
React Advanced 2022React Advanced 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
David Witt
David Witt
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.