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.
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 Alokai and commercetools turned out to be the best way to provide LoveCrafts with the flexibility needed in the eCommerce industry.
A colleague mentioned Alokai 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 Alokai 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.”
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.
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.”
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 Alokai is a featured integration for the front-end, among other third-party services playing a different role.
Commercetools is doing an outstanding job of focusing on the eCommerce backend and the API-first approach. Alokai 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.
Is Alokai 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 Alokai, 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 Alokai 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.
Alokai is recommended for commercetools. Here is a list of reasons:
Alokai, 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:
Alokai feature list due to commercetools integration:
- Product Title
- 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 Alokai 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 Alokai with commercetools, but - as a module-based solution - Alokai delivers many more native integrations you can choose from.
There are integrations with:
Headless Content Management Systems
(CMSs)
- Storyblok
- Contentstack
- Amplience
- Contentful
Content Management System
Theme:
- Home Page Managed by the CMS
- Header and navigation managed by CMS
- Footer Managed by CMS
- Generic Static Page managed by CMS
Features:
- Display a single document
- Display multiple documents
- Transform output to components
- Content Scheduling
- Internationalization
- Content Live Preview
- Add new static page from CMS Admin Panel without deployment
- Connection to eCommerce platform from within CMS Admin Panel
- Custom Components support
Payments
Checkout.com
- Credit Card, Klarna, Paypal and Sofort payment methods
- Saving Card and paying with a stored card if not-guest
- Possible to request CVC/CVV during saved card payment
- Loading available payment methods for the provided cart
- Redirect to finalize payment support (e.g.3DS for card redirects for PayPal or Sofort)
- Possible to provide both success and error URL (redirect after a redirect)
- Choosing whether to save a payment method or not
- Customizing Frames (credit card SDK from CKO)
- Customizing Klarna
- Removing saved payment instruments
- Support for channels
- Possible to provide a custom reference for the payment
Loyalty & Discounts
Talon.one
- Applying discount assigned to a single campaign by discount code
- Applying discount assigned to a single campaign by defined cart rules
- Discounts tracking in Talon.one panel
The default-delivered features of Alokai are even richer with all the benefits of a
PWA
:
Progressive Web App
- Automatic Web Manifest generation
- Automatic icons scaling
- Static Assets Caching (partial offline support)
- Add to Home Screen
… and performance-oriented aspects.
Performance
- Two output modes
- Modern mode without polyfills for modern browsers (20-30% smaller)
- Legacy mode for old browsers (minority)
- Server-Side Rendering
- Server-Side Tag-based Cache
- Majority of JS code is executed on the server side to keep small bundles
- Automatic route-based code splitting (incl. CSS)
- Static assets client-side caching via Service Worker
- CSS Purging
- Preconnects to CDNs/Google Fonts
- HTTP/2 Push
- Lazy Hydration of below-the-fold elements
Also, you needn’t worry about going global with your business any time you want.
Internationalization
- Frontend translations based on nuxt-i18n
- String translations based on keys
- Currencies translation
- Automatic routes generation and custom paths
- Search Engine Optimization
- Lazy-loading of translation messages
- Redirection based on auto-detected language
- Different domain names for different languages
- eCommerce platform internationalization connected with nuxt-i18n
- CMS platform internationalization connected with nuxt-i18n
Merchants can have all of this in the cloud, which - given the features below - might be convenient.
Cloud features of Alokai:
- Hosting
Our tech team will manage your instance backups and the infrastructure based on Google Cloud for optimal performance.
- Automatic Backups
We perform daily backups. Each user has direct access to the backup drive via the storefrontcloud-cli tool or via the support line.
- Multiregions
Our shop can be deployed in any region of the World, possibly close to your customers.
- 24/7 availability monitoring
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.
- Access and errors log
We can insert access and error logs into any systems that you prefer.
- Gitlab / Github source-code management
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
- Automatic deployments
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.
- As many environments as you need
You can use our CI/CD pipeline to build an environment per each PR.
- Staging environment
Alokai 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.
- Production-ready setup
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 Alokai. All your team/agency will need to do is customize it, and apply custom features and a layout.
- CLI access to env (via kubect)
The platform is accessible and can be managed via the storefrontcloud-cli tool. It’s a dedicated tool to manage the Kubernetes cluster and Alokai deployments, backups, and logs. Please find more information in our knowledge base, available here: https://help.storefrontcloud.io
- All of the commercetools OOTB features ready on environment
By default, Alokai 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.
- Access via API
All Alokai Cloud config options are available via API
- SLA & Support
The Storefront Cloud team will guarantee 99.8% SLA for the infrastructure and Alokai 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.
- API Integration with third-party services OOTB
The Alokai 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.
- Customer Dashboard
Alokai Cloud has a customer dashboard with very useful features, such as traffic, instances, environments.
- CDN
- VSF sandboxes
We can run sandbox/demo instances in a few minutes, with one click.
- GEO-Fencing
We have geo and DDOS protection. You can decide, in which country your store is available.
- Rich Content
With token access protection, VSF offers selling virtual content with user access management.
Summary
Alokai 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
.png)
