Annoncé il y a deux ans comme le nouveau front-end pour Magento / Adobe Commerce, le projet PWA Studio fait l’objet d’une grande attention de la part de la communauté. L’Agence Dn’D, comme à son habitude, essaie toujours de suivre l’évolution des frameworks intéressants de l’écosystème Digital, afin de répondre parfaitement aux besoins de ses clients. Le choix des technologies est un véritable challenge, car nous nous efforçons de concilier à la fois les besoins business, le budget mais aussi le confort pour les développeurs, sans oublier la maintenabilité des solutions.
Spécialisé dans le E-Commerce et le digital depuis plus de 15 ans, Dn’D est un partenaire historique de la solution Magento / Adobe Commerce. En se basant sur notre expérience dans l’accompagnement d’e-marchands et sur notre expertise technique, nous souhaitons vous aider à comprendre pourquoi PWA Studio est un outil particulièrement intéressants pour mener à bien vos projets E-Commerce !
La composition de PWA Studio
React : la bibliothèque JavaScript développée par Facebook
Nous pensons qu’une technologie à elle seule ne fait pas forcément un bon projet. Ainsi, nous avons la conviction qu’il est nécessaire d’éprouver les différentes solutions que nous choisissons avant de les utiliser concrètement dans nos projets de production. Nous n’avons donc pas de parti pris, ni d’affinité particulière pour une technologie précise. Lorsqu’un choix se présente, nous nous renseignons sur l’origine de la solution, les raisons qui ont mené à la genèse du projet, et nous n’hésitons pas à l’installer pour mieux l’étudier, avant de la valider si cela s’avère concluant. Pour PWA Studio, nous sommes en présence de deux piliers solides : Adobe et React.
Quoi que l’on puisse reprocher à la bibliothèque JavaScript développée par Facebook, elle reste rassurante. On sait que la communauté de React est importante, que le projet s’inscrit dans la durée et surtout que, par expérience, de gros projets front-end sont réalisables et maintenables en utilisant cette technologie. On peut également avoir confiance envers les contributeurs du projet, car ce sont des développeurs reconnus sur la technologie React et sur Magento / Adobe Commerce.
API GraphQL : une alternative aux APIs REST
À partir du moment où le front-end est une application JavaScript, il devient quasiment impossible de passer de la donnée autre que par un système d’API. Le back-end et le front-end se retrouvent comme deux entités complètement indépendantes, communiquant à travers un lieu commun standardisé. De plus en plus populaire, et remplaçant même très souvent les APIs Rest, les APIs GraphQL ont vraiment le vent en poupe !
Créé afin de réduire le nombre de requêtes sur le serveur, le format des APIs GraphQL séduit beaucoup les développeurs front-end, car l’API force le traitement des données côté back-end, afin qu’elles soient servies en un seul appel. On libère ainsi du temps passé à traiter la logique pour se concentrer sur l’aspect UI (= User Interface). Le choix de PWA Studio pour le front-end a donc un fort impact sur le back-end : il faut s’assurer que toutes les données seront bien disponibles via l’API. Heureusement les dernières versions de Magento / Adobe Commerce vont dans ce sens et il est assez facile d’ajouter des fonctionnalités supplémentaires.
Qui dit PWA, dit Headless ?
Bien souvent confondues, il existe tout de même une grande différence derrière ces deux notions.
D’un côté, la PWA indique une application indépendante qui communique avec un back-end via une API. L’architecture Headless se base exactement sur ce principe ; il est donc naturel de les confondre. C’est surtout concernant la vocation de chacune de ces technologies que les dénominations se distinguent davantage. En effet, la PWA a pour objectif de proposer une expérience utilisateur optimisée, tandis que le Headless cherche à convenir au sein d’un même applicatif à plusieurs inputs (= de multiples back-end) et de multiples outputs (desktop, mobiles, etc..).
À l’heure actuelle, le projet PWA Studio est bel et bien un projet destiné à créer un front-end (= projet PWA) pour Magento / Adobe Commerce. Il n’a pas vraiment l’ambition que peut avoir Vue Storefront (= projet Headless), mais cela fait partie de la roadmap de la solution. Aujourd’hui, la principale motivation qui amène au choix de ce framework est un besoin dont la priorité est l’expérience utilisateur.
Magento et le système de surcharge
Pour toutes les personnes qui travaillent sur Magento, il y a une évidence : le système de surcharge, bien que parfois lourd, permet de faire évoluer la plateforme de façon infinie, tout en garantissant la possibilité d’effectuer une montée en version du code source natif. Cela est nécessaire pour l’ensemble de nos projets afin d’en assurer la pérennité.
Concernant la partie technique, autant Vue Storefront fournissait une documentation complète, autant le fonctionnement de PWA Studio était peu mis en lumière, ce qui nécessitait davantage de pratique afin de comprendre l’ensemble du code. Même si, aujourd’hui, une grande partie de la documentation de PWA Studio existe en ligne, ce n’était pas le cas il y a un an de cela. Le côté positif est que cela a abouti à l’écriture d’une documentation et à des supports de formation spécifiques en interne chez Dn’D.
Notre expérience dans le développement web de la plateforme E-Commerce Zadig & Voltaire nous a permis d’avoir une approche critique et précise à l’égard de ce que nous attendions d’une PWA pour Magento / Adobe Commerce. Même si le projet est jeune, nous n’avons pas déçus. Le code est propre, hyper organisé, selon un schéma simple, répété sur l’ensemble de l’applicatif, logique. Et surtout, grâce aux hooks de la librairie Tappable, on note la présence d’un système de surcharge des fichiers natifs, ce qui fait que nous ne modifions pas le code source. Les packages se comportent comme une librairie et non comme un framework : pour nous, cela fait une grande différence. Nous avons, au passage, développé un module permettant de simplifier cette fonctionnalité, mais aussi de l’étendre à d’autres packages comme les modules Amasty, ou encore la librairie React-slick, dont nous avons dû réécrire certaines briques pour la rendre accessible. Le module permet, comme nous le faisons dans Magento/Adobe Commerce, de créer une structure de fichiers et dossiers qui miment le natif, de façon à venir modifier le code d’origine uniquement à la compilation grâce à Webpack.
Doucement… Mais sûrement ?
Chez Dn’D, nous avons une devise : ne surtout pas se précipiter ! Cependant, nous mettons en place régulièrement des chantiers internes afin d’être très réactifs aux différentes évolutions de l’écosystème Digital. Cela permet, au moment voulu, d’être bien préparé, mais aussi de répondre activement et sereinement aux besoins de nos clients. Récemment, nous avons dû répondre rapidement à la demande de l’un de nos clients, avec des délais assez courts, notamment entre l’étude du projet et le commencement de la phase de production. Heureusement, cela faisait déjà plusieurs mois que nous analysions la solution PWA Studio.
Nous en avions beaucoup parlé au sein du Pôle Technique, nous étions donc très impatients. Nous avons la chance d’avoir la confiance de nos clients, avec lesquels nous travaillons main dans la main, ce qui nous permet de réaliser des projets toujours plus innovants. Le fait de travailler sur une nouvelle technologie peut représenter un risque, mais nous avons compris qu’avec une bonne préparation et des équipes impliquées, nous arrivons à atteindre des résultats plus que positifs. Dans notre travail de recherche, d’écoute et d’analyse, nous pouvons donc valider la solution PWA Studio parmi notre panel de solutions front-end !
Vous êtes intéressé par PWA Studio et/ou par Magento ?
En tant qu’agence certifiée Magento, Dn’D vous accompagne dans le conseil, la conception et la maintenance de votre plateforme E-Commerce. N’hésitez pas à nous contacter via le formulaire ci-dessous !