23 mai 2019

L’intégration au sein de Drupal 8 de L’API Rest, puis du module JSON:API dans le core de Drupal 8.7 marque la volonté d’entamer un virage radical dans la manière d’employer le CMS. Utilisé depuis ses débuts comme un CMS « monolithique », c’est-à-dire ne dissociant pas le back-office de l’affichage front-office, Drupal est aujourd’hui une plateforme API-first reconnue.

Les avantages d’une plateforme headless et découplée sont multiples: création d’expériences riches en front-office pour Drupal découplé, et diffusion de l’information sur différents systèmes tiers et différents terminaux pour les architectures headless et découplées.

 

Sommaire :

drupal-headless.png

Qu’est-ce que Drupal headless et Drupal découplé ?

Dans sa version monolithique, Drupal centralise l’administration et l’affichage de l'information. Le rendu du contenu sur le navigateur de l’internaute est donc dépendant de la plateforme Drupal.

 

Drupal headless

Dans sa version headless, Drupal devient une interface d’administration de l’information, mais il n’y a pas d’affichage de l’information en front-office. Headless, peut d’ailleurs se traduire “sans tête” (head less), donc sans front-office. Le contenu est accessible par l’intermédiaire d’une API et peut être diffusé sur différents systèmes, périphériques ou autres sites web. La présentation de l’information et le style sont alors gérés en dehors du périmètre du CMS, par les applications des périphériques (application android, iOS ou encore frameworks JavaScript). On peut alors considérer Drupal comme un fournisseur de contenu en tant que service (Caas).

drupal-headless.png

Drupal découplé

Une architecture découplée reprend les mêmes principes qu’une architecture headless mais le contenu peut être affiché en front-office, de manière indépendante du back-office. Le contenu est accessible depuis une API (JSON:API, REST ou GraphQL dans le cas de Drupal) pour les différents périphériques mais aussi pour le front-office du site utilisant le CMS découplé. Le front-office sera alors géré par un ou des frameworks JavaScript, indépendamment de Drupal et de son système de template. Cela permet d’ajouter une couche supplémentaire de fonctionnalités et de personnalisation, indépendamment du CMS.

Les applications découplées se basent généralement sur les technologies permettant de créer des interfaces JavaScript rapides et réactives. Le code est compilé pour être interprété côté navigateur.

 

drupal-decouple.png

Les frameworks les plus fréquemment utilisés sont les suivants :

  • React : profitant d’une grande communauté active et de nombreux modules maintenus par cette communauté.
  • Vue.js : supporté lui aussi par une large communauté de développeurs.
  • Angular : supporté par le géant Google.

 

Les API exploitées lors de projets Drupal Découplés sont :
 

  • REST : disponible depuis la première version stable de Drupal 8, REST est basé sur l’API interne Entity normalizer. Ce module permet de manipuler les entités en ayant recours à un format d'échange comme XML ou JSON. De base, les fonctionnalités restent tout de même limitées aux manipulations simples sur une seule entité (création, récupération, mise à jour et suppression).
  • GraphQL : Ce module se base sur la spécification et le langage de requête proposée par Facebook. L’API est assez complexe et nécessite de maîtriser un langage spécifique, mais elle offre une richesse fonctionnelle avancée.
  • JSON:API : Disponible depuis 2016, elle est intégrée au cœur de Drupal depuis la version 8.7 en mai 2019. C’est un format d’échange de données textuel dérivé de la notation des objets du langage JavaScript. JSON :API est intégré dans la distribution Drupal Headless « Contenta ». L’avantage par rapport aux API citées ci-dessus, c’est que JSON:API est prêt à l’emploi et est facile à configurer.
drupal-decouple.png

Quels avantages offre Drupal en version découplé ?

Plusieurs raisons incitent à utiliser Drupal en version découplée ou headless.

 

Faciliter l’omnicanalité

L’utilisation du système de gestion de contenu en mode découplé permet de diffuser l’information sur différents supports. Les prospects et clients peuvent alors être touchés depuis différents points de contact :

  • Web (site responsive ou dédié aux différents supports)
  • Autre CMS
  • Progressive web apps (PWA)
  • Application mobile native
  • Borne interactive
  • Objet connecté

La présentation du contenu étant gérée et mise en forme au niveau des applications sur ces différents supports, elle est affichée de manière optimale et unique. Autre avantage : l’information est renseignée depuis un seul back-office, pour être diffusée sur une multitude de supports, ce qui facilite la diffusion du contenu par les équipes en charge du marketing.

 

Améliorer les performances

Ce paradigme modifie en profondeur la relation de Drupal avec les clients/serveurs, et l’information peut être livrée de manière beaucoup plus rapide.

 

Plus de liberté pour le développement front-end

Les développeurs front-end peuvent créer des expériences riches sans les contraintes imposées par Drupal tout en ayant potentiellement la liberté de choisir la technologie la plus adaptée au projet.

 

Améliorer la sécurité

Le découplage permet aussi d’améliorer la sécurité en permettant aux administrateurs systèmes de limiter l’accès à certaines zones de l’infrastructure : le contenu est créé et publié depuis un système puis transmis aux utilisateurs depuis un autre.

 

