Headless platforms are becoming the eCommerce industry-standard as businesses are forced to acknowledge that there is no way to foresee the future and prepare for the unknown. Decoupling the backend system from the frontend layer and, in doing so, freeing it from code dependencies and resource bottlenecks is the first step in becoming "future-proof". There’s more to it, to be sure, but here is what you should take into account at the beginning of your journey. 

You should definitely assemble a “team” of services, starting from the most crucial one - the eCommerce platform. Why? It will be - without exaggeration - the heart and soul of your eCommerce business. It provides all the necessary features, without which it is difficult to even imagine a modern e-shop; it takes care of the business logic, data storage, and much more. Long story short, it is the foundation of every eCommerce business, so you must choose wisely. Switching at a later date will not be easy. 

It might not seem that difficult if we have already decided to take the headless approach. In practice, however, the “headless” term is often more a hollow marketing claim than a binding promise. The research, then, must be thorough and include technical documentation rather than sales pitch decks. The more the “headless” trend gains recognition, the more often significant vendors try to jump on the bandwagon and implement an API-first solution, which is often not scalable. These are the first speed bumps you may encounter on your future-proofing journey.

Having APIs on its own is not sufficient if they are not designed for scale. Good luck with consuming product data for your frontend via SOAP in Magento 1.

Larger players are waking up to this as they cannot rely on their market dominance alone anymore, but the transformation is either incomplete or with more or less success.

Halil Köklü, CTO at LoveCrafts

Halil Köklü's quotes came from Divante's whitepaper
"Switching to Headless eCommerce with Vue Storefront & commercetools".
LISTEN TO WEBINAR & DOWNLOAD WHITE PAPER

LoveCrafts is one of the largest crafting community websites and marketplaces in the world, shipping to over two hundred countries.

When the company made the decision to switch from Magento to commercetools, it had to choose a frontend for its new headless architecture.

There were four options on the table: Extend the community frontend built on Symfony and Backbone, use a traditional CMS with commercetools integration, build their own frontend or build on top of an existing but modern and flexible backend-agnostic frontend. 

Option number four was the clear winner. 

The joint forces of Vue Storefront and commercetools turned out to be the best way to provide LoveCrafts with the flexibility needed in the eCommerce industry.

A colleague mentioned Vue Storefront to me and we were excited straightaway. We discussed the fact that VSF relies on normalization to be backend-agnostic, so things like product data are indexed into an ElasticSearch cluster which VSF can read from.

commercetools already has great APIs so we didn’t need that but the team pitched Vue Storefront Next to me on the spot. It interacts with backends through contracts, each integration is responsible for implementing a contract. These contracts are composable, so you can load e.g. categories from a different backend than products. Or you can go and build your own composable. It sounded exciting, almost too good.”

Halil Köklü, CTO at LoveCrafts

The open-source integration with commercetools couldn't have been done without LoveCrafts' trust and financing.

Moving towards a truly modular architecture must be done without compromise. As mentioned previously, any APIs must be fully scalable to be efficient. If they are not, the desired “freedom from code dependencies” will simply not happen. So what is the solution, besides in-depth and time-consuming research of every possible vendor? 

There are no shortcuts, of course, but narrowing the possibilities down to providers that were headless and API-first before it was fashionable seems to be a reasonable approach. 

And this leads us, inevitably, to commercetools. 

Don’t take just my word for it:

Contenders like commercetools, who started with headless, had a good head start and are spearheading this development as it requires a lot of investment to migrate full-stack to headless.

Halil Köklü, CTO at LoveCrafts

The "next-generation software company" claim in the "About Us” section on the commercetools website is not just PR bluster. 

Unlike other competitors that have been on the market for some time, the people at commercetools firmly believed in the headless and cloud-native approach from the very beginning. The founders didn't even bother building a downloadable piece of software, forcing customers to install it on their own. Instead, they created an entirely cloud-hosted eCommerce platform and a powerful API. All of this enables users to get access to the platform without worrying about any infrastructure-related issues; it’s enough to create an account and then freely integrate your store with any third-party tools.

The API-first nature of commercetools was praised by Forrester’s analytics for “setting up developer-friendly APIs backed by cloud-native microservices in a multi-tenant architecture”*. And we couldn’t put it better ourselves. This company, unlike other competitors with a “headless claim” on their banner, has gone with a genuinely headless approach from the very beginning, believing that the API-first approach is the answer to the challenges that modern eCommerce brands face. The traditional, all-in-one commerce platforms that once dominated the industry have become too complex to update, adapt and maintain, which is why API-centered architecture has come to the fore. 

Appreciation for solutions such as commercetools was just a matter of time - but still, it is astonishing how fast it came.

“commercetools skyrocketed from a modest ‘Contender’ in 2018 to the ‘Leader’ position in just two years. It is proof that microservices are the future of the eCommerce industry and we are on the verge of a great transformation.” 

Tomasz Karwatka, Supervisory Board at Divante (Vue Storefront Core Partner). 

How to choose a “head” for your headless platform? 

commercetools, despite being a genuinely headless platform, came with an optional "head", providing the basic front-end features. Nonetheless, choosing a more advanced solution is recommended by commercetools themselves. As a MACH advocate, this company does not shy away from admitting that the front-end is not exactly its cup of tea. Therefore, it also appoints specific, suitable vendors that can be considered instead of commercetools own, default front-end.

The best place to search for them is the commercetools marketplace, in which Vue Storefront is a featured integration for the front-end, among other third-party services playing a different role.

