GESSO BASICS

What is a Development Accelerator?

If you talk to any of the leading service integration agencies in today’s web development space, you might hear the terms: accelerator, development accelerator or even decoupled commerce accelerator. But what do those terms mean? Let’s break it down.

What is an accelerator?

An accelerator is a process or tool that speeds up results and improves time-to-value. You will hear accelerators being used more generically for anything around business and operations: model templates, starting points, anything to accelerate you getting to whatever you're trying to build faster. 

What is a development accelerator?

In web development, and for Acro Commerce, a development accelerator is a pre-built framework that gives us a mature foundation and architecture for rapidly building complex websites and applications. 

---

 

What is a decoupled commerce accelerator?

Our decoupled commerce accelerator, Gesso, consists of API mediation, data fetching, design system and presentation technologies. 

Gesso is a pre-built framework built especially for businesses adopting a decoupled architecture setup, using a dual-core setup of content and commerce.

What does “decoupled” mean?

Decoupled means the platform or system's main parts are separate but work together to create the final product. 

Is headless the same as decoupled?

No, but you often hear those terms used interchangeably.  

• Coupled systems have a back end and a front end that are intertwined. These are often referred to as “monolithic” in today’s terms.
• Decoupled systems can choose their front end, or “head,” which is how they display their data to the end user, whether a customer or an employee. 

If something is headless, the system has no head, or front-end display, whatsoever: it would have to come from a different provider. A headless provider would just be one (optional) part of a decoupled system.

For example — the Drupal content management system has a head, but we choose not to use it in a Gesso setup. We send the content from Drupal to a presentation layer that uses a React front end. This layer can then output to various displays, such as kiosks, desktop websites, web applications, or how the business sees fit.

What is a design system?

“A design system is a set of standards to manage design at scale [using reusable components and patterns] by reducing redundancy while creating a shared language and visual consistency across different pages and channels.”

In Gesso, our design system is a universal library of design tokens that control how content and data are present on a website’s front end. It is a single source of truth for all things visual and dictates how users see items on the front end.

The main aspects of a design system are tokens and components

Design tokens are the smallest elements of design: colours, typography, spacing, radii, shadows, etc. By themselves, these tokens don’t do anything. They're used to build or construct components. 

Components are ready-to-use, pre-built and highly configurable user interface pieces. Many components have different options that you can toggle on and off (also called “properties” or “props”) to have all sorts of different looks and sizes for different specific applications, etc.

As a bonus, we built Gesso’s design system using consistent design language. So when we talk about what tokens, components and properties, they're the same across the board, whether you’re a designer, a front-end guy, or a software developer.

Middleware / APIs

Middleware and application program interfaces (APIs) are part of a mediation layer that primarily facilitates communication across different services. 

In other words, the mediation layer makes the services independent of each other so that even if a particular service is replaced or removed, the other services can seamlessly interact with new services. 

The mediation layer acts as an interpreter between different technologies and protocols.

For example — Let’s say we use Drupal as our content management system (CMS), BigCommerce as our commerce engine, and Acumatica ERP to store all of our product data.

Each of those services is independent of the other, but they also use the data from each other to contribute to the final output of a product page on the front end of a website.

The mediation layer, consisting of middleware, facilitates the data transfer between all three services through specially configured APIs. Data seamlessly transfers back and forth from the front end and between Drupal, BigCommerce, and Acumatica because of the mediation layer setup.

Data fetching

Data fetching allows Gesso to render content differently, depending on the application's use case. These include pre-rendering with server-side rendering (SSR) or static generation (SSG), and updating or creating content at runtime with incremental static regeneration (ISR).

• The content is up to date because it is fetched on the go.
• The website loads quickly because the browser fetches content from the server before rendering it for the user.
• Because the JavaScript is rendered server-side, the user’s device has little bearing on the page's loading time, making for better performance.

Front End and Presentation Layer

The visual layer. This portion is the end-user-facing portion of a website and what your customers and users interact with. 

The presentation layer implements the design system, so your front end is built based on all the components pulled from it.  It also connects to the other backend systems (commerce platform, content management system, ERP, PIM, etc.) via the mediation layer (explained above). It presents the data that any of those systems are supposed to display for the end user. 

Bringing it all together

Now that we understand the parts of a decoupled commerce accelerator, it begs the question of why one is important in web development. 

Our primary accelerator, Gesso, is a premier tool that uses best-in-class technology and assets to bring commerce websites to life fast, launching on time, in as little as three weeks from project start to first version launch. 

Check out how we used Gesso to do just that for BC’s Provincial Health Services Authority. 

Traditionally, web development takes months and months longer and requires multiple rounds of testing, debugging and then, if it all works out, every time you need to update one system or another, you essentially affect every system since they are tightly tied to one another.

A decoupled accelerator allows your business to identify systems that need work and work on them in isolation, allowing all the others to keep humming along. This modularity means that development can work on services and platforms simultaneously, iteratively and continuously. The advantage of continuous development is that your business gains agility and can react quickly to changes that can drastically improve your business operations.

Ready to talk about future development?

If you are prepared to discuss the benefits of a decoupled commerce accelerator for your organization, use the contact form below to chat with one of our experts. Or, if we have just muddied the waters, let us know that too.