Architecture and Frontastic stack

Architecture overview

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.

At the heart of what we do are 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., 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 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 they're delivered optimized for performance to your customers.

Developers build 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.. We provide all the tools you need to build, deploy, and iterate on your site. This includes: 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., 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., Continuous Integration, and more.

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. get data through our 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.. 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. connects and dispatches information requests to any service API. To speed up your connector development, you can use our extension libraryextension library - Extensions that are available with a Frontastic project that are copied and pasted into their own project to use. Part of our developer tooling. for bootstrapping.

Once built, the 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 ready-to-use 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`., 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 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. 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.

Next.js
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 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., 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.

TypeScript
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.

Yarn
We use Yarn as our package manager for JavaScript.


Did this page help you?