Frontastic for developers

We build the ordinary so you can build the incredible.

Documentation

Detailed architecture

This article will dive deeper into the Frontastic architecture. For a brief overview of our architecture, see the Architecture and Frontastic stack article.

There are 4 parts to Frontastic:

  • API hubAPI hub - The API hub combines our code, your code, and APIs to create the backend of a commerce site. Any backend development or extensions are done here. Known as `Catwalk` in code.
  • Developer toolingDeveloper tooling - What comes included for developing a site with Frontastic, such as, Frontastic CLI, Frontastic sandbox, deployment pipeline, and more.
  • Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`.
  • Frontend deliveryFrontend delivery - What comes included for delivering your commerce site to your customers, such as, DevOps, SSR, monitoring, logging, and more.

Each is illustrated in our architecture:

Let's go through each part separately.

Developer tooling

Developer tooling is represented as light blue and on the left of the image. As a developer, you'll develop Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code., connect integrationsintegrations - Pre-built data connectors from API providers to Frontastic, for example, commercetools, Adyen, and Contentful., and develop extensionsextensions - Data connectors that you add specifically to your project.. This is done using the Frontastic CLIFrontastic CLI - Our Commandline Interface (CLI) that you can use for frontend development., Frontastic sandboxesFrontastic sandboxes - A virtual machine hosted in the cloud that you can use for backend and some frontend development. They're provisioned from the developer area of the Frontastic studio., and your GitHub customer repositoryGitHub customer repository - Where your code lives in GitHub for all your projects, you can have many project folders within your customer repository. which are all provided.

API hub

Integration and extensions are connected to the API hubAPI hub - The API hub combines our code, your code, and APIs to create the backend of a commerce site. Any backend development or extensions are done here. Known as `Catwalk` in code. (dark blue) which then fetches data from the API provider requested for the Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. and then displays it on your commerce sitecommerce site - The website or web app that's displayed to your customers.. Frontastic doesn't store any data from these APIs. See the Not Frontastic section of this article for more information.

Frontastic studio

Frontend management is done using the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. (pink in the image). This is where business users mainly work and they can build pages and review changes independently. Frontastic also handles all the auto scaling to the production site.

When a visitor browses the commerce site, a call is made to the API hub and it displays all the information that has been created in the studio while calling the APIs to fill all the Frontastic components with the data that's been configured also in the studio.

The actual development work takes place in our API orchestration Delivery layer. It's an independent application that ships the customer experience to end-users: It serves a Progressive Web Application (PWA) based on HTML 5, CSS, and JavaScript (mainly ReactJS).

Frontend delivery

We provide the Frontend deliveryFrontend delivery - What comes included for delivering your commerce site to your customers, such as, DevOps, SSR, monitoring, logging, and more. for commerce sites, which covers the site framework and on top of that, there’s the Progressive Web App (PWA) running React Redux.

You can implement your own source code right beside the source codebase we deliver, so you can create your visual experience. All of which is done within your own GitHub repository.

Let's have a quick look at the request flow for the initial serving of the PWA as well as all subsequent data requests when the customer changes the view:

  1. The browser requests a certain URL
  2. Frontastic will determine which page should be displayed
  3. It loads the data for all Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. on that page as defined by the code and configuration in the studio, plus fetches the information from the attached API providers
  4. The collected page structure information, configuration values, and API data is transferred to the PWA in the browser
  5. Frontastic expresses all the JSX components for every Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. on the page to display and provides it with the requested information
  6. Actions by the website user will result in a new request with either a complete or partial data update

On the very first request from a website user there are a few more steps happening:
Instead of just returning the structure and data to the browser as JSON, a very slim HTML template is also returned. This will make the browser load the actual PWA code and take over the rendering in the browser. If required, Servers Side Rendering (SSR) will take place to pre-fill the HTML body for SEO and browser performance reasons.

Other info

You'll notice that all parts are decoupled applications and they're maintained that way. This means that if the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. goes down for any reason, the frontend delivery of your commerce site will still run smoothly for your customers. Also, if another Frontastic customer's frontend delivery goes down, yours will be unaffected.

Let's look at other parts of the architecture that we haven't gone into detail on yet:

Not Frontastic

The APIs are entirely separate from the Frontastic infrastructure as we don't store any data. All the data for your products, content, accounts, and so on, are all stored within your headless system (for example, commercetools, Contentful, GraphCMS, and so on), we only display them as they've configured it and we don't store the data in between.

For example, say a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. is configured in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. to only show sunglasses from the 2020 collection in ascending price order, the studio doesn't know what the exact products are in this list, but when the customer navigates to where that Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. is on the commerce site, the call to the API hubAPI hub - The API hub combines our code, your code, and APIs to create the backend of a commerce site. Any backend development or extensions are done here. Known as `Catwalk` in code. will provide the product data from the APIs and then display it to the customer in the way it was configured in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`..

For integrationsintegrations - Pre-built data connectors from API providers to Frontastic, for example, commercetools, Adyen, and Contentful., we provide an API abstraction to unify the cloud platforms and encapsulate authentication. The APIs are available directly in JavaScript and their response information is managed across Tastics using Redux.

You can also add your own unique and custom functionality through extensionsextensions - Data connectors that you add specifically to your project.. You can access the APIs of these services right away from the JavaScript frontend. You can also create and use custom namespaces on the Redux store to manage the state in a similar way.

Please note that such services can't be hosted and supported by Frontastic. However, since microservices should be slim and simple, hosting them on any available cloud platform should be possible with very little effort. If you want to host such microservices, take a look at Heroku.

For more information, see the Integrations section or the Extensions section.

Cloud platform

We provide deployment and Continuous Integration through the cloud platform. Whenever there’s a successful build on the master branch of your repository, we'll automatically playout a new image for that instance group. When you decide that your build is ready to be deployed to production, you can do this in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`..

Replicator

The job of the replicator is to check if there are any changes in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`.. It's constantly making requests to the studio for these changes and if it finds any, it fetches this data and pushes the updates the API hubAPI hub - The API hub combines our code, your code, and APIs to create the backend of a commerce site. Any backend development or extensions are done here. Known as `Catwalk` in code. and to frontend deliveryfrontend delivery - What comes included for delivering your commerce site to your customers, such as, DevOps, SSR, monitoring, logging, and more..

Frontastic components

Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. are at the heart of Frontastic and they touch all parts of the architecture. They're built by developers using the developer toolingdeveloper tooling - What comes included for developing a site with Frontastic, such as, Frontastic CLI, Frontastic sandbox, deployment pipeline, and more., connected to data through the API hubAPI hub - The API hub combines our code, your code, and APIs to create the backend of a commerce site. Any backend development or extensions are done here. Known as `Catwalk` in code., added to pages in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`., and displayed to customers through frontend deliveryfrontend delivery - What comes included for delivering your commerce site to your customers, such as, DevOps, SSR, monitoring, logging, and more..

For more information, see the using Frontastic components article.

Updated 23 days ago


Detailed architecture


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.