Lecture 10 minutes
Rappelons le contexte :
Ces dernières années, la croissance exponentielle des utilisateurs de téléphone portable à travers le monde a explosé, à tel point qu’aujourd’hui, plus de 63% de l'utilisation totale d’internet se fait depuis un téléphone. Le nombre d’utilisateurs de téléphone portable devrait atteindre 2,87 milliard en 2020. Cette tendance montre qu’il est capital de mettre l’accent sur l’optimisation de l'expérience utilisateur sur mobile.
Côté utilisateurs, si ces derniers se sentent de plus en plus à l’aise avec le fait d’acheter via leur mobile, une vaste majorité déclare fuir une application mal conçue, difficile à utiliser ou trop lente.
Qu’est-ce qu’une PWA ?
Une PWA (pour Progressive Web Application) est une application web qui intègre des pratiques propres au développement web moderne et des fonctionnalités jusque là réservées aux applications natives sur mobile, celles que l’on télécharge depuis l’AppStore ou le PlayStore.
Par exemple, si vous utilisez l’application Facebook, vous savez que vous pouvez l’utiliser hors-ligne et avoir quand même accès à du contenu. Vous pouvez même liker et commenter les photos de chats de votre grand-mère et lorsque vous récupérerez la connexion vos actions seront transmises automatiquement en tâche de fond.
La promesse de la PWA est la suivante : proposer une expérience au moins équivalente à une application native, sans avoir à la télécharger ni à l’entretenir avec des mises à jour.
Les fonctionnalités d’une PWA
Une PWA propose une série de fonctionnalités qui manquent en général aux applications web classiques.
- Rapide
Le contenu doit être délivré le plus rapidement possible et les changements de pages, les mises à jour de contenu et de disposition de la page ou encore les scrolls doivent être extrêmement fluides. L’application doit pouvoir s’ouvrir et se fermer quasi instantanément et doit être capable de délivrer du contenu même en étant hors-ligne ou sur des connections à bas débit. - Responsive
L’application doit s’adapter à toutes les tailles d’écran : de mobile à bureau et tout ce qui peut exister entre deux et au delà. - Installable
Pour rendre les applications web proches des applications natives, elle doivent pouvoir être installées et accessibles en un clic depuis l’écran d’accueil du téléphone. - Compatibilité
Contrairement à une application native, la PWA ne souffre pas de problème de compatibilité entre Android et iOS. Par contre elle doit pouvoir fonctionner de façon équivalente sur tous les browsers (Chrome, Firefox, Safari…). - Optimiser l’engagement des utilisateurs
La PWA a une approche offline first, elle peut se lancer en full-screen, se lancer depuis une icône sur l’écran d’accueil et même supporter les notifications push. On peut aussi partager les pages d’une application web, contrairement à une application native.
Magento et la PWA
Il y a quelques mois, Magento a annoncé son intention de donner la possibilité aux développeurs de créer des storefront PWA sur leurs sites Magento ( >= 2.3) en mettant à leur disposition une boîte à outils : PWA Studio.
Actuellement, PWA Studio contient trois entités distinctes :
- Pwa-buildpack
Il contient la base principale et les outils de développement (serveur de développement, webpack, etc...). - Peregrine (en cours de développement)
C’est une collection de composants d’UI modulaires. Il faut entendre par là qu’elle contient des composants React réutilisables et personnalisables tels que Header, ProductDetails, Search, etc. - Venia Storefront
C’est un storefront que Magento développe pour servir de preuve de concept à sa solution de PWA.
Etat des lieux : cette solution est-elle suffisamment mature ?
Si la question que l’on se pose est de savoir si la solution de PWA de Magento est prête pour la production, on peut analyser les fonctionnalités e-commerce qui sont disponibles aujourd’hui sur PWA Studio. D’après ce que Magento communique sur la roadmap de ce projet on peut établir la liste suivante :
| Phase 1 (2018, janvier/avril) | |
|---|---|
| Produits (simples et configurables) | |
| Catégories | |
| Panier | |
| Checkout (basique) | |
| Phase 2 (2018, mai/août) | |
| Homepage | |
| Adresse de livraison | |
| Méthodes de livraison (statique) | |
| Méthode de paiement (chèque) | |
| CMS Blocks | |
| CMS Pages | |
| Compte utilisateur (création et gestion) | |
| Contenu offline basique (web app manifest et service worker) | |
| Phase 3 (2018 septembre/décembre) | |
| Recherche avancée de produit | |
| Historique d'achat et récapitulatif de commande par utilisateur | |
| Méthode de paiement (carte de crédit via Braintree) | |
| Support pour Magento Commerce Cloud | |
| Triage et filtre pour les listings catégorie | |
| Produits (bundled, virtual, gift card) | |
| Gestion d'adresses | |
| Wishlist | |
| Codes promo | |
| Carte cadeau | |
| Souscription à la newsletter | |
| Store credit et points de fidélité | |
| Phase 1 (2019, janvier/avril) | |
| Bibliothèque de composants d'UI modulaires (Peregrine) | |
| Phase 2 (2019, mai/août) | |
| Ajout et migration d'éléments de Venia vers Peregrine | |
| Support pour la Marketplace Magento | |
| Phase 3 (2019, septembre/décembre) | |
| Intégration du Page Builder | |
| Intégration d'Adobe Experience | |
En 2018, Magento avait pour but de délivrer le plus de contenus possible sur sa preuve de concept, le storefront Venia. On pourrait penser que Magento ferait de Venia un nouveau thème générique tel que Luma - qui servirait de base et serait étendu par d’autre thèmes personnalisés comme c’était le cas jusqu’ici pour le développement frontend sur cette plateforme - mais ce n’est pas le cas ! Pour le comprendre, il faut bien saisir la distinction que fait Magento entre thème et storefront.
Old School vs New School
Thème et Storefront
Le thème est la partie de Magento qui définit l’aspect du site. Il fait partie de son fonctionnement interne et ses fonctionnalités sont profondément liées au coeur de l’application. Un thème Magento hérite toujours d’un thème parent pour étendre ses fonctionnalité, avec au sommet de la chaîne d’héritage le thème Blank qui fournit une base de fichiers qui seront étendus, écrasés et customisés par les développeurs pour construire leurs thèmes.
Un storefront tel que Venia n’est pas un thème Magento. C’est une PWA, une application à part entière qui communique avec un backend Magento “headless”. Le storefront n’hérite pas d’un thème, il est composé de modules React qui prodiguent les différentes fonctionnalités. Ces modules peuvent être échangés, ajoutés et supprimés pour composer l’application.
Héritage contre modularité
Ce sont deux approches différentes concernant la réutilisation de code.
L’avantage de l’héritage, c’est que le thème dispose dès le départ de toutes les fonctionnalités de son thème parent. Mais l'inconvénient c’est qu’il est couplé de façon très étroite avec toute sa chaîne d’héritage. Cela signifie qu’une mise à jour ou un changement de comportement de la part d’un thème parent peut entraîner des dégâts inattendus sur toute sa descendance.
L’approche modulaire pousse le développeur à construire son storefront à partir de rien, grâce à des modules React qu’il pourra assembler de façon plus flexible. L’indépendance des modules les uns par rapport aux autres leur permet de ne pas être autant exposés à des effets secondaires lors de mises à jour. L’idée est aussi de permettre aux développeurs de pouvoir réutiliser des modules très facilement d’un storefront à l’autre.
Si l’on regarde la roadmap de Magento, on peut voir que le but de l’éditeur à court terme n’est plus de créer un storefront totalement fonctionnel mais bien de constituer une bibliothèque de modules React (Peregrine) aussi complète que possible pour que les développeurs aient à leur disposition tous les outils dont ils ont besoin pour créer eux même leur storefront.
On peut observer dans l’évolution du projet une pause temporaire dans le développement de Venia au profit de Peregrine. Les travaux actuels consistent à faire la migration de toutes les fonctionnalités dont dispose Venia pour les traduire en module de Peregrine, constituer et enrichir une base de composants solide et les réintégrer ensuite sur Venia sous cette forme.
Différences de technologies
Enfin, un point crucial à considérer pour envisager le démarrage de projets en PWA sur Magento est la stack technique requise par les développeurs.
| Le développement de thèmes Magento nécessite les compétences suivantes | La stack pour développer un storefront grâce aux outils de PWA Studio |
|---|---|
| PHP | Javascript |
| JavaScript | React |
| jQuery | Redux |
| Knockout.js | GraphQL |
| CSS, LESS | webpack |
| XML | CSS, LESS |
| Layouts Magento | JSON |
| Templates Magento | Peregrine |
| Magento UI library | Yarn |
| Magento UI components | - |
| Composer | - |
L’écart est assez grand, les différences de paradigmes (héritage/modularité) et de stack de technologies demandent de la part des développeurs frontend un tout nouvel ensemble de compétences.
Conclusion
Alors, le PWA Studio est-il prêt ?
Venia dispose, pour l’instant, des fonctionnalités de base d’un frontend Magento : fiches produit, catégories, panier, compte client, tunnel de paiement, recherche, etc. Cette preuve de concept a déjà accompli son but à court terme.
Magento a visiblement l’intention de mettre l’accent sur Peregrine, sa bibliothèque de modules React. Elle est encore loin d’être complète mais d’après les travaux en cours sur le projet il est clair que c’est la nouvelle priorité.
Verdict : avec une équipe efficace en React il est possible aujourd’hui de lancer le développement d’une PWA.
Quelques points sont à prendre en compte tout de même. L’abandon de l’approche par héritage au profit de l’approche modulaire promet certes des gains de productivité, mais ce uniquement à moyen et long terme. En effet, il faudra bien que les modules personnalisés soient développés une première fois avant d’être réutilisés, et les premiers projets devront intégrer dans leurs temps de développement la mise au point de ces modules.
Il sera quoi qu’il en soit nécessaire de développer certaines fonctionnalités d’e-commerce qui manquent encore à Peregrine, la collection de modules livrée avec PWA Studio. De surcroît, il faudra composer avec l’instabilité d’une solution en plein développement.
La solution PWA Studio est donc encore incomplète mais déjà utilisable, et il est clair que Magento prend les enjeux de la PWA très au sérieux donc son évolution paraît très prometteuse.
