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. Use our standard integrations or build your own extensions to connect to any headless solution to fill the Frontastic components with content.

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. 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 component, 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 or see their documentation for more information.

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.