GESSO

Anatomy of a Headless Ecommerce Accelerator Framework

In enterprise B2B organizations and specialized industries like manufacturing, moving towards a more composable and flexible technical architecture enables the type of digital transformation a company needs to evolve their business.

This article dissects our headless commerce accelerator, Gesso, to show you how decoupling your tech stack makes it more scalable and future-friendly.

What is Headless Commerce Architecture?

Also known as decoupled architecture, headless architecture separates the website's frontend user interface (UI) from its backend (business logic) layer.

"By separating backend operations from frontend experiences, manufacturers are free to create the ideal digital story that resonates with individual customers while overcoming the complexities of choosing platforms and navigating compatibility issues. 

B2B Manufacturers can now quickly create the ideal buying experience that fits their complex products and services.”

Shae Inglis, CEO of Acro Commerce

A headless setup generally contains many systems: 

• A headless front end - Gesso uses a React front end but can be customized for other options.
• A commerce platform - Gesso integrates with BigCommerce, Shopify and Drupal Commerce 
• A content management system (CMS) - Gesso’s native integrations can be spun up with Drupal or Storyblok
• An enterprise planning resource system (ERP) - Unique to Gesso, Acumatica Cloud ERP integrates natively.

Gesso: From The Ground Up

Data is the lifeblood of every business, and it lives in various, often disconnected, systems. Where leading edge, modern businesses excel is by using their data to its fullest extent, from every source possible. Gesso enables that type of communication between systems and services.

Let’s break down this diagram from a bottom-up perspective.

Connecting Your Critical Systems

Gesso seamlessly connects different technologies, letting businesses choose the best tools for their exact needs. It helps overcome integration challenges, even with older legacy or custom systems. 

Gesso works with any platform, so companies can link the digital tools that fit their online sales strategy, whether selling directly to consumers or to B2B clients.

For instance, a large organization might use many software apps, including a content management system (CMS), customer relationship management (CRM), enterprise resource planning (ERP), product information management (PIM) and ecommerce systems. 

Gesso simplifies how these platforms share data — whether from manual input, vendor systems, or connectors — by passing it through Gesso's mediation layer, making it available in the customer experience as long as the vendor’s system allows access through an API.

Middleware: API Mediation

A mediation layer primarily facilitates communication across different services and acts as an interpreter between other technologies and protocols. Application Programming Interfaces (APIs) function as conduits for the connected systems, facilitating data transfer, improving functionality, and reducing manual data entry or swivel chair processes.

In other words, the mediation layer allows the platforms to run independently, where data passes through the frontend to each respective backend system. Depending on the use case, though, it may make more sense to have the data pass through existing integrations between platforms (ex., Acumatica and Shopify's integration). 

Herein lies the beauty of Gesso: we can customize it to fit the best use case for your exact needs and the platform you use.

Data Fetching

Data fetching enables varied content rendering based on the use case. For instance, we can configure the solution to pre-render pages, such as articles, blogs, or about us pages, and keep them ready on a server. Pre-rendering ensures quick page loading, which is preferred by search engines and referred to as static generation (SSG).

Alternatively, rendering pages with real-time content, where the server fetches data each time it's requested and delivers it to the client, is possible. This real-time render is valuable for dynamic content like stock availability, inventory data, or customer information such as order history and invoices — known as server-side rendering (SSR). A dynamic call can also be set up to be called directly through the user's browser — also known as client-side rendering (CSR).

Gesso also supports a hybrid approach called incremental static generation (ISR), allowing dynamic updates to pre-rendered pages without rebuilding the entire site. 

Design System

“A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.” - Nielsen Norman Group, Design Systems 101. 

Further, design systems aid in digital product design and the development of products such as apps or websites. They may contain, but are not limited to, pattern libraries, design languages, style guides, coded components, brand languages, and documentation. 

Gesso’s design system is a coherently organized set of interconnected patterns and shared practices using a world-class collection of tools, including Figma, Storybook and React.

Presentation Layer/React Front End

Gesso’s presentation layer is the culmination of the data from the API-connected systems passing through the middleware, data fetching and the design system components. The data is translated, treated, and ready to be presented to the end user in various ways: a website, an app, an IoT-connected device, or another content delivery method.

Gesso uses a React front end to connect to the backend via APIs, pulling data for the front-end components presented to the user, such as product data, inventory or customer account details, building ideal customer experiences no matter where the user sees them.

Gesso: Bringing It All Together Online

As you can see, when we break Gesso down into layers, the goal is to facilitate data transfer between separate systems and present that information to any user in a way that is usable and useful. By integrating your operational systems (ERP, CMS and Ecommerce), Gesso improves scalability and sets the foundation for a composable tech stack where you are free to choose the platforms that best suit your exact business needs.

B2B buyers want you to shift sales processes to digital experiences

To learn how Gesso makes this happen for businesses like yours, reach out to our team using the form below. 

---

Editor’s note

This article was originally published on December 28, 2023. It has been updated for accuracy and freshness.