Frontastic is a SAAS/PAAS service for agile, high-end (e-commerce) front-ends.
High Level View
Backstage is the SAAS component of Frontastic. This is the back-end where shop managers create and administrate their e-commerce experiences. For developers, Backstage offers facilities to upload Tastic specifications, custom app specifications, monitor and profile their code in production and more.
Catwalk and Backstage are maintained as entirely decoupled applications which both potentially access a common set of APIs.
The code in Catwalk accesses Cloud APIs for data retrieval, data manipulation and workflow (see center of the graphic above). For example, a Catwalk will most probably interact with a commerce API like commercetools or ABOUT YOU CLOUD. These APIs will provide product data and search facilities but also basket and checkout management facilities to the Catwalk.
Frontastic abstracts access to these APIs behind a common API layer to ease switching between different API provides, to allow developing of front-end components that work against all supported back-ends and to encapsulate authentication.
Custom Backend Services
Note that such services can, right now, not be hosted and supported by Frontastic. However, since such micro services should be very slim and simple, hosting them on any available Cloud Platform should be a possible with very little effort. If you want to host such micro services, maybe take a look at Heroku.
Frontastic itself only maintains the configuration data that is required to serve a Catwalk. This includes:
- Pages and their structure (Concepts: Nodes and Pages)
- Tastic configuration (Concepts: Tastic)
- API credentials and various shop configuration
- Small chunks of key-value data and minimal content snippet for pages
(In contrast, this does not include: product data, end-user personal information, CMS content, and more.)
To keep each Catwalk an entirely independent application which is not affected by performance or even downtime, data from Backstage to Catwalk is shipped using a replication mechanism. This way every Catwalk only accesses its own, dedicated database. Whenever data is changed in Backstage that affects a certain Catwalk, the required information is synchronised downstream to the Catwalk.
The implemented replication algorithm is resilient, fast, consistent, and well-monitored so that even faults and outages in a Catwalk does not implicate data consistency.
To you, as a Catwalk developer, this means that you can assume a stable configuration data set at any time.
Catwalk consists of a slim back-end part that provides serving configuration and API abstraction towards Frontastic supported cloud services. On top of that resides the Catwalk front-end which is the place where Catwalk development takes place.
Frontastic provides you with a framework to serve progressive web app single page applications with very little effort. Still, we want to provide you with any imaginable flexibility.
The framework is based on industry standard technology and components:
- The major code base is built using ReactJS for the smoothest user experience and easy component development
- React Router is used to switch between different parts of the application (we call the Pages) and to maintain application state like parameters and filters
- Redux is used to dispatch state changes throughout the application
The Framework manages which Page to show, connecting it with the required configuration and data as well as rendering all Page parts, the Tastics.
Tastics are standard ReactJS components which receive some special Props from Frontastic. These Props contain all configuration information (which originates from Backstage) + the stream data provided by API back-ends. Behind this very simple but powerful facade, which decouples Tastics from all the cumbersome state management work, you are free to program as you wish.
APIs and State
The back-end that serves Catwalk is a very slim and fast application based on Nginx, the newest PHP 7.x release and Symfony 3 (soon to be 4). As the Catwalk data storage MySQL is used. Frontastic has chosen these long term established solution stack due to its stability, scalability and fault resilience.