Commerce digital

Magento 2 et la PWA, comment faire du headless sans perdre la tête ?

by Benoît Emile 17 mars 2021

Magento est un framework e-commerce Open Source écrit en PHP. C’est une solution utilisée par plus de 250 000 e-commerçants dans le monde, répandue et reconnue dans le monde de la tech. Aujourd’hui, le framework est dans sa version 2.4.2.

Une PWA pour son site e-commerce, oui mais c’est quoi ?

Une Progressive Web App (souvent nommée « PWA » ou « applications web progressives » en français), dans sa définition propre, représente un ensemble de technologies (HTML/JavaScript) utilisées au sein d’un site web permettant de rendre une expérience utilisateur au plus proche d’une application native dite classique.

Concrètement, la PWA permet de :

  • Offrir une expérience utilisateur offline (hors-ligne), c’est à dire pouvoir continuer de naviguer sur le site même si la connexion internet est interrompue.
  • Offrir une expérience intégrée et fiable, reproduisant le comportement d’une application native.
  • Envoyer des push notifications à l’utilisateur final, pour lui notifier par exemple l’expédition de sa commande ou lui signaler que son produit favori est en promotion.
  • Offrir une expérience pensée pour le mobile.
  • Avoir un engagement utilisateur plus élevé via par exemple la possibilité d’ajout à l’écran d’accueil.
  • Avoir une expérience sécurisée, toujours à jour, ne nécessitant pas d’installation…

Les critères clés pour une PWA :

  • Être sécurisée, une PWA ne peut fonctionner sans un site sécurisé via HTTPS.
  • Fonctionner hors connexion ou, a minima, pouvoir continuer d’afficher une page même sans connexion internet, via le service worker.
  • Avoir un manifest.json permettant au navigateur d’indiquer au navigateur web du client comment se comporter avec ce site.

Le développement d’une PWA peut aussi permettre de mettre en place une architecture moderne, flexible et adopter une approche headless.

Pour aller plus loin

Maximiser l’expérience utilisateur en choisissant le bon format mobile

Télécharger le guide complet

Qu’est-ce que le headless ?

Une architecture headless est une approche visant à découpler la donnée (API) de la présentation (interface utilisateur). C’est à dire que le système de gestion de la donnée (par exemple un produit ou un catalogue) et du contenu se trouve au sein même de Magento et est administré de façon classique via l’interface administrateur et que ces données sont exposées via les API native de Magento.

Ensuite c’est un autre applicatif dédié au front, à l’interface utilisateur, qui, par des appels réseaux REST ou GraphQL effectués à l’API de Magento, vient consommer la donnée, la traiter puis l’afficher.

Pourquoi faire du headless en e-commerce ?

L’architecture headless est intéressante du fait de son découplage entre la donnée et l’interface. Cela permet par exemple d’ouvrir la voie aux déploiements sans interruption de service (zero downtime deployments). Cela permet aussi de garder une séparation des préoccupations, ce qui est un principe logiciel définissant que chaque application a un rôle bien précis.

Traditionnellement, dans un CMS couplé aussi appelé monolithique, nous retrouvons au sein de la même application :

  • la base de données ;
  • le back office où le contenu est créé ;
  • le front office permettant d’afficher le site.

Dans notre exemple, Magento utilisé en headless fonctionne en tant que système de gestion du contenu. C’est à dire qu’il met à disposition et fournit des informations via ses APIs. Parallèlement, une application frontend permet la consommation de ces APIs afin de construire et présenter les pages à l’utilisateur final. Concrètement, nous pouvons « schématiser » ainsi :

Magento :

  • Une base de données.
  • Un back office où le contenu est créé.
  • Une API exposant les données.

Le front en PWA :

  • Un  front office permettant d’afficher le site.
  • Un connecteur API permettant d’aller chercher la donnée.

Les plus, les moins de Magento en mode headless ?

Comme déjà mentionné plus haut, l’utilisation de Magento en mode headless (découplé) permet de nombreux avantages dont en voici les plus significatifs :

  • Flexibilité : en effet, la liberté est totale d’un point de vue front-office et permet de créer un site adapté à votre besoin. L’API appelant les données nécessaires, il reste libre à la conception de penser un parcours différent et sur mesure.
  • Compatibilité : il devient plus simple de gérer les montées en version ou bien de changer, par exemple, de solution pour la partie uniquement CMS éditorial.
  • Scalabilité/évolutivité : avec une stack technique telle que celle-ci, la scalabilité est plus simple et les coûts peuvent en être réduits, par exemple en cas de forte charge lors d’une opération marketing, les serveurs ayant le plus de travail peuvent être étendus simplement et rapidement ; la maintenance du socle applicatif est plus aisée.
  • Agilité : avec ce découplage, vous pouvez bénéficier davantage de souplesse pour, par exemple, travailler un nouveau parcours, préparer l’API au sein de Magento dans un sprint puis travailler son rendu côté frontend dans un autre sprint de façon fluide et organisée.
  • L’expérience développeur : cette expression signifie que les développeurs bénéficient des dernières technologies possibles, permettant de bénéficier d’un écosystème large car contribué via le monde de l’Open Source, moderne et sécurisé.

Quant aux inconvénients, même s’ils sont moins nombreux, ils méritent d’être cités :

  • Stack technique moderne nécessitant une expertise technique.
  • Perte de l’avantage de modules tierces Magento, puisque le CMS ne gère plus l’HTML et la partie frontend, les modules permettant d’influer sur le front-office ne sont pas pris en compte et peuvent nécessiter un développement spécifique.

Pour aller plus loin

Progressive Web Application : comment placer l'utilisateur au cœur de sa conception

Visionner le webinar

Un besoin de réaliser une PWA avec une architecture headless ?

Nous sommes là pour vous accompagner !

Il est possible de travailler sur des applications PWA et Magento headless sans perdre la tête, à condition d’être bien accompagné en termes d’architecture technique, de conseil et de réalisation.

En tant que partenaires et intégrateurs Magento depuis plus de 11 ans, nous sommes en mesure de vous fournir le soutien nécessaire. Kaliop pourra vous accompagner dans le conseil, la conception et la maintenance de vos sites e-commerce. Contactez-nous via le formulaire de contact !

Benoît Emile

Benoît Emile

Responsable Technique Front chez Kaliop

Commentaires

Ajouter un commentaire

Votre commentaire sera modéré par nos administrateurs

Vous avez un projet ? Nos équipes répondent à vos questions

Contactez-nous