Podcast: Frontend-as-a-Service in a Composable Technology Stack

Listen to Cloudinary and Front-Commerce talk about why e-commerce platforms are being broken apart to integrate a Frontend-as-a-Service

Front-Commerce were recently invited by Cloudinary to talk during an episode of their podcast: MX Matters. We explain in detail how a frontend-as-a-service is used to build, test, and distribute engaging front-end experiences faster, with less risk, and more cost-effectively for the brand.

Listen to the replay of this episode on youtube (below), or via another channel here.

The main topics

1. What is Frontend-as-a-Service?
2. How FEaaS Connects to MACH and Composable Architecture
3. When to Switch to a Front End as a Service
4. Who can benefit from a Front End as a Service (FESaaS)?
5. How FESaaS Can Enhance Website Performance
6. The Role of Content Delivery Networks with a FESaaS Solution
7. Emerging Trends in the FESaaS Space

Listen to the podcast ↓

Read the podcast content

Browse the main points of the podcast in writing below ↓

Why are platforms that may have been SaaS or PaaS being broken apart as FEaaS (or even BEaaS)?

• The increasing importance of user experience, and the complexity of consumer demands, have led to a growing demand for specialized services to allow a retailer to respond as quickly as possible – the front-end being one of them.
• The future of e-commerce is composable, and each composable commerce project needs a frontend. There are 3 main solutions available: headless-monolith frontend (like PWA Studio for Adobe, Frontastic for CommerceTools, Mobify for SalesForce Cloud Commerce, …), custom development (DIY) (which is expensive and has low maintainability) or frontend-as-a-service, where the technology is outsourced, but the e-commerce stays in control of its storefront. This is the most flexible option, with the best time to market, and a high level of personalization.
• Implementing a platform made up of modular components allows for greater flexibility and customization. Developers can choose specific front-end services they require, rather than being tied to a packaged platform. This approach enables developers to mix and match services from different providers and build solutions tailored to their unique requirements.
• Also, in terms of lifecycle, the return is good: a frontend must outgrow business specific services or platforms to allow for a replatforming. With a FEaaS, there is no need to redo your entire frontend 2, 3, 4 or more years later because the technology is out of date. An FEaaS is a product, or solution, that’s updated and maintained throughout its lifetime so a retailer can evolve its storefront without redoing the front-end of their platform as technology evolves and changes.
• Scalability & performance: decoupling makes it easier to scale and handle varying loads more efficiently. FEaaS can be deployed using different strategies to BEaaS because they have different constraints. FEaaS must handle traffic peaks, and is closer to the user.
• Developer productivity and interest: usually FEaaS use modern stacks that are more adapted for frontend developers, versus a legacy stack in monoliths. It allows to attract talent and build teams around the user experience, without requirements in terms of backend technology knowledge. Decoupling also allows the use of ready-to-use tools, libraries, and development environments which can accelerate front-end development and reduce the time and effort required to build user interfaces. And generally cater to developer needs.

What types of websites or projects would benefit from a FEaaS solution?

• At Front-Commerce we see brands that initially plan to replatform their entire e-commerce stack — which would be a big investment in terms of time and cost (12-20 months).  So we encourage them to take a first step in that direction (with a faster time to market) by changing the frontend of their monolith e-commerce platform, and implement Front-Commerce (a FEaaS) in front of it. This allows to improve the user experience and scalability right away, with a layer of abstraction that allows iterative changes afterwards.
• 2 kind of customers can benefit from FEaaS
  • Small to medium businesses that want to go headless first and benefit from decoupling their frontend and backend with efficiency, in order to innovate faster using a best-of-breed approach.
  • Medium to large businesses that want to adopt a composable architecture with serenity and ROI in mind: the user experience is a key factor, and separating it from other information system choice is an important step in that direction. One interesting business case is B2B customers with a heterogeneous platform (several backend solutions: ecom, CMS, search, ERP, …) who want to make the customer experience homogeneous and then iterate on UX and backend replatformings.
• Finally, customers with multiple brands with heterogeneous backends or regional constraints and specificities can also benefit from this architecture: they’ll share most of their front-end effort while being able to cope with each constraint seamlessly.

Is Front-End-as-a-Service happening because of the move to composable architecture?

• Yes absolutely. Brands are more mature than ever in terms of embracing digital transformation and creating online experiences for their customers. Especially in recent years with the rise of mobile and omnichannel behavior. Which is where headless and composable architectures started to become increasingly relevant. Even retailers that have only a headless architecture in place (where the back is separate from the front ) find real ROI with the adoption of FEaaS.
• It is now more important than ever to have a maintainable solution that evolves over time. Innovations in web & frontend technology over the last 10 years or so have also influenced the move to FEaaS. A different pace is needed in order for merchants to embrace new web standards and new devices or browsers, both in technical terms and in terms of usage, as each device becomes a new sales channel.

