Notre blog

Hyvä : le nouveau front-end révolutionnaire pour Adobe Commerce !

BannerVS - Hyvä

La stack JavaScript d’Adobe Commerce (Magento Commerce) est un empilement de librairies (KnockoutJS, Jquery, RequireJS, UI Components..) qui apporte une grande complexité et peu de flexibilité. Cela impacte aussi les performances des sites E-Commerce, dans le sens où il est nécessaire de charger un nombre important de données JavaScript dans les pages, pour n’en utiliser que très peu au final. Hyvä est un outil qui simplifie considérablement cette démarche puisqu’il n’utilise qu’une seule librairie JavaScript : Alpine.js. Cela permet à vos équipes techniques de gagner considérablement en temps et de concevoir des développements de façon plus agréable.

Hyvä a officiellement été lancé le 12 février 2021. Certains s’accordent à dire qu’Hyvä est la version de Luma que les E-Commerçants auraient aimé qu’Adobe Commerce (Magento Commerce) construise. D’autres estiment qu’Hyvä est LE front-end monolithique par excellence pour créer des boutiques en ligne performantes et scalables. Spécialisé dans le E-Commerce depuis sa création en 2004, Dn’D est un partenaire historique de la solution Adobe Commerce (Magento Commerce). À partir de notre expérience dans l’accompagnement d’e-marchands et de notre expertise technique, nous souhaitons vous aider à comprendre pourquoi Hyvä est un outil sur lequel il faudra miser dans les mois, voire dans les prochaines années !

Présentation d’Hyvä

DND - Hyvä Logo

Hyvä (prononcez « Huva ») puise ses origines dans une expérimentation menée par Willem Wigman. Cela s’est transformé en un prototype qui fut adopté par son employeur : integer_net, une agence digitale située en Allemagne, spécialisée dans la création de sites E-Commerce Adobe Commerce (Magento Commerce). À l’heure actuelle, Hyvä est une société à part entière, gérée exclusivement par Willem, et se développe considérablement grâce aux contributions régulières d’integer_net. Dans le cadre d’un effort continu, integer_net est donc le principal partenaire technique de l’ensemble des produits Hyvä. Ces produits permettent aux E-Commerçants de concevoir une expérience front-end optimale pour Adobe Commerce (Magento Commerce 2). Ils regroupent :

  • Hyvä Reset : un module qui vient supprimer tous les templates natifs d’Adobe Commerce (Magento Commerce).
  • Hyvä Themes : une collection de thèmes construits avec Tailwind CSS, Alpine.js et Adobe Commerce « TAM Stack ». La « TAM Stack » est un terme inventé par Willem Wigman, inspiré par la « TALL Stack », utilisée dans l’écosystème du framework Laravel. La « TAM Stack » se compose de Tailwind CSS, Alpine.js et Adobe Commerce (Magento Commerce 2 – plus d’informations dans cet article 😉).
  • Hyvä Checkout : un système de checkout hautement personnalisable pour Adobe Commerce (Magento Commerce) construit avec React.js (il existe aussi un autre module pour fallback sur le checkout natif).
  • Un ensemble de modules complémentaires permettant de garantir la compatibilité d’Hyvä avec des modules tiers.

 
Les thèmes d’Hyvä sont des thèmes d’Adobe Commerce (Magento Commerce 2) construit from scratch, en utilisant un thème complètement vierge. Pour ce faire, tous les fichiers ‘layout.xml’, .’phtml’ et tout le ‘JavaScript’ ont été supprimés, ce qui leur permet de repartir de 0 pour construire une expérience utilisateur centrée sur la performance. Les thèmes d’Hyvä ont seulement deux dépendances par défaut : Tailwind CSS et Alpine.js. Voici quelques exemples de boutiques en ligne Adobe Commerce (Magento Commerce 2) construites avec Hyvä :

 

Quels sont les apports d’Hyvä par rapport aux thèmes actuels d’Adobe Commerce ?


Il faut tout d’abord préciser que la nature par défaut du système de composants d’interface utilisateur d’Adobe Commerce (Magento Commerce) présente quelques forces mais aussi des inconvénients. Non seulement il nécessite énormément de JavaScript, mais il les charge parfois d’une façon qui n’est pas toujours la plus optimisée. En outre, ce processus est difficile à améliorer. La pléthore de composants et les processus associés ralentissent le rendu du front-end.

