Headless approach to e-commerce front-end development

Headless e-commerce

What is “Headless e-commerce” and what does it mean for our customers? How it helps them to achieve their business goals to be leaders in a very competitive market of online trade? In this post let we have a closer look under the hood of “Headless e-commerce” trend.

First, headless software, the newest form of headless technology can be found in websites. Traditional e-commerce websites have their own back-end and front-end. All the pieces work with the same code base and communicate directly with each other, making the website as a whole. However in a headless installation the front-end is a stand-alone piece of software, which through API communicates with a back-end. Both parts operate separately from each other, and can even be placed on separate servers, creating a minimum version of a multi-server architecture. The bridge between both parts is the API client. The endpoints of the API are connected to each other..

In the context of the front-end, it is an important developer's tool with which you can test code, check the quality and consistency of the layout and do all these things much more effective.

Same, “Headless e-commerce” means a new perspective approach to e-commerce front-end development, which is API-driven and supports monolith business logic within various channels of today e-commerce. Moreover, it brings performance, scalability, extensibility and security to online store front-end operation.

Technology Trends

We all know the meme: by the time you’ve learned one front-end technology, another three have just been released. Also, that one you just learned? It’s deprecated. Yes, frontend technologies are unstable and changing every 2-3 years.

At every year we have new and hot (at least for some time) channels to communicate with customers online. These are chatbots, messengers, new social networking services, sales over personalized ads in mobile applications, etc.

But e-commerce business logic behind the front-end has to keep to solid and monolithic rules.

When you decide to start a new trendy sales channel, it has to be done as a fast, easy and flexible way within the same fundamental business logics as works for your already operating sales channels. Mind that usually every new sale channel will require from the development team a lot of corrections and feature enhancements within the first few months after it has started.

Meet the “Headless e-commerce”

At Virto Commerce, we are apologists of Headless e-commerce approach which allows you to:

  • Delivery e-commerce experience to any channel
  • Easily make any changes to your front-end to coincide with the speed of consumer technology
  • Consolidate and enrich e-commerce data from different data-sources.

The exclude of business logic from client applications significantly reduces the cost of subsequent development of new front-end applications. You can change the design in old ones, connect new ones, run A / B UX tests, etc.

To make this machine working, the full-featured Headless e-commerce is based on five important things. These are the following ones and further, we will reveal them in more details:

  • API
  • Performance
  • Scalability
  • Extensibility
  • Security

GraphQL as a new type of API

Initially, Virto Commerce development team relied on the REST API. Front-end web services that comply with the REST architectural style, are known as RESTful web services with interoperability between software modules of various computer systems. The REST API approach really works, it allows to build access to business processes and data from external applications and other third-party sources. All data and business functions are available as modules and via API.

But development progress is moving very quickly. Since 2015 when Facebook provided publicly available GraphQL, an open-source data query and manipulation language for APIs, it becomes a new trend in API development. Built on new principles, it allows us to achieve new opportunities:

  • Speed ​​— because we indicate what data we need; it becomes possible to optimize queries over the network to data sources. For e-commerce related example, if no prices are requested, there is no need to load them to front-end.
  • Link tree — it is the presence of links between objects, allows you to get all the required data for one request. For example, request the cart, the number of products in it and user profile.
  • Harmonical integration into modern client applications. GraphQL already has client libraries for most modern front-end development tools.

Despite GraphQL has no integration development tools yet, we at Virto Commerce bet on GraphQL as the main API endpoint for a touchpoint.

Performance

The next key criterion for Headless e-commerce is API performance. The speed of data exchange is a very important thing.

To ensure the speed of the API, Headless e-commerce needs the following:

  • Work only with the real-time data sources, i.e. those have response speed which is shorter than 150 ms.
  • Consolidate & cache data from non-real-time data sources, such as ERP or legacy systems, which are not ready for load at the moment of a data exchange request.

Headless e-commerce platform is good place for online trade data consolidation and enrichment.

Scalability

Headless e-commerce needs to scale with the same pace as the business itself. Therefore, it should work with scalable storage sources and non-relative databases like Elasticsearch (multitenant-capable full-text search engine with an HTTP web interface and schema-free JSON), Redis (in-memory key–value database), Azure Cosmos DB (schema-agnostic, horizontally scalable and classified as a NoSQL database), etc.

Extensibility

Despite that above we have talked about business logic as a constant and monolithic substance, it has to keep the ability to progressive changed for better market competitiveness and e-commerce profitability. These changes are usually implemented through A/B testing and finding the best options of any kind that same time should be done in targeted points and cheaply.

Virto Commerce allows to extend core functionality on different levels. You can extend:

  • Core API contracts
  • Core Persistent models
  • Override implementation

Innovated, binary extensibility allows you to pointwise extend core functionality and keep updatability of core modules. Do this without affecting most of the business processes currently running.

If it’s required, you can replace default implementation with custom business rules, for example: replace price lists rules with dynamic price mechanics or integration with your ERP.

Also, Headless e-commerce should allow developing new applications in the same ecosystem as is, which will work in their own isolated space and according to their own rules. For example, you can run several Virto Commerce platforms with different list of the modules and configurations to improve scalability and use benefits from Mesh App and Service architecture (MASA).

Security

Any facilitation of the development process should not make it easier for attackers to hack a front-end of e-commerce applications of any kind. Virto Commerce development team works hard to implement modern trends for application security at the stage of architecture and coding. Headless e-commerce must control and restrict access to data. We plan to be back with a special blog post regarding ensuring security in application development in Virto Commerce.

Summary

Headless e-commerce is new and perspective approach to front-end application development. Its goal is to provide our customers and partners with the ability for fast, flexibly and securely launch of new online sales channels through a variety of tools such as chatbots, instant messengers and mobile applications, while maintaining the unity of business logic. Ultimately, the goal of this approach is to successfully grow our clients' businesses.

Share. Spread tech knowledge & news:

About the author of this article

Oleg Zhuk
Technical Product Owner

Oleg is a leading technologist and has grown professionally from being senior C++ and C# developer to solution architect. He joined Virto Commerce as a Solution Architect was promoted to lead Technical Product Owner. Oleg has leadership and communication skills and has had the opportunity to coach solution architects and share best practices of building great architecture. He holds a degree in mathematics from the Emmanuel Kant State University.