par Benoit Alix, Développeur Front à l’Agence Dn’D
Depuis l’annonce de son développement lors de la conférence Reacticon et la sortie de sa première version le 12 février 2021, la solution Hyvä ne cesse de faire parler d’elle et de prendre de l’ampleur dans l’écosystème E-Commerce. Il faut dire que ce tout nouveau thème développé pour Adobe Commerce (Magento Commerce 2) présente de sérieux atouts avec des performances remarquables, dont une stack technique moderne et une grande simplicité d’implémentation. Autant de qualités qui, à l’instar des solutions PWA, ouvrent de nouvelles perspectives et permettent de répondre aux nouveaux besoins des e-commerçants.
Avant d’entrer dans le détail de la solution, faisons d’abord un rapide historique et un état des lieux des forces en présence !
Les thèmes natifs Adobe Commerce et leurs limites
Avec la sortie de sa deuxième version le 17 novembre 2015, Adobe Commerce (Magento Commerce) s’est doté de deux thèmes front (Luma et Blank) extrêmement complets comparé au thème proposé sur la version 1. En effet, ces thèmes reposent sur des technologies pérennes et éprouvées (Less, jQuery, jQuery UI, RequireJS, Knockout.js, etc.) permettant de développer des interfaces complexes et personnalisées tout en préservant une grande stabilité. Les thèmes natifs bénéficient également d’une architecture basée sur un principe d’héritage, permettant d’étendre les possibilités de l’application en s’appuyant sur des modules communautaires, qui vont facilement venir s’intégrer au site et ainsi enrichir ses fonctionnalités.
Bien que correspondant aux besoins de nombreuses boutiques en ligne, la stack front-end native d’Adobe Commerce (Magento Commerce) souffre de certaines limites l’empêchant d’être pleinement performante dans le cadre de certains projets à forte complexité technique et à forts enjeux (performances, expérience utilisateur, etc.). Le grand nombre de ses dépendances, ainsi que leurs poids, peut notamment s’avérer être un frein dès lors qu’il s’agit d’atteindre des performances optimales. La complexité de son architecture nécessite également des compétences pointues et très spécifiques qui ne correspondent pas à tous les développeurs.
Enfin, les technologies sur lesquelles se basent les thèmes Adobe Commerce (Magento Commerce 2), aussi efficaces soient-elles, ont progressivement perdu du terrain et de leur attrait au profit de librairies et de frameworks plus modernes tels que React.js, Webpack, Sass, etc.
Les promesses de la PWA
Les limites des thèmes natifs et les dernières avancées d’Adobe Commerce (Magento Commerce 2), notamment l’arrivée du support GraphQL avec la version 2.3, ont permis l’essor des solutions PWA (= Progressive Web App). Ce type d’application permet aux plateformes E-Commerce de bénéficier de l’ensemble des fonctionnalités d’une application native, d’une installation rapide, d’une navigation offline et d’une excellente expérience utilisateur sur mobile.
Les applications PWA E-Commerce s’appuient sur une architecture de type Headless, dont la particularité est de découpler la vue de la logique métier à l’aide d’API et ainsi de gagner en agnosticité, en flexibilité et en évolutivité.
Des solutions telles que Vue Storefront, PWA Studio ou Front-Commerce ont progressivement émergées depuis 2018 pour répondre à ces nouveaux besoins. Une grande quantité de projets ont été développés sur ces technologies depuis l’arrivée de ces nouvelles solutions et cela a permis de hisser l’expérience utilisateur à des niveaux encore inégalés jusqu’à aujourd’hui.
Malgré ses nombreuses forces, une application PWA ne conviendra pas à tous les projets, notamment en raison de la complexité de son architecture. De ce fait, il est parfois préférable pour le marchand de conserver une application dite “monolithique”.
L’approche HeadYes
La solution Hyvä (prononcez “Huva”) propose une troisième voie : celle du “HeadYes”, concept théorisé récemment par Salvatore Capritta (Développeur certifié Adobe Commerce – CTO de Synthetic Lab). Contrairement à une application PWA, cette approche conserve l’architecture native d’Adobe Commerce (Magento Commerce 2) et capitalise sur ses forces, à savoir le système de layout, le routing, le système de cache, etc. En revanche, elle vient pallier les limites de sa vue en proposant un thème intégralement réécrit, qui a pour mission de se substituer aux thèmes natifs d’Adobe Commerce (Magento Commerce 2) que sont Luma et Blank. Ainsi, ce sont deux nouveaux thèmes qui viennent gérer la vue d’Adobe Commerce (Magento Commerce 2) :
- “Hyvä reset”, dont la fonction est de supprimer les divers éléments et dépendances du front-end natif,
- “Hyvä default”, qui vient ajouter les éléments graphiques du thème.
La philosophie d’Hyvä est de s’appuyer sur les technologies supportées nativement par les navigateurs web, de façon à limiter les dépendances au maximum pour atteindre des performances très élevées et améliorer autant l’expérience utilisateur que l’expérience développeur.
Pour ce faire, Willem Wigman, son créateur, a choisi de s’inspirer de la “TALL stack” utilisée dans l’écosystème du framework Laravel et qui est fortement plébiscité par les développeurs. Rebaptisée “TAM stack” pour sa déclinaison Adobe Commerce (Magento Commerce), cette dernière se compose des technologies suivantes :
- Tailwind CSS : un framework CSS personnalisable, basé sur le principe de classes utilitaires qui va servir à créer le style graphique du thème,
- Alpine.js : un framework JS permettant de dynamiser les éléments du site,
- Adobe Commerce (Magento Commerce 2).
De plus, à l’instar de l’approche “HeadYes” qui permet de faciliter les développements en simplifiant l’architecture, la “TAM stack” permet quant à elle de garantir un haut degré de personnalisation tout en restant extrêmement légère. Ces deux caractéristiques essentielles offrent de nombreux avantages à Hyvä :
- Des performances de premier ordre (temps de chargement, réactivité, etc.),
- Des temps de production accélérés,
- Des coûts moins élevés (licence et hébergement),
- Une meilleure expérience utilisateur.
Hyvä : une solution ambitieuse !
En seulement quelques mois, Hyvä est devenu une alternative extrêmement séduisante aux PWA et aux sites classiques B2C. En atteste l’enthousiasme grandissant de la communauté d’Adobe Commerce (Magento Commerce), les nombreux sites déjà en production ou en cours de développement, le nombre d’agences déjà prestataires de la solution et même l’intérêt montré par Adobe (éditeur d’Adobe Commerce). Le projet peut s’appuyer sur le travail de Willem Wigman, ainsi que sur le soutien de l’agence integer_net et des autres partenaires de la solution qui contribuent au code tout en apportant leur expertise.
Forte d’une roadmap ambitieuse, la solution couvre déjà la totalité des fonctionnalités d’Adobe Commerce (Magento Commerce 2) et s’achemine déjà vers sa version 1.1.3. Un grand nombre de connecteurs sont également en cours de développement pour rendre Hyvä compatible rapidement avec les modules communautaires les plus plébiscités. Enfin, Willem Wigman envisage de créer une bibliothèque de composants UI prêt-à-l’emploi basée sur Tailwind CSS et dédiée au thème.
Hyvä a toutes les cartes en main pour devenir un acteur incontournable dans l’écosystème d’Adobe Commerce (Magento Commerce).
Nulle doute que ses qualités intrinsèques lui permettront d’apporter un nouveau souffle à l’E-Commerce !
Pour aller plus loin
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 !