The good news is, if you like to build Progressive Web App or implement general use Headless eCommerce — most of the building blocks are already there. Most of them are Open Source. The time You need to spend to run the shop is mostly spend on the integration part — putting it all together

Headless apps can be built in many different ways. Usually, the team starts with some front-end application — written using modern JS frameworks (Vue.js, React, Angular). The second team (or the same team if you’ve got Full stack developers :)) is exposing some API endpoints.

Most commonly used backend systems to be integrated into Headless eCommerce are:

Vue Storefront — first Progressive Web App for eCommerce

Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backend (eg. Magento, Pimcore, Prestashop or Shopware) through the API.

Vue Storefront is and always will be in the open source. Anyone can use and support the project, we want it to be a tool for the improvement of the shopping experience. The project is in the production ready phase.

Vue Storefront was designed as a framework. Developers just create their own theme and extensions to apply a 100% customizable look and feel, without modifying the core. We’ve applied the design system and component-based design patterns to keep the layouts (which are also open sourced) maintainable and reusable.

The project also has a strong community around it, started by Divante and released on an Open Source licence (MIT), it is now maintained and developed by 27 active core developers across the world. 140 more developers have joined the Slack community and work on different projects based on Vue Storefront. The official partnership network includes companies from Argentina, the United States, Australia, the United Kingdom and Poland. The project has already attracted its first clients — prominent brands from fashion, jewelry and the sports industry.

Technologies used:

More information:

Nuxt.js framework

Nuxt.js is a framework for creating Universal Vue.js Applications.

Its main scope is UI rendering while abstracting away the client/server distribution. Nuxt.js presets all the configuration needed to make your development of a Vue.js Application Server Rendered more enjoyable.

In addition, the authors provide another deployment option called: nuxt generate. It will build a Static Generated Vue.js Application. We believe that option could be the next big step in the development of Web Applications with microservices.

As a framework, Nuxt.js comes with a lot of features to help you in your development between the client-side and the server-side such as Asynchronous Data, Middleware, Layouts, etc.

Nuxt.js can be used to build the site frontend — and integrate other tools mentioned in here — like getting data from Headless CMS or including some components of PWA eCommerce platform.

Technologies used:

More information:

Strapi Headless CMS

Strapi is a Content Management Framework (CMF) that can be easily connected to Vue Storefront, Nuxt.js project or any other custom eCommerce frontend via API. You can manage the Content classes in the backend

Key features:

Development starts with CLI tool used to generate the data models and API’s for them. It’s very similar to Ruby on Rails way of scaffolding. Then the models are accessible via admin panel and can be modified without any development skills.

Then — all data objects are just exposed via generated API’s and can be used within eCommerce frontend for example for managing Sliders, banners or navigation items.

Technologies used:

More information:

Netflify CMS

Netflify CMS is another “Headless CMS” but with different approach than Strap. Here you’ve got a content management tools that’s using Gitflow (based on Github, Gitlab ..) to manage the content, that can be easily merged / diffed / versioned or .. deployed.

Netlify CMS is adaptable to a wide variety of projects. The only inflexible requirement is that your site content must be written in markdown, JSON, YAML, or TOML files, stored in a repo on GitHub. (If you’re partial to another Git hosting service, check out the PRs in progress for GitLab and Bitbucket support.)

Data structures are modeled using YAML config files and rich content is managed via Markdown files (like on Github). The data backend is git itself — so You just configure your Github repository and no other database or data storage is required. It’s really usefull because could be easily integrated with the deployment workflow.

Technologies used:

More information:

Pimcore PIM and DAM

Pimcore is an Enterprise Grade Open Source, PHP based CMS, PIM, and DAM solution. With its very flexible data architecture (everything base on Object — which structure can be visually modeled) it’s a go-to solution for any application that requires data management.

Most of the operations — related to data modelling and management are done via useful Web Panel.

Data Modelling

Flexible data modeling is key to Pimcore PIM/MDM. It includes a web-based data modeling engine to create a new product data model within minutes.

Data Management

The user-friendly and consistent organization, aggregation, classification, and translation of rich product information based on a flexible and agile data model is key to Pimcore PIM/MDM.

Data Integration & Delivery

Pimcore enables you to take charge of data integration through easy import and export of data between Pimcore and external systems.

Asset Portal

Pimcore Asset Portal is an image library for marketing teams. It’s a commercial extension to Pimcore.

Digital Asset Management

Pimcore provides a powerful central repository for any type of digital asset and its meta-data.

Digital Asset Delivery

Easy integration with other systems make Pimcore the ideal enterprise content hub.

Among other features Pimcore supports very useful features regarding eCommerce:

More information:

Magento

Magento is a kind of Industry Standard for eCommerce with more than 25% of total eCommerce running on it. To be honest — it is hard to find more flexible and feature-rich platform. However — the frontend part is currently off the technology bleeding edge (phtml templates and CSS).

Magento is taking some serious steps to improve the frontend with Magneto PWA Studio planned for later this year.

The Magento platform is a great choice for going Headless with its pretty powerful API. Vue Storefront supports Magento 2 and it’s going to support Magento 1 next week.

More information: