Explorez nos posts de blog

Headless Drupal

08 mars 2018
Benoît PlâtreBenoît Plâtre

Comment faire un site web dont l'interface utilisateur ne se recharge pas intégralement à chaque clic et dont les contenus sont dans Drupal ? Peut-on concevoir une application native alimentée par des contenus gérés avec Drupal ? Comment proposer une expérience de navigation ambitieuse, mêlant 3D et immersion sonore en bénéficiant des avantages du CMS.

Une application web, deux composantes

Il faut considérer qu’une application web actuelle est constituée de deux composants principaux :

  • Le backend, qui doit principalement être fonctionnel, stable et pérenne. Son développement est un investissement sur la durée puisqu’il va être le socle du contenu géré par le projet et des fonctionnalités métier offertes, le cas échéant ;

  • Le(s) frontend(s), qui est évolutif et doit être rapidement à jour. Les cas d’usage et les technologies disponibles variant sans cesse, la capacité d’évolution rapide de ce composant est primordiale.

Un projet d’application web est donc composé d’au moins deux modules aux buts et cycles de développement très différents.

Pourquoi Drupal ?

Drupal est un CMS open source stable, riche, extensible et l’un des mieux adaptés aux besoins sur-mesure :

  • Il est flexible et puissant pour la modélisation du contenu et dispose d’une très grande richesse fonctionnelle, notamment à travers le catalogue de modules contribués.

  • La gestion multilingue est native et très aboutie. Des fonctionnalités e-commerce robustes sont aussi disponibles.

  • Il est porté par une grande communauté de développeurs.

  • L’utilisation d’un CMS permet de disposer sans développement lourd d’une interface d'administration des contenus.

L’expérience utilisateur

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.

L’équation headless un projet = deux projets (voire plus)
Benoît Plâtre

La conception d’une application web découplée entraîne immédiatement l’existence de deux projets : un projet Drupal pour la mise en place du backend et un deuxième projet, basé par exemple sur Angular. Il est assez courant d’y adjoindre un troisième composant, basé sur node.js, lorsqu’on veut offrir un point d’entrée d’API distinct de Drupal.

En conséquence, un tel projet prend plus de temps, notamment lors des premières réalisations, nécessite des compétences plus larges, et entraîne des prérequis techniques disparates en terme d'hébergement.

D’un autre côté, la possibilité d’exploiter largement les technologies de frontend sans être limité à Drupal offre aussi une possibilité d’élargir le champ de recrutement des développeurs. Cela permet également une certaine forme de parallélisme dans l’organisation du projet.

API

Quelles sont les solutions permettant de disposer d’une API externe pour Drupal ? Il existe trois grand compétiteurs pour Drupal 8 : Le module REST, disponible avec le cœur de Drupal, le module JSON API et le module GraphQL.

REST

Le module REST est développé au sein du core de Drupal 8. Il est disponible depuis la première version stable de Drupal 8 et sert donc d’argument principal pour montrer la capacité du CMS à être utilisé de manière découplée.

Il est basé sur l’API interne Entity normalizer et permet donc de manipuler les entités avec un format d’échange (comme XML ou JSON)

Les fonctionnalités sont néanmoins limitées aux manipulations simples (Create, Retrieve, Update, Delete) sur une seule entité.

Il n’y a pas pas de gestion des collections. Il faut pour cela utiliser le module de gestion de requêtes Views couplé à un rendu JSON ou XML.

JSON API

Rapidement disponible après la sortie de Drupal 8, et basé sur une spécification communautaire ouverte, le module JSON API pallie une grande partie des limitations du module REST, notamment en offrant une gestion des collections d’entité et l’inclusion des entités référencées dans la même réponse.

GraphQL

C’est le module qui a nécessité le plus de temps pour être disponible de manière réellement exploitable. Basé sur la spécification et le langage de requête proposée par Facebook, GraphQL offre une approche novatrice dans la manière de concevoir une API.

Les applications utilisatrices bénéficies d’une large richesse fonctionnelle dans les possibilités de requêter le modèle de données au prix d’une certaine complexité et d’un nouveau langage à maîtriser.

Deux distributions Drupal, Contenta et Reservoir permettant d’installer rapidement Drupal et les modules nécessaires pour commencer à pratiquer Drupal de manière découplée.

Les challenges

  • La gestion de la navigation ;
  • L’interaction avec les crawlers ;

  • La gestion des données générée par l’utilisateur, comme les commentaires ou la soumission de formulaires;

  • L’authentification (OAuth2 ou autre) ;

  • La gestion du cache ;

  • L’accessibilité ;

  • Sécurisation du back ;

  • ...