Headless architecture with best of breed stacks
Headless architectures enable a decoupled approach to web and app development. You can re-use content and services across multiple channels or heads. With a proper headless architecture you can also build a centralized repository of re-usable services within your organization. Best of breed enabling Internet craftsmanship. Here is a walkthrough of the architecture concepts by using best of breed stacks.
A headless architecture typically consists of three layers; headless services, service API and channel head. The core concept is to decouple the backend services like PIM, eCommerce, CMS, Payment and Authentication from the frontend. To glue the heads together you typically add a layer of shared internal services that handles authentication, order intake or payment.
The benefits of this type of architecture are:
- Freedom to use your favourite front-end framework
- Build a stack of best of breed services
- Easily share services across all channel heads
- Update frontend independently of services
- Innovate and experiment with new channels
Channel head aka frontend
The head in headless is the frontend. This is where you build your tailor made storefront, website or app. The responsibility of the frontend should ideally be to display content and enable navigation and search for your customers to find the products and content of interest.
Technologies used in the frontend are typically; React, Vue, NuxtJS, NextJS, GatsbyJS, React Native and Flutter. The frontends are typically hosted on modern hosting services like Vercel, Netlify, Gatsby Cloud, Cloudflare pages or directly on the lower level web hosting services like AWS, Azure or Google Cloud.
You really are free to build the frontend in your favourite framework and host it on your hosting provider of choice. Jamstack, SPA (single page application), SSR (server side rendering) or Native App - you decide. Freedom.
The service API is the glue in your headless architecture. It is typically built in NodeJS, Golang or Ruby and exposed via a simple GraphQL or REST + JSON API. Using a federated GraphQL API can be an elegant way of exposing a single service API endpoint. You can have multiple serverless services that are glued together using Apollo federation.
The individual services are typically implemented serverless for simple horizontal scalability with increased traffic. Practically this is where you connect your API tokens and data from your visitors with the headless API services. E.g. collecting the payments from Stripe callback, creating an order in Crystallize and sending a confirmation email using Sendgrid. The glue for your business.
API services should ideally not persist data, they should simply translate requests between services. The service API is typically hosted on a dedicated service for serverless hosting. Like Vercel, Netlify, Heroku or AWS.
Headless API services
The headless API services are the backend of your headless stack. This is where you build a best of breed stack of services. The toolbox that you use for your Internet craftsmanship. By choosing a range of services you have the freedom to build a stack that fits your business as opposed to shoehorning your business needs into a monolithic single vendor architecture.
A stack for headless eCommerce with Crystallize could look like: