Frontastic architecture: Frontend delivery

Frontastic is made up of 4 parts: the API hub, developer tooling, the Frontastic studio, and frontend delivery. Each gives you all the tools you need to build amazing commerce sites.

In this blog series, we’ll look at each part of the architecture, how it works, and what you can do with it.

In this article, we’ll be looking at frontend delivery.

What’s frontend delivery?

Frontend delivery is how your commerce site becomes available on a website. It takes all the code and data and serves it when a customer comes to your URL. In the days of monoliths, it was quite straightforward as only 1 data source was used. But with microservices, it gets a little more complicated as all the data sources being used need to be combined, optimized, and delivered to your customers all at the same time.

Frontend delivery with Frontastic

Frontastic provides all the parts of frontend delivery for your commerce site. Let’s break it down:

PWA

Frontastic delivers your commerce site as a Progressive Web App (PWA). It gives your customers an app-like experience, even on desktop. A PWA is optimized for performance which is key for all sites to increase sales, customer satisfaction, and improve SEO.

Server Sider Rendering (SSR)

To provide your customers with a great experience, smooth delivery and fast performance are key. With SSR, you get both of those things, plus an SEO-friendly site.

We’re also continuously optimizing build processes and splitting data for frontend assets to ensure our customers have high-performing sites.

Hosting and DevOps

Frontastic takes care of all hosting and DevOps. We also take care of auto-scaling server usage when your commerce site suddenly receives a lot of visitors, so they don’t have any issues accessing your site. We also ensure the safety and security of your commerce site. We’re ISO certified, so you can be sure that our processes are of the highest standard.

To reduce repetitive and time-consuming tasks, we’ve set up reliable automation processes. For example, building and compiling assets for browsers from source files or making new components for extending your platform available automatically on the staging systems. Building the functionalities to handle these everyday operational challenges is a specialty in itself and requires a lot of time and resources to solve. But with Frontastic, we do this for you.

And every time you release a new software version, we ensure that there won’t be any downtime of your live site. Plus, you can roll back to an earlier version with the click of a button.

Logging and monitoring

With your product and content data coming from external providers, this data will be unavailable at some point. Your commerce site has to be able to handle this in a resilient and user-friendly way. And you’ll need to have monitoring and alerts in place to discover these issues before your customers do, or you’ll risk losing sales and decreasing brand loyalty. Frontastic provides constant logging and monitoring to measure application performance or third-party API outages to ensure this doesn’t happen on your site.

Server-administration

All the software on each developer machine needs to be in sync to ensure everyone is working on the same thing. Plus, you need to make sure your production and staging systems run on the same software versions as everything in your stack, or you’ll find bugs at every turn. With Frontastic, you get all that as standard, and you can develop your site without worrying about synchronization. Frontastic also ensures security updates are applied without you even noticing it, the network is secured, and the servers are scaled according to the current traffic.

Conclusion

But what’s great about Frontastic is that it’s always extendible. You can add your own tracking, your own monitoring, and whatever else you want. But be careful. The performance of your site will always be up to how you’ve written the code and how much (our Measuring PWA performance article goes into more detail on this topic).

If you’re interested in finding out more about our architecture, see our documentation at docs.frontastic.cloud.