Frontastic for developers

We build the ordinary so you can build the incredible.

Documentation

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.. Use our standard integrationsintegrations - Pre-built data connectors from API providers to Frontastic, for example, commercetools, Adyen, and Contentful. or build your own extensionsextensions - Data connectors that you add specifically to your project. to connect to any headless solution to fill 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. with content.

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. Your site is served as a Progressive Web App (PWA), optimized for performance and mobile first. We also provide Server Side Rendering (SSR) along with auto-scaling and fail-safe hosting.

See our detailed architecture article for more information.

Frontastic stack

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

When working within frontend or backend development, you'll mainly be using ReactJS. For metadata and SEO requirements we have React-Helmet included.

In the frontend, you're free to work in your code as you like. Behind the JSX 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. Using SCSS you can adjust the standard styles or replace them with an entirely custom styling.

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.

We're using Ant to provide a common CLI experience across all tools, to define a build pipeline, and use this also in Continuous Integration (CI). Ansible is our tool of choice for provisioning any server environment and automating everything around Frontastic.

We use Yarn as our package manager for JavaScript. You can find out more commands we use in this article.

Redux is used for managing the state inside your frontend. You can find out more about Redux on their website.

Symfony is used for our PHP framework. We utilize a lot of their commands which you can find out more about in this article. You can also visit their website.

We use webpack to package our JavaScript applications and takes care of our bundling and chunking. For the development environment, it creates the build of the JS files, bundles it all together, and starts a server for all this information. For production, webpack takes care of the build step. We also use it for our Continuous Integration to run and build all the assets needed as well as minimizing and optimizing code. This creates a better performance on your sites. You can find out more about webpack on their website.

Babel is used as a JavaScript compiler to translate JavaScript files. You can find out more on their website.

We use Supervisor for our operational tasks. You can find out more information in this article.

Frontastic is highly extensible in multiple ways. The most used extension point is an API lifecycle decorator (see the API decorators article for more information). With this you can hook into any of the API calls that Frontastic issues and manipulate the input or adjust/enhance the output. For example, you could change searches by adding more parameters, enhance product information through data from additional API service, or hook into cart value calculation as an item is added to the cart.

The backend that serves frontend delivery is a very slim and fast application based on Nginx (as web server) and Supervisord (for long-running processes) is in place. Both work mostly with PHP (cutting edge version) scripts.

Symfony 4.x and Doctrine form the basis for our backend. Composer and PHPUnit are the most significant development tools here.

We use MySQL as data storage.

Frontastic has chosen this long-established solution stack due to its stability, scalability, and fault resilience.

Updated 23 days ago


Architecture and Frontastic stack


Suggested Edits are limited on API Reference Pages

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