Lecture 6 minutes

Depuis 2021, Hyvä révolutionne le monde du développement front-end sur Magento 2 et Adobe Commerce. La solution propose une suite de services pour réduire la complexité et les temps de développement et pour atteindre de meilleures performances. Hyvä Theme, Hyvä Checkout, Hyvä Enterprise, Hyvä UI et Hyvä Edge... Zoom sur cette solution qui fait l'unanimité.

Hyvä vs. Luma : pourquoi Hyvä fait l’unanimité ?

Les solutions techniques front-end utilisées nativement par Magento 2 et Adobe Commerce sont lourdes, vieillissantes, voire même, pour certaines, obsolètes. Elles provoquent de nombreuses requêtes serveur qui ralentissent considérablement les performances, et empêchent donc d’obtenir un score de performance élevé. Impossible de rectifier ce score sans ouvrir d'importants chantiers. En conséquence, Hyvä a fait le choix de modifier complètement la stack technique du développement front-end. Son thème Hyvä Reset effectue un grand nettoyage de printemps dans les fichiers des thèmes natifs. En utilisant le système de réécriture de layouts, Hyvä Reset remplace simplement l'intégralité des layouts utilisés par des fichiers vides - tous les appels étant commentés - afin de se débarrasser de la totalité des dépendances et librairies comme RequireJS, jQueryUI ou KnockoutJS.

Hyvä ne remplace pas seulement les technologies utilisées pour le JavaScript, elle fait également le ménage pour le CSS en supprimant l’utilisation du préprocesseur LESS. Ceci au profit d’un développement plus simple et d’un fichier final plus léger grâce à Tailwind. Hyvä Theme, s'il n'utilise plus la stack front native, continue de fonctionner avec les outils tels que les ViewModels, les Layouts et les Blocks.

Quels sont les outils choisis par Hyvä ?

Comme expliqué précédemment, Hyvä se tourne vers des alternatives légères et faciles à manipuler pour les développeurs qui travaillent sur ce thème. Alpine JS et Tailwind CSS facilitent la personnalisation et améliorent la maintenabilité par rapport aux technologies fastidieuses utilisées par Luma.

Alpine JS

Alpine JS est un framework JavaScript réputé pour sa légèreté et sa puissance. Il permet de réaliser une application réactive avec une simplicité exemplaire. Ce framework est minimaliste puisqu'il ne comporte que de quinze attributs, six propriétés et deux méthodes.

Les attributs se greffent directement sur le DOM HTML, qui est toujours imbriqué dans les fichiers .phtml d'Adobe Commerce. Avec les propriétés ainsi que les méthodes, ils forment un ensemble de composants pouvant communiquer entre eux, à l'instar de ReactJS ou de VueJS.

Tailwind CSS

Pour ses styles, Luma charge deux fichiers distincts : styles-l.css et styles-m.css, résultant de la fusion de l'ensemble des styles mis en œuvre pour le rendu de la page. Hyvä n’en charge qu'un seul (styles.css), nettement moins lourd. Cela a pour effet de réduire le TTB (Total Blocking Time) et d’augmenter significativement les notes attribuées par Google.

Cela est possible grâce à Tailwind CSS. En plus de ne générer qu’un seul fichier CSS, Tailwind CSS permet à l'application de réduire drastiquement les ressources CSS en proposant des classes génériques réutilisables. Ces classes contribuent à la facilité de développement. En effet, les développeurs n'ont plus qu'à renseigner les classes génériques directement dans le fichier .phtml afin d'obtenir le rendu souhaité, sans alourdir la feuille de style.

MageWire

Toujours dans cette idée de performances et dans la solution Hyvä Checkout, MageWire a remplacé KnockoutJS. MageWire est un portage de la célèbre bibliothèque Laravel Livewire vers Magento. Il a été développé par Willem Poortman, développeur d’Hyvä Checkout.

Contrairement à KnockoutJS, MageWire apporte de la simplicité au tunnel. Il supprime ainsi la lourdeur et la lenteur du thème Luma.

Quid de la personnalisation avec Hyvä

Nous avons vu que Hyvä Theme assure une web performance digne de ce nom. Mais la solution fait également ses preuves concernant la facilité de prise en main et de personnalisation des plateformes utilisant ce thème. Hyvä Theme est plus accessible et modulable que son ancêtre Luma. Avec la simplicité de développement prodiguée par les technologies utilisées, Hyvä Theme donnent aux développeurs la liberté de personnaliser comme ils le souhaitent le rendu front-end de la plateforme.

Hyvä Theme possède un fichier tailwind.config.js contenant l’intégralité de la personnalisation CSS. Il est possible de créer de nouvelles classes que Tailwind CSS va générer dans styles.css, le seul fichier .css qui sera chargé par le thème. De plus, la facilité de prise en main et la maintenabilité améliorée permettent, à terme, un gain de temps non négligeable sur la réalisation des tâches les plus courantes sur une plateforme Adobe Commerce. C’est donc un argument supplémentaire quant au choix de la solution à adopter lors de la réalisation d’une plateforme e-commerce haut-de-gamme.

La grande communauté d’Hyvä

Si Hyvä Theme change l’intégralité de la stack front du développement de Magento 2 / Adobe Commerce, cela a évidemment nécessité beaucoup d’adaptations des modules existants, que ce soit ceux natifs ou ceux proposés par des partenaires. Depuis son lancement début 2021, Hyvä Theme fédère une communauté qui ne cesse de croître. Les partenaires Magento 2 / Adobe Commerce se sont beaucoup investis dans le développement de Hyvä Theme qui semble, aux yeux de la majorité des développeurs, être la solution de toutes les plateformes monolithiques Magento 2 / Adobe Commerce.

Les fondateurs de Hyvä ont créé un canal Slack pour aider et guider les nouveaux développeurs sur la solution. Les délais de réponse très rapides permettent aux problématiques les plus complexes d’être investiguées rapidement. À ce jour, plus de 4 000 membres actifs utilisent ce canal Slack dédié au développement sur Hyvä. Les partenaires de la solution partagent les sorties de leurs prochains modules ainsi que leurs roadmaps. Par ailleurs, les communautés s’affairent à rendre compatibles de nombreuses fonctionnalités encore non traitées. En exemple de la dévotion de cette communauté, nous pouvons citer React Checkout. React Checkout, est une solution développée par la communauté et mise officiellement à disposition sur le répertoire gitlab de Hyvä. C’est une solution qui permet de bénéficier, comme son nom l’indique, d’un tunnel de commande basé sur ReactJS.

Promesses tenues : des résultats exceptionnels !

En conclusion, Hyvä s’impose comme une solution incontournable pour le développement front-end sur Magento 2 / Adobe Commerce. Grâce à ses innovations techniques elle parvient à allier rapidité, flexibilité et une expérience développeur/utilisateur optimale. Sa communauté grandissante et engagée témoigne du potentiel durable de cette solution. Elle offre un écosystème évolutif et soutenu par une forte collaboration entre développeurs et partenaires. Hyvä révolutionne la manière dont les plateformes Magento 2 / Adobe Commerce seront intégrées. Elle ouvre la voie à de nouvelles perspectives pour le futur de l'e-commerce.