Vue Storefront: A bodiless frontend platform

Headless Commerce is a hot topic these days. However, while the most recognized eCommerce companies focus on building backend infrastructure within this approach, Vue Storefront exclusively runs the frontend. As such, the term “bodiless frontend” - even though we’ve just coined it - seems natural by analogy to headless backend.

"Body" is a backend (or eCommerce platform as we also call it), such as - for example - commercetools and “head” is a frontend. Of course, within composable commerce, there are many other services to the side and in between backend and frontend, but - in general - this is how the decoupled architecture looks like.

However, you may still wonder why to come up with a brand new definition of "bodiless" frontend, while Headless Commerce itself keeps struggling to get the proper recognition. And it is a legit question. Let’s hear the explanation, though.

Vue Storefront’s origins lay back when Headless Commerce was in its infancy. Of course, some companies have already implemented “decoupled architecture.” However, as the trend was still waiting for its wave, Vue Storefront's team didn’t bother with the proper naming. As it all began as a bottom-up initiative of few frontend developers who just wanted to ease their work, they focus on the product. The brand issues simply weren't at the top of their agenda.

What started as a side-project dedicated to developers eventually grew into a separate company, and that was when the lack of proper business naming became a problem. There was a need to explain the value to business people, and after a few months during which Vue we called themselves a "headless frontend" (yeah, it makes zero sense), it hit us how simple it is. 


Vue Storefront is the bodiless frontend. We are the walking head.
Patrick Friday
CEO at Vue Storefront
Vue Storefront Board Members
Y Combinator-backed Vue Storefront aims to be the ‘glue’ for e-commerce
Read more at TechCrunch

Bodiless Frontend Platform within Composable Commerce

As a bodiless frontend, Vue Storefront fits in the Composable Commerce trend, allowing companies to try what is the best without licensing restrictions from a single provider. Within this approach, the system is building around "packaged business capability," which is a bit broader term than microservices, but - similar to them - they rely on separated units.

With a decoupled frontend, the merchants can deliver personalized content, as adding Headless CMS is not a problem. They can also add a variety of external tools such as loyalty programs or advanced search engines and connect as many different payment gateways as is required on chosen market. All of these services are connected via API.‍

The Composable Commerce approach, besides bringing evident advantages to merchants, also benefits tech vendors. They can laser focus on mastering one particular niche instead of pretending to be good at everything, which is a founding idea of MACH Alliance (which we are also a member).

What benefits can you expect with a bodiless frontend?

The idea of separating concerns, in general, was brought to life by giants such as Netflix, Amazon, Uber, and others years ago. They've all made significant shifts from all-in-one solutions to microservices because they realized that sticking with the applications they started with was putting their growth at risk. It is difficult to add new features and scale the business within monolithic apps, so companies with global ambitions had to find a way to "get ahead of themselves." Decoupled units enable developers to work on the frontend without looking over the shoulder on maintaining the backend, which significantly accelerates business growth.

Now, it is about specializations and customization.

By focusing on mastering one service and delivering it with a robust API, tech vendors secure the merchants' customizability, giving them the freedom to tailor-make their final eCommerce systems.

Retailers can cherry-pick the best-of-breed services available on the market and connect them in a LEGO-like way.


Headless backend matched with bodiless frontend is the foundation that opens up limitless possibilities and brings a variety of default benefits such as:


Flexibility


As we mentioned above, within a decoupled architecture, there is no imposing any particular solution. eCommerce systems can be built from services provided by different vendors and written in other technologies, as long as they are delivered with a robust API. API placed in the center of interest makes merchants sure that their systems will be future-proof as adding (as well as removing) particular services will always be more straightforward than revamping the entire system.

Additionally, the flexibility in choosing the technology allows using the latest frameworks, which is a great value for developers.


Ligtning-fast performance

70% of consumers admit that page speed affects their willingness to buy from an online retailer.

Bodiless frontend platforms, such as Vue Storefront, typically focuses strongly on performance as it is a crucial aspect that the frontend can take care of properly. 


Bodiless Frontend Platform within Composable Commerce

As a bodiless frontend, Vue Storefront fits in the Composable Commerce trend, allowing companies to try what is the best without licensing restrictions from a single provider. Within this approach, the system is building around "packaged business capability," which is a bit broader term than microservices, but - similar to them - they rely on separated units.