DND - Hyvä - Catégorie

Exemple d’une page produit dans la démo d’Hyvä Themes (source : integer_net)

Hyvä résout ces problèmes de performance sous Adobe Commerce (Magento Commerce 2) de plusieurs façons : le thème passe par Alpine.js uniquement, ce qui réduit le nombre de fichiers JavaScript devant être chargés par page. Alors qu’un thème Luma standard effectue plus de 250 requêtes réseau sur une page de liste de catégories, Hyvä réduit le nombre de requêtes à 13. Notez que certaines d’entre elles sont associées à des logiciels tiers. Le nombre de requêtes varie en fonction de la complexité de la page. Toutefois, le ratio est toujours suffisamment important pour offrir de bien meilleures performances.

Vous vous dites sûrement qu’Adobe Commerce (Magento Commerce 2) détient tout de même un avantage en termes de gestion de quantité de requêtes. Bien que le bundling d’Adobe Commerce (Magento Commerce 2) soit à votre disposition, les thèmes d’Hyvä sur Adobe Commerce (Magento Commerce 2) sont plus optimisés. En effet, le bundling natif d’Adobe Commerce (Magento Commerce) nécessite une analyse des JS en place et du temps d’optimisation, tandis que cela est natif du côté d’Hyvä, grâce à la technologie et à l’architecture utilisée.

Focus sur les fonctionnalités d’Hyvä avec Vinai Kopp (source : hyva.io)

Quel est le positionnement technique d’Hyvä ?

Hyvä utilise beaucoup d’outils issus de l’écosystème Laravel. Laravel est un excellent exemple d’écosystème PHP qui innove et prospère à un rythme incroyable. L’équipe technique d’Hyvä utilise actuellement Tailwind CSS et Alpine.js pour construire des thèmes front-end performants, rapides et flexibles pour Adobe Commerce (Magento Commerce 2). Bien qu’Hyvä utilise une stack front-end moderne, il y a tout de même beaucoup d’éléments front-end classiques d’Adobe Commerce (Magento Commerce) qui seront familiers à tous ceux qui ont l’expérience des thèmes natifs d’Adobe Commerce (Luma et Blank). En clair, l’équipe technique d’Hyvä utilise tout ce qui lui apporte de la valeur ajoutée et se débarrasse des éléments qu’elle juge encombrants (Knockout / Require / jQuery / Librairies JS).

Tous les produits d’Hyvä sont construits dans le but de réduire les dépendances vis-à-vis des librairies et d’obtenir les meilleures performances possibles. Les concepteurs de l’outil essaient de limiter au maximum la complexité pour réduire le point du code.

Lorsque vous prévisualisez un projet Hyvä pour la première fois, vous découvrez les thèmes Hyva Reset et Hyva Default. Selon Alan Storm, ces deux thèmes ont une relation similaire à celle qui existe entre Magento/Blank et Magento/Luma. Par conséquent, le thème Hyva/Reset est un thème de base sans parent et un thème parent pour Hyva/Default. Dans le même temps, le thème Hyva/Reset et le thème vierge d’Adobe Commerce (Magento Commerce) répondent à des objectifs différents. Le premier supprime entièrement les styles LessCSS d’Adobe Commerce (Magento Commerce) pour mettre en place un environnement CSS basé sur Tailwind CSS. En outre, il supprime tous les blocs que les modules d’Adobe Commerce placent dans les mises en page de base ainsi que les fichiers d’assets front-end, y compris JS et CSS. De ce fait, Hyva/Reset réduit grandement la complexité d’une page moyenne d’Adobe Commerce (Magento Commerce). Hyvä introduit donc une approche complètement nouvelle du front-end d’Adobe Commerce (Magento Commerce) et bien qu’il intègre une stack moderne, le thème s’adapte parfaitement à l’architecture applicative d’Adobe Commerce (Magento Commerce) !

DND - Hyvä - Home Page

HomePage de la démo d’Hyvä Themes (source : integer-net)

Quels sont les avantages d’Hyvä pour les développeurs et les E-Commerçants ?

Vous l’aurez compris, Hyvä offre un grand nombre d’avantages pour les e-commerçants, aussi bien du côté développeur que du côté client. Découvrons quelques-uns de ces atouts ensemble.

