You are here: / / Frontastic in a nutshell

Frontastic in a nutshell

Frontastic is a Composable Frontend Platform

What’s a frontend? 

It’s the forefront of a system. As a matter of fact, the part closest to the customer. It’s your commerce site.

What does ‘Composable Frontend Platform’ mean? 

That we’re not on-premise software that you have to buy, install, operate, and maintain for a lot of money, but an easy-to-use platform that you consume over an internet connection.

Why do you need a Composable Frontend Platform?

I’ll have to go a little further: In the past, you had to buy software as a license (and additionally pay for the further development — called maintenance). You installed the software somewhere and had to make sure that everything was always up to date and running. This software was usually a single large program. The manufacturers of these programs have always tried to do everything well and correctly and above all to keep up with the further development on all fronts.

Then came the internet and with it the cloud services. Over the years, a whole new genre of software has emerged: Software-as-a-Service with API first approach. On closer inspection, Salesforce is an example: Salesforce builds on force.com. Force.com is an API first software service.

Companies have increasingly focused on their respective core competencies and left the rest to the APIs (programming interfaces). APIs have been around for a long time, of course. But they used to be quite complicated to use. Today, it’s very easy to combine the individual APIs of different software services in the cloud. The result is the cloud economy. For example, if I need image recognition and categorization, it’s no longer a tedious, expensive project. Instead, I use the corresponding service from Google, IBM, Microsoft, and so on. And if there’s a better service tomorrow, I’ll change to that.

Summarized: Everything is moving in the direction of service, which can be consumed easily via the cloud and can be smoothly integrated via simple interfaces.

What does headless or API first mean?

The need for multichannel or omnichannel solutions was added. Simply said, it’s no longer the web browser on the desktop that’s the sole target of a web page or a shop, but that the content must be played into other output channels in many cases today. Together with the focus mentioned above, this has led many manufacturers to concentrate completely on data storage and provision and to completely omit the topic of data display.

Instead, applications are individually programmed for the different output channels. These applications “talk” to the eCommerce or Content Management System via the public API (naturally via a password-protected, encrypted channel).

Frontastic: The head for a headless world

This is where Frontastic comes in.

Frontastic is designed to finally offer the frontend — what the customer sees — as a comfortable, high-performance platform.

For business users

For a business user, the one responsible for the virtual counter, Frontastic is the editorial system. The editor uses the Frontastic studio, a beautiful, easy-to-use web interface where they can configure the page tree and menus, design individual pages, and more. Ultimately, this is exactly what they used to do in the monolith of on-premise software. Only with 2 essential differences: 1) Our focus is to provide a very easy-to-use interface and 2) Frontastic isn’t only a shop or a CMS, but we connect with different shop and Content Management Systems and the editor can compose the pages on the basis of all systems.

For developers

For the developer, Frontastic is a development environment, a platform, and a React library. In addition to our easily provisioned sandboxes and CLI, we also provide a Continuous Integration process and other processes that standardize the work of the development teams — without being restrictive. And for frontend work, they receive a library of components (called Frontastic starter components) that can be used as a basis for customer-specific projects.

For customers

For the customer and visitor,  Frontastic is the commerce site, what the visitor sees in the browser. Most of the information displayed to the visitor isn’t stored in Frontastic but is retrieved by Frontastic from the Content Management or eCommerce systems (see graphic).

What’s the difference to shop kits?

What’s the difference to site builders, shop building blocks, or SaaS eCommerce platforms with a frontend, such as Shopify?

Simple: We’re enterprise ready. Some of the younger shop kits from the cloud look good at first glance. And for small (hobby) projects it’s certainly a sensible solution. But if I’m planning a larger eCommerce platform with hundreds or thousands of products and good content, then I need a system that helps me do it in a way that scales and performs despite high visitor numbers. A WYSIWYG editor, for example, is certainly a great thing. But in a professional enterprise environment, I want a fixed layout grid in which the editor can move freely. And I need to be able to change these layouts and graphical specifications for the entire project in one go, without having to touch each page individually.

This is where the advantages of Frontastic come into play: The design options available to the editor can be precisely defined in advance. Basically, however — and this is very important to us — the editor can do their daily work very easily without training and above all without programming and without the help of a developer. And we not only offer a real enterprise product in the direction of the frontend builder. We also offer practically everything you need in this environment in terms of flexibility.

That’s Frontastic, the Composable Frontend Platform, in a nutshell!

Frontend delivery

For customers

  • React for all modern browsers and web-enabled devices (TV, display, and so on)
  • Progressive Web Application for a great user experience (app feeling) and optimized for performance
  • Fewer bounces and higher conversion rates due to extremely fast loading times
  • Powerful, semantic search integrated
  • Fast images in best quality by integrated CDN
  • Hosting and operation of the complete platform 24/7
  • Highly scalable, fail-safe

Frontastic studio

For business users

  • Easy-to-use, enterprise ready user interface
  • Build pages, update content, configure data sources, and publish — all without code or help from developers
  • Frontastic components as content building blocks
  • Live preview on real devices
  • Manage any page type in multiple languages, from category pages to landing pages, search, checkout, and more
  • Publish with 1 click or schedule for later
  • Create templates to avoid repetitive tasks and ensure consistency
  • Add redirects, control the URL structure, and optimize SEOList Title

Developer tooling

For developers

  • Comprehensive React library for creating Frontastic components
  • Ready-to-use Frontastic sandbox and CLI
  • GitHub repository
  • Continuous Integration
  • Ready-to-use workflow with development, staging, and production environment
  • Ready-to-use integrations to commercetools, Contentful, Adyen, and more
  • Ready to be extended so you can connect to any headless service, including commerce, content, search, and other APIs
  • Hosting and operation of the complete platform 24/7
  • Highly scalable, fail-safe

Stay in the loop

Subscribe to our newsletter to keep up-to-date on all the latest Frontastic news.

Related

How to transform digital experiences through experimentation

Just because websites are online storefronts does not mean you should ignore improving your user’s experience. If anything, that fact alone should encourage you to offer up-to-date website experiences. This blog post explains why brands need to experiment when developing digital experiences.
Read more

Frontastic architecture: Frontend delivery

,
In our architecture blog series, we'll look at each part of the Frontastic architecture, how it works, and what you can do with it. In this post, we'll focus on frontend delivery with Frontastic.
Read more
MACH Alliance Logo