Architecture and Frontastic stack

Architecture overview

There are 4 parts to Frontastic:

  • API hub
  • Developer tooling
  • Frontastic studio
  • Frontend delivery

At the heart of what we do are Frontastic components, which are React components with a schema. They're built by developers, added to pages by business users, the data is brought in from the API hub, and they're delivered optimized for performance to your customers.

Developers build Frontastic components. We provide all the tools you need to build, deploy, and iterate on your site. This includes: the Frontastic CLI, Frontastic sandboxes, GitHub customer repository, Continuous Integration, and more.

Frontastic components get data through our API hub. The API hub connects and dispatches information requests to any service API. To speed up your connector development, you can use our extension library for bootstrapping.

Once built, the Frontastic components are ready-to-use in the Frontastic studio, where you can build your entire site, all without code. From creating menus to optimizing pages and filling your site with content, it's all done in one easy-to-use interface.

Frontastic provides the delivery layer that displays your Frontastic components to your customers. Frontastic utilizes Next.js to serve a Progressive Web App (PWA), optimized for performance and mobile first. This also provides Server Side Rendering (SSR), auto-scaling, and fail-safe hosting.

Frontastic stack

Our technology stack consists of community-proven applications, tools, frameworks, and components.

When working within development, you'll mainly be using ReactJS as provided by Next.js.

You can work on your code in the frontend as you like. Behind the JSX/TSX entry point of a Frontastic component, you can break down the frontend experience into any number of React components as well as regular JavaScript files.

We generally recommend structuring your code in well-designed ReactJS components. We also recommend extracting complex logic into independent, pure JavaScript classes that are decoupled from ReactJS and HTML interaction.

Frontastic uses TypeScript by default for any backend extension. This lets you easily work with the Frontastic APIs using auto-completion in your favorite IDE and safety checks at compile time to prevent many bugs upfront.

We use Yarn as our package manager for JavaScript.

Did this page help you?