Source: Marketplace Commercetools

Commercetools is doing an outstanding job of focusing on the eCommerce backend and the API-first approach. Vue Storefront is great at giving developers a framework on which they can build amazing frontend experiences. What connects us is the awareness that headless is the future of eCommerce. By joining forces, we are giving merchants the opportunity to quickly adapt to a new era of eCommerce that is future-proof.

Patrick Friday, CEO, Co-Founder of Vue Storefront

Is Vue Storefront the only option you’ve got while going with commercetools? No, by no means. Is it the easiest one to go with? For sure, especially if the desired front-end stack is Vue.js. 

In that case, as there are no Vue-js-based solutions comparable to Vue Storefront, the only alternative is building a custom front-end. It would be a path worth considering for enterprises that want to have full and unfettered control over further development, if not for the fact that Vue Storefront already provides this. Its core architecture is basically a standalone code library, and the out-of-the-box features that ensure compatibility with commercetools are built on top of it. To make it more UX friendly, they also can be customized freely. 

Vue Storefront is recommended for commercetools. Here is a list of reasons: 

Vue Storefront, as we just said, is the front-end of choice as the solution that provides full, out-of-the-box coverage of commercetools features, which saves time and money needed to go live with the project. This may sound a little vague, so here is a list of technical specifics:

Vue Storefront feature list due to commercetools integration:

Product Tile

Product Listing Page

Product Details Page

Cart

Wishlist

Checkout

User Authentication

User Profile

Error page

All of the UI elements above come as a default part of the commercetools integration. It is not only possible but strongly encouraged to treat them as a starting point and customize them to individual branding guides. How can you do this?

The entire Vue Storefront UI layer is based on Storefront UI, a UI library whose main architectural assumption was to keep a balance between delivering ready-to-use, mobile-first UI components and ensuring full control over the code.

That’s why the components have a lot of slots, thanks to which merchants can replace any part of the HTML. There is a single SCSS provided where developers can freely override default variable values.

The features mentioned above are out-of-the-box features allowing merchants to smoothly connect Vue Storefront with commercetools, but - as a module-based solution - Vue Storefront delivers many more native integrations you can choose from. 

There are integrations with:

Headless Content Management Systems (CMSs)

Content Management System

Theme:

Features:

Payments

Checkout.com

Loyalty & Discounts

Talon.one

The default-delivered features of Vue Storefront are even richer with all the benefits of a PWA: 

Progressive Web App

… and performance-oriented aspects. 

Performance

Also, you needn’t worry about going global with your business any time you want. 

Internationalization

Merchants can have all of this in the cloud, which - given the features below - might be convenient.

Cloud features of Vue Storefront:

Our tech team will manage your instance backups and the infrastructure based on Google Cloud for optimal performance.

We perform daily backups. Each user has direct access to the backup drive via the storefrontcloud-cli tool or via the support line.

Our shop can be deployed in any region of the World, possibly close to your customers.

Our Cloud team uses internal monitoring systems to provide you with SLA. Moreover, users get access to the New Relic monitoring tool (included in the price, on demand) for monitoring applications and performance on their own.

We can insert access and error logs into any systems that you prefer.

Part of the service is Git repository hosting and Git-based deployment process. We’re offering this to our clients with private Gitlab accounts, available here: https://code.storefrontcloud.io

Each deployment is managed via storefrontcloud-cli and the Gitlab repository. We use a fully automatic deployment flow with evidence of changes (gitlog) and an easy restore process in case of failed deployments.

You can use our CI/CD pipeline to build an environment per each PR.

Vue Storefront Cloud clients get access to a second (and possibly third, fourth, etc.) environment that is not used for production. These environments are still synchronized with the backend and can be used for development and testing purposes, however, they are not covered by full SLA and do not use CDN (Content Delivery Network) and other optimization features that are enabled for the production environment by default.

The infrastructure is optimized for performance and safety. After signing up, you will get access to a production-grade environment with a deployed default version of Vue Storefront. All your team/agency will need to do is customize it, and apply custom features and a layout.

The platform is accessible and can be managed via the storefrontcloud-cli tool. It’s a dedicated tool to manage the Kubernetes cluster and Vue Storefront deployments, backups, and logs. Please find more information in our knowledge base, available here: https://help.storefrontcloud.io

By default, Vue Storefront Cloud is integrated with commercetools. This service is included in the price. All you need are commercetools API access details to get the products, categories, and user accounts in sync with your instance.

All Vue Storefront Cloud config options are available via API

The Storefront Cloud team will guarantee 99.8% SLA for the infrastructure and Vue Storefront base app (modifications and custom integrations created by merchant/agency are excluded). Our clients can use our dedicated Slack support channel to contact the team and check any tickets’ statuses.

The Vue Storefront list of integrations is growing every day. It offers a range of standard integrations and an API that users can use to sync other applications with their own backend systems.

Vue Storefront Cloud has a customer dashboard with very useful features, such as traffic, instances, environments.

We can run sandbox/demo instances in a few minutes, with one click.

We have geo and DDOS protection. You can decide, in which country your store is available.

With token access protection, VSF offers selling virtual content with user access management.

Summary

Vue Storefront is a framework that provides a great deal of the features out-of-the-box, and yet, it does not define how the webshop must run and look. Retailers can work with the features given by design, customize them at any time, or opt for a hybrid model. 

It is entirely up to them and their business needs.


* Forrester Wave™: B2C Commerce Suites, Q2 2020 report