With a decoupled frontend, the merchants can deliver personalized content, as adding Headless CMS is not a problem. They can also add a variety of external tools such as loyalty programs or advanced search engines and connect as many different payment gateways as is required on chosen market. All of these services are connected via API.‍

The Composable Commerce approach, besides bringing evident advantages to merchants, also benefits tech vendors. They can laser focus on mastering one particular niche instead of pretending to be good at everything, which is a founding idea of MACH Alliance (which we are also a member).

What benefits can you expect with a bodiless frontend?

The idea of separating concerns, in general, was brought to life by giants such as Netflix, Amazon, Uber, and others years ago. They've all made significant shifts from all-in-one solutions to microservices because they realized that sticking with the applications they started with was putting their growth at risk. It is difficult to add new features and scale the business within monolithic apps, so companies with global ambitions had to find a way to "get ahead of themselves." Decoupled units enable developers to work on the frontend without looking over the shoulder on maintaining the backend, which significantly accelerates business growth.

Now, it is about specializations and customization.

By focusing on mastering one service and delivering it with a robust API, tech vendors secure the merchants' customizability, giving them the freedom to tailor-make their final eCommerce systems.

Retailers can cherry-pick the best-of-breed services available on the market and connect them in a LEGO-like way.


Headless backend matched with bodiless frontend is the foundation that opens up limitless possibilities and brings a variety of default benefits such as:


Flexibility


As we mentioned above, within a decoupled architecture, there is no imposing any particular solution. eCommerce systems can be built from services provided by different vendors and written in other technologies, as long as they are delivered with a robust API. API placed in the center of interest makes merchants sure that their systems will be future-proof as adding (as well as removing) particular services will always be more straightforward than revamping the entire system.

Additionally, the flexibility in choosing the technology allows using the latest frameworks, which is a great value for developers.


Ligtning-fast performance

70% of consumers admit that page speed affects their willingness to buy from an online retailer.

Bodiless frontend platforms, such as Vue Storefront, typically focuses strongly on performance as it is a crucial aspect that the frontend can take care of properly. 


Vue Storefront has numerous features ready for this update: SSR, performance optimization and PWA. Individually, none of them can be seen as a remedy for SEO-related challenges, but they can help face them together.
Filip Sobol
Core Developer at Vue Storefront
Love Crafts
Love Crafts

Embracing complicated business logic with headless commerce

Fast time-to-market


Thanks to separating the visual layer from the backend, development can go independently without synchronizing these two parts constantly. Moreover, if an error occurs, you don't have to conduct comprehensive testing processes. This way speeds up the work considerably and shortens the time to market.


Additionally, when you decide to go with a bodiless frontend platform such as Vue Storefront, merchants are provided with numerous features out-of-the-box, which significantly cuts the amount of developers' work.


Complete control over the buyer journey


In recent years, consumers are demanding an increasingly unique and tailored shopping experience across the channels they use. As the buyer journey encompasses more and more touchpoints (e.g., email, social media, the Internet of Things, etc.), it becomes increasingly challenging to create a consistent and quality path.

The bodiless frontend connected with Headless CMS opens up a way to omnichannel sales. It enables merchants to embrace the entire, highly complex buyer's journey and provide a consistent commerce experience regardless of where and when the customer interacts with the brand. 


Alignment with branding


Bodiless frontend such as Vue Storefront combines the advantages of SaaS due to its OOT features with the benefits of open-source, because its UI can be freely customized and adjusted to marketing needs. 


Given that brand perception plays a considerable role in retaining customers and building loyalties among them, it should also be taken into account. 


Separating IT from the marketing team


Giving control over content delivery processes to non-technical employees, which is the main advantage of Headless CMSs that can be connected with bodiless frontend platforms, allows eCommerce businesses to keep up with the customers’ needs. 


When the content-related processes are owned by developers, who are the only people that can publish or update content sites, it is a bottleneck. Bodiless frontend spun with Headless CMS enables fluid content updates to support marketing campaigns and promotions.


Buy or build your bodiless frontend?

