Top 5 Frontend as a Service Platforms for Ecommerce Brands
The past several years have seen an increasing number of Frontend as a Service (FEaaS) platforms enter the market. FEaaS platforms provide ecommerce brands with cloud-hosted frontend solutions to support a “headless” tech stack.
Headless refers to the decoupling of the frontend user interface from the backend commerce logic. Instead of relying on the native online storefront made available by popular ecommerce platforms such as Shopify and BigCommerce, brands can deploy their own frontend technology.
Creating custom storefronts, however, presents ecommerce brands with several challenges. These challenges include now being responsible for building and maintaining their frontend solution, as well as spending resources on managing deployment and hosting.
FEaaS solutions, on the other hand, give brands the ability to create custom storefronts without the challenges associated with going headless. In this article, we’ll cover the following:
What is Frontend as a Service?
A FEaaS platform is a cloud-hosted solution that allows brands to create custom frontend experiences. It provides you with deployment and hosting options, customizable UI components, middleware to handle your API queries, native integrations with third-party services, and more.
In the past 5 years, several FEaaS solutions have entered the market. Gartner, in their paper on Composable Commerce, predicts that brands will increasingly rely on FEaaS solutions to deliver highly performant customer experiences.
FEaaS solutions are a relatively new service designed to assist brands seeking to go headless. Headless is one aspect of a new approach to architecting a technology stack, often referred to as MACH architecture.
MACH is an acronym that stands for microservices (M), API-first (A), cloud-native (C), and headless (H). As opposed to monolithic platforms, where various features and functionality to manage your ecommerce business needs are tightly coupled to a single platform, MACH architecture relies on a network of decentralized cloud-hosted services that rely on API’s to exchange data.
This new architectural pattern makes it possible for your brand to adopt best-of-breed solutions, rather than make do with the solution that comes coupled with your ecommerce platform. By going headless with BigCommerce or Shopify, for example, your brand can now select a headless Content Management System or Product Information Management solution that’s best suited for your business and technology needs.
By decoupling your online storefront from the backend logic, your brand can also adopt a cloud-hosted FEaaS solution to power your customer experience.
The benefits of FEaaS
Ecommerce brands that decide to go headless have a number of options to choose from when selecting a frontend technology. Many larger brands that have extensive developer resources and need to build highly customized experiences have decided to adopt popular JavaScript frameworks such as Next.js, Gatsby, or Nuxt.js
These frontend frameworks are built with the latest JavaScript technologies, such as React and Vue, and give brands the ability to take full advantage of everything headless offers, from better SEO and UX to the ability to create omni-channel experiences.
There are several downsides to these frameworks, however, which have created a market for FEaaS. In this section, we talk about the advantages of selecting a FEaaS and why, for certain brands, it is a better choice than adopting a popular JavaScript framework.
Increased developer productivity
When creating a custom frontend with a popular JavaScript framework like Next.js or Gatsby, your developers will need to create everything from scratch. For example, they will need to create UI components for your storefront, which will need to include everything from buttons and image galleries to product cards and input fields.
Your development teams will also be responsible for managing hosting and upgrading your framework, as well as potentially build a separate API layer to handle all data requests made from the frontend.
A FEaaS platform, on the other hand, can help your developer teams get a jump start on building out your frontend by providing them with customizable UI components and middleware to handle API queries.
The features and functionality provided by FEaaS will not only make your teams more productive, but will also allow you to spend less resources on deployment and hosting as that will also be taken care of by the FEaaS provider.
In short, adopting a FEaaS solution instead of a popular JavaScript framework will free up your teams to focus on innovation instead of the upfront and ongoing work required when adopting a popular JavaScript framework.
Reduced time to market
Compared to a popular JavaScript framework, a FEaaS solution allows your brand to launch new features and functionality more quickly given the increased levels of developer productivity.
Your developers can spend more time on innovation and less time creating UI components, hosting, and deployment. This results in getting new features to market quicker and ultimately results in a greater competitive advantage for the brand.
Go headless at a fraction of the cost
Given that a FEaaS solution makes your developers more productive, your teams can launch and maintain your headless storefront at a fraction of the cost. Your developers have a starter template so they don’t have to start from scratch.
They also have access to UI components, middleware, as well as deployment and hosting options. You can spend less resources on the developers necessary to launch and maintain your frontend.
How to evaluate FEaaS platforms
The FEaaS solutions on the market currently have a variety of features and functionality. As a result, it’s important to understand how to evaluate current FEaaS solutions. In this section, we identify 8 criteria you should consider in a FEaaS solution.
Technology stack
When evaluating a FEaaS solution, it’s important to consider what frontend technology the service is using. It is using a popular JavaScript library such as React or Vue? Is the software built on Next.js, which is built on top of React, or Nuxt.js, which is built with Vue? Or is it a custom frontend framework?
Depending on the answer, you’ll need to make sure you have the developer support to manage those libraries. Some JavaScript libraries, such as React, have a large developer community, making it easier (and potentially less expensive) to find developers to hire.
Platform openness
Whether the FEaaS platform is open or closed source is important to understanding how much customization is possible. If the product is open sourced, it means your developers have complete access to the code base and can customize the software to suit your particular business and technology needs.
If the software is closed source, your development teams will be restricted in what they are capable of building. There are advantages to purchasing a closed source technology, however. The solution provider, for example, bears the burden of managing security or troubleshooting problems rather than the brand.
Rendering implementations
When you evaluate FEaaS software, you should consider the type of rendering implementation as it can have an impact on SEO and the customer experience. There are three types of rendering implementations: static-site generation, client-side rendering, and server-side rendering.
With server-side rendering, your storefront’s HTML is generated on each page request and sent to the customer’s browser.
With static site generation, all of your storefront’s pages are pre-built and cached on a Content Delivery Network. This method of rendering usually allows for a blazingly fast page loading speeds.
And with client-side rendering, your storefront’s HTML is rendering in the client’s browser, which can have negative implications for SEO and the overall user experience.
User experience
FEaaS solutions should streamline the ability of your developers to create frontend experiences for your customers. They should ideally make available customizable UI components that your developers use to suit the needs of your business and users.
The solution should come with a design system, which is a collection of UI components that you can use like Lego blocks to build any experience you need. A starter template with default UI components can also be a valuable starting point for your developers.
Both can make building frontend experiences more faster than creating them from scratch, allowing for much faster time to market.
Page builders
Page builders allow your content and marketing teams to update content and launch marketing campaigns without having to rely on your developers. Monolithic ecommerce platforms, such as Shopify and BigCommerce, include page builders for your teams.
One of the challenges of going headless with a popular JavaScript framework is that your content and marketing teams will no longer have access to a page builder and will need to rely more on your developers to publish content and launch landing pages.
Your development team can mitigate this dependency by integrating a headless CMS, such as Contentful or Sanity. Several of the top FEaaS solutions, however, also solve this pain point by making available easy-to-use page builders that replicate the functionality of a monolithic ecommerce platform.
Integrations
A critical area to evaluate are the out-of-the-box integrations available with a particular FEaaS solution. An open source solution can be customized to integrate with any third-party vendor, but it can be a different matter with closed source software.
Several closed-source FEaaS solutions limit the number of ecommerce platforms that can be integrated into their software. Instant Commerce, for example, only allows integration with a Shopify backend. If you’re using any other commerce layer, Instant Commerce will definitely not make it onto your short list of FEaaS vendors.
Support & documentation
It’s important to evaluate a FEaaS solution’s documentation and ability to provide developer support, especially if the solution requires a heavy dependency on developers to implement and maintain.
Is the documentation easy to navigate, and does it clearly explain how to set up and maintain the software? Are there channels through which your developers can get their questions answered if they run into any issues?
How good is customer support, and is there a Slack channel where they can get their questions answered?
API orchestration layer
With a headless architecture, the frontend needs to request data from multiple cloud-hosted services, which could include a headless CMS, a PIM, and a commerce engine, just to name a few.
Rather than making all these requests directly from the frontend, it’s considered best practice to mediate those requests through a separate API layer. This orchestration layer relays the request from the frontend and sends it to the appropriate services, receives the request, formats the data, and relays it back to the frontend.
When evaluating a FEaaS, it’s important to consider whether an API orchestration layer is included and how it is architected.
Employing this layer ensures that any updates to the service APIs don’t require changes to the frontend. It’s also an additional layer of security in that the customer’s browser does not need to store any sensitive information required to access any APIs.
Top FEaaS platforms for ecommerce brands
As FEaaS is still a relatively new industry, even the established players have only been servicing this category for a few years. Others are up and coming start-ups that are releasing novel features and functionality that hope to transform this space.
In this section, we review the top 5 FEaaS solutions on the market for ecommerce brands. Based on our own review of these products, as well reviewing their documentation, we address each of the following:
Technology stack
Platform openness
Rendering implementation
User experience
Page builders
Integrations and API orchestration layer
Support & documentation
Shogun Frontend
Shogun Frontend is one the dominant brands in the FEaaS space. Their first product was a page builder for the Shopify app marketplace. In 2019, they released an ecommerce frontend that has quickly become the market leader in the industry.
Shogun’s frontend is built on the popular JavaScript library, Next.js, which is built on top of React. Our review of Shogun’s documentation suggests that Shogun relies on static site generation to build and deploy storefronts to Fastly, a content delivery network that hosts brands such as Buzzfeed and the New York Times.
Shogun makes available UI components as part of a mobile responsive design system. Your developers can customize these UI components directly in the admin interface or via a local development environment.
Pros
React is currently the most popular JavaScript library and Next.js is the most popular framework built on top of React. As a result, finding developers to work on your storefront will be relatively easier than if you had to recruit them to work on another frontend technology.
Shogun provides technical support 7 days a week and a Slack community for developers. These two channels allow your developers to get answers to any technical questions they might have.
The product also provides content and marketing teams an easy-to-use page builder to publish content and launch landing pages without the need to burden your development team.
Cons
As a closed source solution, customizations to the platform are not available. This makes brands dependent on the native integrations made available by Shogun. Shogun Frontend can currently only be integrated with Shopify and BigCommerce. Shogun plans on releasing an integration with Magento (Adobe Commerce) in the near future.
Some customers have complained that the build time is long, which Shogun has mentioned it is working to address.
Vue Storefront
Vue Storefront is a popular FEaaS platform built on the Nuxt.js framework, which in turn is based off of the Vue JavaScript library. It is currently the only open-source solution on the market, which gives your developers the ability to customize the platform to suit your business and technology needs.
Vue Storefront supports server side rendering out-of-the-box and relies on Google Cloud for hosting.
Vue Storefront comes with a highly customizable design system and set of UI components so your developers can get up and running to build your online storefront. Vue Storefront is designed to be mobile-first and includes over 50 UI components.
A great feature of this FEaaS solution is the API orchestration layer, which natively supports integration with several of the leading ecommerce platforms, headless CMSs, and other technology solutions.
Pros
Vue Storefront’s documentation is thorough and easily navigable. They also provide online workshops where your teams are guided by trainers on how to build custom integrations, extend the API middleware, and many more topics. There is even a community chat available on Discord for your developers if they have any questions.
Vue Storefront includes native integrations with Shopify, BigCommerce, and Commercetools, among several others.
Your business is not locked into the integrations that Vue Storefront makes available. Vue Storefront is highly customizable given its open source status. If there is an integration you need to support, your developers can build it.
Cons
There is no page builder included with Vue Storefront. You’ll need to integrate a headless CMS into the platform in order to ensure your content and marketing teams aren’t dependent on your development team to update content and launch landing pages.
While open source software can allow for a high degree of customizability, there are clear drawbacks to it. The main drawback is that open source software generally requires the greater allocation of developer resources to maintain.
Instant Commerce
Instant Commerce is an Amsterdam-based company that launched in 2022. They are unique in the FEaaS market as they offer a no-code solution for companies that want to adopt a decoupled architecture but don’t necessarily have the extensive developer resources to support such a tech stack.
The solution currently only supports integration with Shopify as the commerce backend and Storyblok as the headless CMS. While Instant Commerce pulls in all your product data so it can be managed within the Instant Commerce admin area, your content and assets are managed by Storyblok.
As a no-code solution, web pages are assembled by arranging “blocks” in an intuitive, easy-to-use page builder. While your marketing team can create new experiences with Instant Commerce’s page builder, your development team can still make limited customizations by editing the code for each block.
Any customizations can be made using React, and the Instant Commerce frontend that is generated is also a React application.
Pros
A great solution for small to medium-sized businesses as you don’t need to devote extensive developer resources to decouple your frontend from your backend. Instant Commerce allows your brand to mirror the same internal organizational process as a small business would if they were using the native Shopify or BigCommerce page builder to manage their online storefront.
Includes great documentation to help you integrate Shopify and Storyblok with Instant Commerce. The documentation provides detailed information on the basic concepts and structure around how to set up your online storefront.
Despite recently launching in 2022, they currently have 8 agency partners at the time of this article’s publication to help you get up and running with Instant Commerce.
Cons
Instant Commerce only supports integrations with Shopify and Storyblock customers. It’s not clear if they eventually plan on supporting integration with other ecommerce platforms and headless CMSs.
A no-code solution limits the ability for customization. As in an earlier, they can be sufficient for smaller businesses that want to take advantage of MACH architecture but have limited developer resources. But for larger companies that desire a greater level of customization, they will likely find Instant Commerce’s no-code solution to be inadequate for their business and technology needs.
Front-Commerce
Front-Commerce is a relative newcomer to the FEaaS market but their offering offers a novel approach to companies that want to decouple their front and backends. They offer ecommerce brands a custom React application that supports server side rendering. The application can be self-hosted or hosted with Front-Commerce’s cloud solution, which is powered by Google Cloud.
For those familiar with creating child themes with WordPress or any other application, customizing Front-Commerce’s React application works in a similar way. Front-Commerce comes with a starter application that includes a set of customizable, mobile responsive UI components.
One area where Front-Commerce really shines is in its API layer, which is architected with GraphQL. GraphQL is a query language that is optimized for performance. Front-Commerce’s unique API layer ensures that any changes to your third-party APIs won’t require additional development work on your frontend.
Front-Commerce also supports native integrations with several ecommerce platforms, such as BigCommerce, Oro, and Magento. Integrations with Shopify and Commercetools are forthcoming. It also supports out-of-the-box integrations with headless CMSs, Payment providers, and other technology solutions.
Pros
Even though Front-Commerce is a closed source solution, you have access to the application’s code base once you purchase a license. With the creation of a child theme, your teams have the ability to customize the application to suit your specific business and technology needs.
Front-Commerce provides 5 days of training for your developers to learn the best practices of using their React application. They make available a Slack community for your developers as well provide extensive, easy-to-understand documentation.
Cons
There is no native page builder so you’ll need to integrate a headless CMS if you want to give your content and marketing teams the autonomy to publish and edit content.
Requires extensive developer resources as your development team will have to learn how you use and customize Front-Commerce’s React application.
Commercetools Frontend (formerly Frontastic)
Frontastic launched in 2017 as a FEaaS solution and was acquired by Commercetools in 2021. Rebranded as Commercetools Frontend, the FEaaS is built on React and Next.js, supports server-side rendering, and offers deployment and hosting services through Netlify.
Commercetools Frontend comes with over 30 highly customizable, mobile responsive UI components for your developers. Business users have access to a page builder experience where they can create new pages and update content.
The platform currently natively supports a wide range of ecommerce platforms, such as Shopify, Commercetools, and Spryker. It also supports out-of-the-box several of the most popular headless CMSs while also giving you the ability to create custom integrations to any third-party service.
The platform makes available an API hub to mediate API requests from the frontend to any third-party services. While Commercetools Frontend supports native CMS functionality, it’s pretty bare bones. You’ll likely want to integrate a headless CMS to manage your content, which may make having native page builder a bit redundant.
Pros
With Commercetools Frontend built on React and Next.js, you’ll have no problem finding developers to recruit and hire who can work on your frontend, as these technologies enjoy widespread popularity.
Cons
Given the recent acquisition by Commercetools, much of the product roadmap is unclear. One area of concern is whether Commercetools will continue to allow its frontend to integrate with other ecommerce platforms. It’s not clear as of the date of this article what decision Commercetools has made.
It’s also not clear what level of support exists for your development teams. Will Commercetools wrap up support for its FEaaS platform with its general support offering? You’ll need to contact Commercetools’ sales team to learn more about their frontend support.
Bottom line
Frontend as a Service solutions are an emerging market in the headless commerce space. Several companies offer solutions that appeal to brands ranging from small and medium-size businesses to larger enterprise companies.
Ultimately the choice your brand makes on a FEaaS solution depends on your own unique technology needs. If you need a high level of customization and several different types of integrations, a solution like Front-Commerce or Vue Storefront will appeal to you.
On the other hand, if you’re a Shopify customer and don’t have extensive developer resources at your disposal, Instant Commerce may be a good choice for you.
As more companies embrace headless, many brands will decide that maintaining and hosting their own custom frontend is not worth the additional resources when a cloud-hosted FEaaS solution is available. The FEaaS space will be an exciting market to follow in the coming years.