Une meilleure gestion des projets

Pour les intégrateurs et développeurs front-end, pas de risque d’interférer avec la configuration back-end et pas besoin d’accéder directement à la base de données ou de redéployer le site. Cette approche permet théoriquement, aux développeurs et intégrateurs de travailler indépendamment. Les intégrateurs pourront avant tout se concentrer sur le rendu.

 

Drupal découplé : quels inconvénients ?

En revanche le fait que Drupal en version découplé repose sur de multiples technologies implique de mettre en place de nouvelles procédures d’implémentation, rend les déploiements plus complexes et nécessite plus de temps pour les développements. L’investissement est plus important, mais les avantages en matière de fonctionnalités, d’amélioration des performances et de gestion des contenus est à considérer.

L'inconvénient de l’approche découplée pour le SEO, repose surtout sur le fait qu’il peut être nécessaire de développer certaines fonctionnalités qui étaient gérées par des modules dédiés (alias et génération du sitemap xml dépendant de ces alias par exemple).

 

Architecture découplée : les avantages pour Drupal Commerce

L’approche découplée est une des priorités de Commerce Guys, porteur du projet Drupal Commerce. L’équipe en charge du développement de Drupal Commerce a grandement contribué à l’amélioration du core dans la prise en charge de l’API :JSON. Cet investissement se justifie notamment par les avantages offerts par l’approche découplée de Drupal Commerce.

 

Premier constat : vitesse d’affichage améliorée

L’avantage principal des interfaces basées sur des frameworks JavaScript modernes (React, Vue.js et Angular) réside dans la rapidité d’exécution. De plus cette configuration ne surcharge pas Drupal, ce qui se répercute positivement au niveau des performances.

Le principal développeur des modules « Commerce Cart API » et « Cart Flayout », Matt Glaman a déclaré que la page de produit de la version de démonstration se charge plus rapidement. Le temps nécessaire à l’affichage passe de 130 à 60 millisecondes grâce au panier découplé. Toutes les actions sur le panier sont effectuées côté client et n'impliquent pas le système de rendu Drupal, offrant un gain de temps d’affichage de plus de 50% dans ce cas-ci.


L’avantage est bénéfique pour l’expérience utilisateur et donc le taux de conversion. On sait en effet que 57% des internautes quittent un site s'il prend plus de 3 secondes à s'afficher et que 80% d’entre eux affirment ne plus jamais y revenir*.

 

Plus d’interactivité pour une meilleure expérience utilisateur

Avec plus de liberté au niveau applicatif côté front-end, les développeurs pourront proposer plus facilement des fonctionnalités avancées, enrichissant ainsi les interactions. L’expérience utilisateur étant améliorée, c’est le taux de conversion qui devrait augmenter ! Sans oublier que l’expérience utilisateur rentre dans les critères E-A-T de 2019 (expertise, autorité, fiabilité) de Google.

Parmi les fonctionnalités possibles on peut énumérer :

  • Les notifications push Marketing.
  • La mise à jour en temps réel du panier, permettant aux internautes de voir le nombre d’articles et le montant en un coup d’œil ou de modifier celui-ci sans devoir charger une page.
  • L’application d’attributs en temps réel sur des produits à déclinaisons (comme le prêt-à-porter).

 

drupal-commerce-demo.png

Sur la démo en ligne de la distribution Drupal Commerce « Kickstart », un clic sur « ajouter au panier » permet d’afficher le contenu de celui-ci. La modification de la quantité modifie en temps réel le prix total (Dans cette démo, les modules « Commerce Cart API » et « Cart Flyout » sont utilisés).

 

Travailler avec l’agence MyConsulting.digital
L’ambition de l’équipe MyConsulting est d’amener nos clients à surperformer grâce au digital. C’est pourquoi, comme nous le démontrons dans cet article, nous utilisons les technologies les plus modernes et performantes. La technologie que nous présentons permet d’optimiser l’expérience utilisateur, qu’il soit votre client ou votre collaborateur. Elle permet aussi une présence optimale d’une information de qualité sur tous vos canaux de communication digitale. Utiliser cette technologie vous garantit une démarche de Growth Hacking pragmatique mais libérée.

Mais notre expertise ne se limite pas à l’excellence technique, elle se retrouve aussi dans les domaines de la direction artistique, de l’UX design, du référencement naturel (SEO) et dans le conseil fonctionnel et technique.

Notre équipe de 26 personnes basée à Lille, et aussi, à Paris et Courtrai (en Belgique) se développe rapidement depuis la création de l’agence fin 2015. Nous travaillons avec agilité et gardons toujours en vue le retour sur investissement de ce que nous réalisons pour nos clients.

Vous souhaitez travailler avec une agence qui allie expertises, performance, engagement et convivialité ? Contactez-nous !

 

---

Les sources :

* https://neilpatel.com/blog/loading-time/

https://commerceguys.com/blog/enabling-headless-drupal-commerce-while-improving-its-core

https://demo.commercekickstart.com