par Kevin, Consultant Magento pour l’Agence Dn’D
Le 4 octobre dernier a eu lieu la Reacticon V2 aux Pays-Bas. Cette conférence présente les nouveautés de développement frontend qui seront disponibles dans les futures versions de Magento, mais aussi d’autres projets communautaires.
Une deuxième édition qui a particulièrement mis l’accent sur la Progressive Web Apps qui sera intégrée dans la version 2.3 de Magento, tout comme les frameworks Javascript modernes.
Notre partenaire Magento était très bien représenté par Eric Erway (Chef de produit senior), Anton Krill (Directeur d’architecture), James Zetlen (Architecte frontend senior) et Andrew Levine (Architecte frontend).
Découvrez dès maintenant notre retour sur cette journée de conférence.
Les nouveautés Magento
Andrew Levine commence par expliquer comment les performances de Magento vont être améliorées en y intégrant Webpack. Le but est de packager les ressources javascript communes à toutes les pages et celles qui sont spécifiques à chaque page tout en mettant en place un système de Lazy loading (affichage du contenu visible en priorité, puis des autres éléments).
Eric Erway intervient ensuite sur les défauts du frontend actuel de Magento 2 et présente sa réflexion pour y remédier. Il arrive donc à la conclusion que les technologies utilisées (knockout.js…) ont été dépassées par d’autres solutions et que les performances sur mobile ne sont pas à la hauteur (score 54% sur Google Lighthouse).
C’est pour cette raison que Magento s’est rapidement intéressé aux PWA et a lancé PWA Studio dans le but de permettre à la communauté de contribuer à l’intégration des PWA dans Magento 2. C’est à cette occasion que le nouveau thème Venia a été créé.
A noter qu’une attention toute particulière est portée à la documentation et la simplicité d’utilisation pour les développeurs.
James Zetlen n’ayant pas pu faire le voyage à Eindhoven, a tout de même réalisé sa conférence à distance. Il introduit alors le système UPWARD, pour Unified Progressive Web App Response Definitions, présent dans PWA studio v2.0. Il s’agit en fait d’une passerelle qui utilise des fichiers de configuration .yml, qui eux-mêmes contiennent les directives (requêtes HTTP vers une page catégorie, produit, cms…) auxquelles le serveur doit répondre. La compilation de ces fichiers s’effectue avec npm ou npx (version allégée). Ce point unique de communication a été mis en place afin de ne pas dépendre d’un serveur backend dans le cas, par exemple, d’un chargement offline avec PWA.
Quoi de neuf du côté des projets communautaires PWA ?
Pierre Martin, Lead developer chez Front Commerce a annoncé la mise à disposition de Front Commerce Lite afin de pouvoir tester les fonctionnalités de leur framework propriétaire. Ce dernier est totalement compatible avec GraphQL et intègre ReactJS pour les composants UI. Pierre Martin introduit alors GraphQL et en présente les avantages par rapport aux appels API Rest tel que la possibilité de récupérer un ensemble d’objets et de paramètres en ne spécifiant que ceux qui sont nécessaires via un schéma de données (au format json) en un unique appel.
Mais un inconvénient apparaît : les outils de mise en cache serveur comme Varnish ne fonctionnent pas avec ce système car les requêtes sont exécutées en POST. Cependant Apollo Server, un serveur HTTP Node.js qui fonctionne avec GraphQL et communique avec des resolver, intègre un système de cache. Depuis peu, il est également possible d’utiliser un CDN pour délivrer des résultats de requêtes avec GraphQL. Aussi, une correspondance des données est réalisée entre le backend et le frontend grâce au typage de données. Ainsi les développeurs peuvent travailler en parallèle chacun dans leur spécialité (ajout simple de données tests possible).
E-Commerce:
- 7 sites en production
- 25 partenaires
- et de plus en plus de contributeurs au projet, qui est devenu open source depuis l’année dernière
Ce dernier est basé sur Vue.js et utilise une base de données NoSQL pour communiquer avec l’API Vue StoreFront. Il est fonctionnel hors ligne et utilisable avec des commandes vocales. Il est prêt à être utilisé en production depuis le mois de juillet, le support de GraphQL est maintenant disponible et AMP le sera prochainement.
Une autre annonce importante vient ensuite : la préparation de la version 2 de Vue Storefront qui inclut un tout nouveau thème compatible avec l’ancien et offre la possibilité d’ajouter des composants React et Angular. Cette nouvelle version qui améliore également les performances, l’expérience utilisateur et le degré de personnalisation des composants UI, sortira normalement au premier trimestre 2019.
Jamie Marie Schouren, DG de Deity annonce officiellement le lancement de la solution en open source sous le nom de Deity falcon. C’est à la fois une librairie et un framework permettant de développer des PWA en headless.
Mateusz Woźniak, Lead developer chez Deity, nous décrit le projet. Celui-ci est composé de librairies modulable pour chaque plateforme (E-Commerce, blog, etc). Les principes fondamentaux de flexibilité, d’intégrabilité, de fiabilité et de modularité sont appliqués. En d’autres termes, ces librairies doivent être le plus flexible possible, s’intégrer à n’importe quelle application et être personnalisable pour chaque projet.
Deity Falcon est basé sur Node.js et fonctionne avec Falcon server (lui-même basé sur Apollo Server pour GraphQL). Le serveur frontend intègre Webpack, SSR (profiling, analyse des performances) et Apollo Link State (utilisation des données API en cache). Falcon UI utilise React pour la gestion des composants UI (List, Button, Details…). Une interface permet de modifier ces composants à la volée, de créer des presets, le tout en Javascript.
Bram van de Sande, Architecte de projet, nous parle de l’architecture orientée service (SOA), autre principe appliqué aux librairies de Deity Falcon. L’objectif est d’isoler les règles fonctionnelles dans des services indépendants afin de les rendre plus compréhensibles.
Deity Falcon fonctionne actuellement avec Magento 2, WordPress, Algolia et ShipperHQ.
Les autres frameworks et outils de développement
L’implémentation de Vue.js dans Magento 2
Mārtiņš Saukums, développeur chez Bitbull, nous montre une implémentation simple de Vue.js dans Magento 2 via le module de newsletter natif. Il recommande d’utiliser Vue.js pour simplifier les modifications à réaliser en vue d’une adaptation avec la nouvelle version de Magento 2 qui intégrera les PWA.
Javier Villanueva, Lead Front End Developer chez Media Lounge, présente l’outil de end-to-end testing Cypress.io en insistant sur le fait que les tests unitaires et fonctionnels ne sont pas suffisants car ils ne reflètent pas un parcours utilisateur réel. Cypress.io permet entre autre de réaliser un parcours client visuel avec la possibilité de débogage à chaque étape, de retour en arrière, de pause, d’accélération, de screenshots, de vidéos… Seulement quelques lignes de codes sont nécessaires pour effectuer des scénarios de test.
Bartek Igielski, Lead Front-end Developer chez SnowdogApps fait une démonstration de l’utilisation de Storybook, un outil qui permet de tester des composants Javascript en live.
Il permet donc de tester les différents états de composants React et Vue.js, de les modifier directement, de changer les données, de prendre des screenshots. Enfin, il intègre un système de logs dans la console du navigateur.
Conclusion d’une journée riche pour les développeurs Magento
Reacticon V2 a été une journée riche en annonces et en nouveautés tant au niveau de la version 2.3 de Magento que des projets indépendants déjà compatibles avec la PWA.
Et pour finir Jisse Reitsma, organisateur de Reacticon, annonce officiellement la seconde édition de Mage Test Fest, une conférence sur le thème de l’automatisation des tests qui aura lieu les 7 et 8 mars 2019 en Italie.
The opening video of #reacticon is now online for your nerd pleasure https://t.co/c8Jtf41G1R
— Reacticon (@reacticon) 7 octobre 2018