What are some aspects of a website or app that can be optimized through a FESaaS solution?

• Web performance: Bounce Rate, Fast/Speed, More Images/More Videos can be integrated without risking page loading times.
• And as a direct knock on effect of the improvements in user experience and web performance, a retailer will quickly see improvements to their KPIs such as: conversion rate, brand engagement, organic traffic.
• But also time to market: a FEaaS comes with ready-to use frontend experiences. It could be boilerplates or a complete product. We provide complete connectors covering all native features of a platform (e.g: Adobe Commerce), regular updates and unlimited support to the dev team to help with customization and extensibility.
• Finally, maintenance over time: frontend technologies are evolving fast and devices can do more and more. Embedding latest devices features in a frontend experience can be done faster over time and benefit from regular updates to cope with how users are browsing the web (today via mobile, but maybe tomorrow from an AI powered tool).

What types of programs would be used in a FESaaS solution?

• CMS (Contentful, Sanity, Storyblok, Prismic, etc.)
  • To create dynamic, rich content that’s displayable across different devices and channels, in real time that touches the consumer on an emotional level .. A marketer’s dream. And it’s possible, with technologies like FEaaS
• An API orchestration layer like GraphQL
• E-Commerce platform backend such as Magento, BigCommerce or Commercetools, etc.
• Search & Personalization tools like Algolia
• Hosting (CDN – Globally distributed servers for static assets or media, serverless at edge etc.)

How can a FESaaS solution benefit your image/video management and/or delivery?

• For a performant experience, image & video are key elements: Frontend-as-a-Service takes this topic seriously as it is part of their core responsibility
  • shoppers browse from different devices (size, technology)
  • shoppers browse from different contexts (network)
  • … each combination means a different strategy and different image/video served (technically)
  • FEaaS solutions allows to serve the best possible media without affecting contributor’s and merchant experience in their CMS
• Delivering image/videos in a performant way is harder than it looks, and it can be hard for developers to implement this in a project. FEaaS can make it simpler and handle the following burden for teams.
  • Integration with a CDN
  • Responsive images
  • Optimization in terms of storage and organisation
  • Using best-of-breed platforms for delivering the most optimized image/video to users depending on their location, device and network

What are the advantages of a Frontend-as-a-Service Solution for developers?

• The most important advantage to me as a developer is that FEaaS allows developers to focus on their added value: building custom features. Not reinventing the wheel or wasting time on low-level and repetitive tasks.
• A FEaaS solution contains pre-built modules so you don’t have to develop them from scratch. In commerce for instance, it allows a developer to focus on the user journey and experience to match the way merchants interact with their customers… not technical constraints like what should happen when users add a product to their cart.
• Maintenance over time: we believe that projects must outlast technologies. Of course, having different lifecycles between frontend experiences and backend services is important for reasons we’ve mentioned before. But in frontend development, lots of examples or existing solutions only are boilerplates. They’re great for starting with a BEaaS, but people don’t consider the cost of maintaining this stack for the next years. It often leads to a complete rewrite after a few years… this seems counterproductive with going composable! A FEaaS will provide updates, and allow teams to upgrade without rewriting a project every few months. At Front-Commerce, this is one of our core value propositions!
• Another key element is that FEaaS allows a developer to use frontend technologies matching the latest best practices in the industry! Developers can leverage tools adapted to what they do, and benefit from a better Developer Experience. Side note: with AI, we’ve seen radical changes over the past few months in the way developers build projects: DX is about to be redefined!

What are the caveats of FESaaS ?

• The market has not yet reached maturity, so knowledge of these kind of solutions is limited today.
• Implementation of a frontend that’s agnostic of the backend, can take as little as 12 weeks. This of course depends on the project scope. And whilst there is a certain level of cost involved, ROI is quick, and longterm, balancing it out.
• Composable commerce needs a certain level of maturity and organisation within a company. The retailer’s team needs to be able to understand which component has which role in the platform to be able to maintain correct functionality & analyse. We, at Front-Commerce, are working on that by offering observability tools to manage the complete platform more easily.
• Depending on your chosen platform there can be too many necessary customizations, code to understand, or to write almost everything yourself… or not enough extensivity.
• Working with a frontend solution also implies that teams need to have a good understanding of each service’s responsibility and the flow of data between them. The global picture often requires dealing with different stakeholders (integrators, internal teams etc…).

Would you like to know more about implementing a Front-end-as-a-service solution?

Here are some options:

• This page is a good snapshot
• Interested ? Use Laurent’s calendar to find a moment to talk.
• Or read our article on front-end first migration