Frontastic architecture: API hub

API hub

Frontastic is made up of 4 parts: the API hub, developer tooling, the Frontastic studio, and frontend delivery. Each gives you all the tools you need to build amazing commerce sites.

In this blog series, we’ll look at each part of the architecture, how it works, and what you can do with it.

In this article, we’ll be looking at the API hub.

Frontastic architecture

What’s the API hub?

The API hub provides a unified way of querying all data in your tech stack. It takes all the APIs from the microservices you’re using, puts it all together, and sends it to the frontend. It’s also known as a Backend for Frontend (BFF) or an orchestration layer. The API hub can also restructure the data from those APIs to format them the way the frontend needs them to be. The data usually contains more information than required by the frontend, so to reduce the network transfer size, the API hub optimizes the data as well.

So, what do I do with it?

You can plug the API hub into any API data source and connect it to the Frontastic components in your Frontastic project. The API hub then automatically fills the Frontastic components with the data needed as a customer navigates your commerce site.

We have ready-to-use integrations for commercetools, Shopify Plus, Adyen, Contentful, and GraphCMS. But, you can extend Frontastic to connect to any headless service, including commerce, content, search, and other APIs using GET or GET and POST methods.

Once connected, you (or anyone else in your team) can also use the Frontastic studio to filter the data that comes from the API, so it only displays what you want it to. You could have a product slider that has 1 data source with a filter for red products and another product slider with the same data source but a filter for shirts.

The API hub can also enhance product data from a commerce backend with additional data from a headless CMS through data correlation.

But why do I need Frontastic to do it?

If you’re building a headless commerce architecture, the integrations you need to think of aren’t only between the frontend and the backend. Depending on the complexity of your platform architecture, you’ll have other tools to integrate as well. Think of specific tools for search, personalization, marketing analytics, content management, ERPs, and so on. From a development point of view, you’ll have to create them from scratch if you’re not using Frontastic. But more importantly, your developers will also have to keep on maintaining these integrations as they power a network of services working seamlessly together, all the while keeping the entire solution stable and scalable.

While it’s possible to do all that yourself, developer resources are scarce, and you want to make the best use of your time. Integrations for tools like Google Tag Manager or backends like headless Content Management Systems already exist, so why spend time creating them yourself when you can use our API hub? This article from Joao Alves gives a good overview of the problems you could face (and the API hub solves all of them).

And it does so much more

The API hub does more than just connecting your APIs and translating the data for the frontend.

Failure resilience

It can handle slow APIs and APIs that aren’t working. It has what’s called a circuit breaker. So a customer can visit your site, and even if an API fails, the API hub can still deliver a (mostly) functional site while notifying you of the issues.

Service authorization

Connecting random backend services directly from the frontend is basically never an option because you want to apply custom safeguards, like data filtering, authentication, authorization, checks. And the API hub does this for you.

Monitoring

The API hub monitors downtimes, response codes, performance of integrated services, and more, but we’ll talk about this more in our developer tooling article.

And that’s just to name a few. Take a look at the image below. The top part shows everything that’s involved when creating a commerce site. And the bottom part is what’s involved when you’re using the API hub.

If you’re interested in finding out more about our architecture, see our documentation at docs.frontastic.cloud.

Portrait Catherine Jones

Catherine Jones

Catherine’s the Lead Editor at Frontastic. She’s worked in many different positions at different levels but always with a customer focus and is always looking to create the best experience for users.

Stay in the loop

Subscribe to our newsletter to keep up-to-date on all the latest Frontastic news.

Related

Composable commerce isn’t only for enterprise

While eCommerce has grown over the years, there're still obstacles and challenges that companies face in their attempt to improve the online shopping experience. In the article, you will find some of the top issues that still cause difficulties and how you can solve them with a headless frontend.
Read more
operational efficiency as metric for headless commerce

Operational efficiency: The future metric for headless eCommerce platforms

,
This blog post explores how operational efficiency will be the future metric for headless eCommerce platforms. If you've moved to headless or are planning towards headless transition then this article will serve as the best guide for you.
Read more

Business problems a headless frontend can solve

While eCommerce has grown over the years, there're still obstacles and challenges that companies face in their attempt to improve the online shopping experience. In the article, you will find some of the top issues that still cause difficulties and how you can solve them with a headless frontend.
Read more