Drupal Headless

It should be considered that a current web application is made of two main components:

• The backend, which must mainly be functional, stable and durable. Its development is a long-term investment since it will be the basis of the content managed by the project and the business functionalities offered, if any;
• The frontend(s), which is scalable and must be quickly updated. The frontend(s), which is scalable and must be quickly updated. As the use cases and available technologies are constantly changing, the ability to rapidly evolve this component is essential.

A web application project is therefore composed of at least two modules with very different goals and development cycles.

Drupal is a stable, rich, extensible open source CMS and one of the best adapted to custom needs:

• It is flexible and powerful for content modeling and has a very rich functionality, especially through the catalog of contributed modules.
• Multilingual management is native and very successful. Robust e-commerce features are also available.
• It is supported by a large community of developers.
• The use of a CMS makes it possible to have a content administration interface without heavy development.

Drupal propose une couche de gestion de thèmes qui permet de personnaliser complètement l’apparence des pages web. Elle couvre un large spectre de cas d’usage actuel en apportant notamment, sans développement nécessaire, une gestion fine du cache et de l’accessibilité.

Cependant, cette couche de gestion des thèmes est limitée aux interactions avec un utilisateur, à travers un navigateur web, en utilisant le paradigme simple et classique qui consiste à servir et afficher une page pour une URL donnée. Naviguer en cliquant sur un lien de la page affichée provoque un rechargement complet du navigateur en vue d’afficher la page suivante.

Il existe des initiatives pour moderniser cette couche (Refreshless, Bigpipe) et pallier ces limitations mais elles ne peuvent pas encore rivaliser avec des outils comme Angular, React ou Ember dans la réalisation d’interface réactives et n’offre aucun moyen d’utiliser des techniques modernes comme les PWA (Progressive Web App).

D’autre part, l’expérience utilisateur ne se limite plus à l’utilisation de pages web au travers d’un navigateur puisqu’il devient courant d’utiliser des services web à travers une montre connectée ou d’exploiter la plateforme web pour alimenter des dispositifs de diffusion comme des écrans ou des bornes interactives. Le web s’invite désormais sur des appareils ne disposant même plus d’écran et se pilotant à la voix ou s’interface avec l’internet des objets.

L’objectif du mouvement headless (aussi nommé decoupled ou API-first) est de pouvoir se reposer sur un CMS éprouvé comme Drupal et continuer d’utiliser sa richesse fonctionnelle et sa stabilité tout en mettant en œuvre des technologies récentes et des conceptions novatrices pour l’expérience utilisateur.

The design of a decoupled web application immediately leads to the existence of two projects: a Drupal project to set up the backend and a second project, based for example on Angular. It is quite common to add a third component, based on node.js, when you want to offer a separate API entry point from Drupal.

As a result, such a project takes more time, especially during the first implementations, requires broader skills, and leads to disparate technical requirements in terms of hosting.

On the other hand, the possibility of exploiting frontend technologies without being limited to Drupal also offers the possibility of broadening the scope of recruitment of developers. It also allows a certain form of parallelism in the organization of the project.

What are the solutions to have an external API for Drupal? There are three main competitors for Drupal 8: The REST module, available with the Drupal core, the JSON API module and the GraphQL module.

The REST module is developed within the core of Drupal 8. It has been available since the first stable release of Drupal 8 and is therefore used as the main argument to show the ability of the CMS to be used in a decoupled way.

It is based on the internal Entity normalizer API and therefore allows to manipulate entities with an exchange format (like XML or JSON)

The functionalities are nevertheless limited to simple manipulations (Create, Retrieve, Update, Delete) on a single entity.

There is no collection management. For that, you have to use the Views request management module coupled with a JSON or XML rendering.

Quickly available after the release of Drupal 8, and based on an open community specification, the JSON API module overcomes many of the limitations of the REST module, including providing entity collection management and the inclusion of referenced entities in the same response.

This is the module that took the longest time to be available in a really usable way. Based on the specification and the query language proposed by Facebook, GraphQL offers an innovative approach in the way to design an API.

The user applications benefit from a large functional richness in the possibilities of querying the data model at the cost of a certain complexity and a new language to master.

Two Drupal distributions, Contenta and Reservoir, allowing to quickly install Drupal and the necessary modules to start practicing Drupal in a decoupled way.

• Navigation management;
• Interaction with crawlers;
• Management of user-generated data, such as comments or form submission;
• Authentication (OAuth2 or other);
• Cache management;
• Accessibility;
• Securing the backend ;
• ...