When planning to choose a bodiless frontend, the question arises - to build it yourself or base it on a purchased solution? What are the advantages and disadvantages of both solutions? The main advantage of building a bodiless frontend yourself is absolute freedom. Developers can integrate features according to individual requirements,  create unique themes, work on the selected - even the niche - frameworks, and are not bonded any outer limits. 

However, there are also downsides to building it yourself, and the extremely high cost is the main. Creating an advanced eCommerce frontend that will cooperate with external solutions is not a piece of cake. It is very time- and cost-consuming and requires an extended and experienced in-house team.

Ready-made frontend platforms take less time and effort to implement. They are well-tested, optimized, and maintained by a dedicated team that provides regular updates and adds new features to ensure the solution is up-to-date with the latest trends.

Of course, the developers’ freedom to choose the tech stack is limited, but -  as they don’t have to build everything from scratch - their work is speeded up.


And yes, we’ve got a “not so secret agenda” by saying this, but choosing Vue Storefront blurs this disadvantage.

Vue Storefront (besides being an API-first frontend platform) is a framework, and - like every other framework in the world - it can be considered a “skeleton” of an application. It provides specific, ready-to-use elements as well as a general pattern of usage.


We wanted to build a solution combining the advantages of SaaS, i.e., ease of use, and open-source, i.e., flexibility in customization. Typically, these two approaches are mutually exclusive, but - as we are explicitly focused on eCommerce - we could step into merchants’ shoes and predict which components can be provided by default and which ones must give space for some creativity.
Filip Rakowski
CTO at Vue Storefront

Bodiless Frontend Platform opens a limitless possibilities

To take the e-store life, merchants need a frontend and a backend, but - in most cases - these decisions are not the last that needs to be taken.

Choosing a headless backend and pairing it with a bodiless frontend makes it possible. This set opens up numerous possibilities for adding any third-party services. It doesn’t matter if they are already available on the market (in this case, we provide native integrations) or they need to be custom-made.

Thanks to API, adding any external services to the eCommerce system is possible, enabling merchants to choose their growth path (and change it whenever the need arises).

Choosing a bodiless frontend platform is a must in post-COVID eCommerce

The COVID -19 outbreak has accelerated digitization for about 3-5 years forcing merchants to look for a tech stack that can address the new customers’ expectations. As a result, more flexible MACH technology is poised to become their go-to direction.

Why? With a bodiless frontend and headless platform, content changes happen instantly. New product sites or updates to the old ones can be delivered in the blink of an eye by the content teams. In comparison, stores based on a traditional architecture sometimes need even hours before the new updates can be introduced. With headless solutions, it's a matter of seconds.

Second, Headless Commerce platforms connected with Bodiless Frontend, a set focus on API, provide developers with tools to create consistent experiences regardless of channel. Creative teams can focus on what they do best: optimizing experiences to increase customer engagement and drive revenue. Technology stops being their blocker.

Third, the flexibility of Headless platforms also allows developers to leverage its possibilities through adding external tools, such as loyalty programs or analytic tools, that benefit the business.

And - last but not least - connecting Bodiless Frontend and Headless Platform opens a gate to last-mile improvement, including the Click & Collect model, also known as BOPIS (Buy Online Pickup in Store). This one of the most known omnichannel solutions was called by eMarketer analysts a pandemic-born "phenomenon," and now merchants are seeking ways to implement it into their strategies.

Click-and-collect model gives consumers the freedom to research online, compare, order products, and pay for products online, but then pick them up in-store. It helps to overcome traditional objections to shopping online that typically exclude the possibility of examining the products before taking a final decision purchasing them. Within the Click-and-Collect model, even when the product is paid for, it can be returned right away.

The Click-and-collect model, however, has to be strongly embedded in the system to exclude all potential issues such as inventory inconsistency. With Headless Commerce adding this feature is not a problem.

As we agree - and it is a general consensus - that the vast part of pandemic behaviors will stick to some degree when it ends, the tip for the future is rather straightforward.



Explore MACH Technology

As an API-first solution, Vue Storefront is a perfect fit for any headless commerce platform.

We are part of MACH Alliance, the community of tech vendors and software providers advocating Microservices, API-First, Cloud-Native and Headless approach.

Read more in our guide
Download eBook