What is headless? Introduction to the topic

Headless is not so much a specific technology as a method of creating websites and internet applications. It consists in separating the frontend, i.e. what the user sees, from the backend, i.e. the technical background responsible for the functioning of the system. This makes editing and entering additional options faster and simpler. Makes it possible for even complex information portals to be easily adapted to changing needs, while maintaining fluency and speed.

What is headless? Technology definition

The standard model of any website consists of three basic parts:

Database, The content is not bound to any predefined structure in which the information is stored (e.g. about products, their prices, names, descriptions or presentation photographs.

Back-end, Interior of the system, whose interface is most often an administration panel. Supports the operation of all functionalities (ways of working) of the website and allows to manage it.

Front-end is the presentation layer of the system – what you see when visiting a given website. Presents the processed information, coming from the database. They are presented to the end user, e.g. For the customer of a given online store.

Traditional approach assumes connection of front-end and back-end, while headless introduces independence of these layers. The main point of the headless model, is the API technology, which is the link between the front-end and back-end. It is responsible for the automation of processes, facilitates efficient modification, but sometimes also the daily management of the website or online store.

API – what it means?

The headless model is based on API technology. This abbreviation stands for “Application Programming Interface”.

API is a kind of “bridge” that allows to connect different systems or databases and to transfer information between them. More precisely, it is the connection between the frontend and the backend. Separates these two parts from each other, while allowing communication between them. This makes the whole thing coherent and functional.

What such communication looks like? The process of processing and subsequent transmission of data consists of two stages.

1. All the information from the “back-end” layer (database + back-end) is collected, and then it is sent outside as raw data. They are most often in JSON (data exchange format) or XML (document exchange format).

2. In this way, the uploaded data is then retrieved and displayed according to the requirements of the platform. It can be either a web application, displayed in a web browser, or one with a mobile version, for a smartphone or tablet. Often it is also software for any other device, e.g. TV or a smart device.

API sends information or data from the back-end to any system that needs it, exactly when it is needed. Thanks to this the whole process is automated. Different devices can present content in a different way, adapted to their capabilities and limitations, because the content is not bound to any predefined structure.

Diagram showing headless approach

Headless vs traditional page structure – basic differences

The main difference between the traditional model of CMS systems (e.g. The difference between the classic approach (e.g. WordPress) and the headless version is that the frontend and backend are closely connected. Therefore, they have a predefined group of technologies that can be used to prepare the presentation layer.

Headless introduces full independence of these layers, so there is freedom in the choice of front-end technologies, which facilitates construction and later modification of the visual layer. At the same time it makes it possible to customize websites for optimal display on different devices, e.g. The API can be used on phones, tablets, laptops or even smart TV devices.

As a result, you can define a completely different look of e.g. of your web store on any device, and all this with the help of one backend system. This significantly reduces the costs and time associated with building your omnichannel presence.

The most important advantages of the headless CMS model

The main benefit of using the headless model is the greater potential for expansion and modification of the website. You can freely modify and expand its individual parts, without affecting the other layers of the portal, but also the other channels in which the service operates. What’s important, such editing is carried out while maintaining optimal efficiency, which was not possible with traditional, monolithic way of working. What other benefits come from implementing the headless model?

Omnichannel support

Headless makes it possible to adjust e.g. online stores for different sales channels and connecting them harmoniously with each other.

Omnichannel requires the flexibility that m.in. separation of frontend and backend. This makes any modifications, as well as the implementation of new sales channels much easier. What’s more, it becomes possible to create individually tailored front-end layers for each sales channel.

Fast delivery of content

Headless technology also influences the faster loading of the page, which evokes positive feelings of the customers. The speed of the system is guaranteed by two significant features present in the headless model.

– Using APIs to pull content makes resources not shared.

– Using the browser’s memory to execute some scripts allows to reduce the number of queries directed to the database.

Better positioning

The speed of the platform is also important for its positioning, i.e. displaying it as high as possible in search engines. The main characteristic of headless, which supports the design of solutions better suited to the devices on which the service is displayed, is also important for SEO. This is of particular importance since Google announced its “mobile first” policy.

Security

It is also worth mentioning that the headless architecture provides greater security of the stored information. The separation of the frontend and backend layers means that the website user has no direct contact with the internal system. Moreover, in most cases, these parts are placed on different servers, which contributes to even better data protection.

UX – user experience

This is the impression made by the sales platform on the clients of. It is mainly about its functionality and aesthetics. All e-commerce activities (online marketing activities) will also be important in this case. Thanks to the use of tools dedicated to the specificity of a given sales channel, high UX personalization is possible.

PWA and TWA – answer to the needs of mobile sales

1. Headless PWA

PWA stands for Progressive Web Application. Thanks to this standard, applications run like regular web pages, while their functioning resembles native (classic) applications.

Therefore, although the store looks like a regular website, it has the functionality of an app, that is:

– allows to add application icon on the home page of a device (e.g. phone screen),

– works offline,

– takes advantage of the device’s built-in functions (e.g. camera, location),

In addition, the PWA application retains all the features of the website, and what is important, it can be found, as well as viewed from a browser (no need to download / install).

2. Headless TWA

While TWA technology stands for Trusted Web Activity. It is used to “pack” web services, based on PWA, into a special “container”. This gives many possibilities, including simplifying the process of adapting the sales platform to individual channels (online stores, social media) and media (devices – phone, laptop, etc.).).

By using this functionality:

– we do not have to create a separate mobile application (we can apply TWA and convert the website into an independent application),

– we optimize the costs of maintaining the website and mobile application (e.g. changing color on the website, it will automatically change in the application),

– increase convenience for customers and users (especially important if you have returning customers).

The application created in this way, using TWA solution, can be successfully published in Google Play Store and from the user’s point of view, it becomes a mobile application, with a friendly appearance of a traditional website.

Explore new technologies and sell more effectively online

The future always brings a certain amount of uncertainty. The biggest challenge business owners face is trying to predict it and prepare for it optimally. We can say that Headless is a tool that allows you to prepare to a large extent for the dynamic changes associated with the evolution of digital reality, as well as customer expectations.