Pour les développeurs :

  • Hyvä réduit les dépenses et offre la possibilité aux développeurs de concentrer leurs efforts sur le front-end. De ce fait, la vitesse de développement est plus élevée. Selon Peter Jaap, fondateur de l’agence E-Commerce Elgentos, Hyvä permet de construire des boutiques en ligne deux fois plus rapidement qu’avec le front-end standard d’Adobe Commerce (Magento Commerce). Ainsi, Hyvä fournit une expérience de développement optimisée et moins complexe.
  •  

  • Les développeurs constateront qu’en utilisant Hyvä, ils peuvent travailler avec des techniques qui leur sont familières (layout xml, les blocs et fichiers phtml..) Ils ne seront pas dépaysés et effectueront leurs développements essentiellement avec les outils qu’ils utilisent déjà dans Adobe Commerce (Magento Commerce 1 et 2), mais avec toute la complexité inutile supprimée du front-end. Cela induit donc une prise en main simple et rapide de l’outil !
  •  

  • À ce jour, 75 agences digitales ont choisi de travailler avec Hyvä et ce, 1 mois seulement après son lancement. Selon Willem Wigman, une véritable communauté s’est constituée autour d’Hyvä et des développeurs chevronnés participent à l’évolution du produit. Réactive et dynamique, cette communauté s’agrandit de jour en jour !

 
Pour les E-Commerçants :

  • Hyvä est un outil prêt-à-l’emploi facilement déployable. En l’utilisant selon les bonnes pratiques, vous observerez une optimisation du temps de production, ce qui vous permettra de réaliser des économies importantes de coûts et d’atteindre de meilleurs seuils de rentabilité dans la mise en place de vos projets E-Commerce.
  •  

  • Hyvä fournit une navigation claire, simple, responsive et fluide sur tous les devices. En choisissant d’adopter Hyvä, vous optimisez l’accessibilité web de votre site et vous garantissez un accès égal à l’ensemble de vos internautes, y compris ceux qui disposent d’un handicap.
  •  

  • D’après PageSpeed Insights, les sites développés avec Hyvä affichent d’excellents résultats SEO. Cela constitue un avantage décisif pour les E-Commerçants souhaitant obtenir une belle visibilité sur le web.
  •  

  • La vitesse de chargement d’une plateforme E-Commerce joue un rôle fondamental dans l’expérience utilisateur. Une étude menée par Kissmetrics révèle que 79 % des acheteurs en ligne affirment ne pas poursuivre leur navigation sur un site web qui subit des temps de chargement trop longs. Selon cette même étude, on estime à 40 % le nombre de visiteurs quittant un site web si les pages mettent plus de 3 secondes à charger. Les gains de performance obtenus grâce à Hyvä permettent aux e-commerçants d’obtenir des plateformes dont les pages s’affichent en quelques millisecondes seulement et donc d’obtenir des taux de conversion plus élevés !
  • Conclusion

    L’une des caractéristiques particulièrement intéressante d’Hyvä réside dans le fait qu’il soit proche des attentes et des besoins des développeurs front-end, mais aussi des consommateurs en améliorant significativement leur expérience de navigation. L’outil a été développé en se basant sur une approche concrète et l’équipe d’Hyvä s’est servie de son expérience dans la création de sites Adobe Commerce (Magento Commerce) pour la transposer dans ce thème. C’est un logiciel construit par des développeurs aguerris qui permettra aux E-Commerçants de baser l’ensemble de leur activité de vente en ligne sur un socle technologique robuste, dans le but d’accroître leurs performances commerciales et d’atteindre tous leurs objectifs de croissance.

    L’équipe d’Hyvä a pour ambition de créer une bibliothèque UI pour Adobe Commerce (Magento Commerce 2). D’ici là, n’hésitez pas à consulter les liens suivants pour découvrir la solution dans son intégralité :
     

 
À l’Agence Dn’D, nous sommes persuadés qu’Hyvä aura un impact durable sur l’écosystème d’Adobe Commerce (Magento Commerce).
Et vous, qu’en pensez-vous ?

Vous souhaitez implémenter Hyvä à votre plateforme Adobe Commerce ?

En tant qu’agence certifiée Adobe Commerce (Magento Commerce), Dn’D vous accompagne dans le conseil, la conception et la maintenance de vos sites E-Commerce. N’hésitez pas à nous contacter via le formulaire ci-dessous pour implémenter Hyvä au sein de votre boutique en ligne !



Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *