Article Tech

Hyvä Thème : Une nouvelle ère pour le front end Magento 2

Publié le
5/12/24
Temps de lecture
5
mins
image de direction artistique de Zento

Hyvä Theme révolutionne le front-end Magento 2 !

Performances optimisées, développement simplifié et expérience utilisateur améliorée grâce à Tailwind CSS et Alpine.js. Découvrez comment Hyvä simplifie vos projets Magento.

Les enjeux

En tant qu’agence Magento nous avons été de nombreuses fois confrontée à la lourdeur et la complexité de customisation de la solution, aussi bien dans un contexte Open Source que dans un contexte Adobe Commerce donc Saas. Même si la solution reste puissante sur le plan fonctionnel et capable d’adresser des volumétries de traitement très importantes, la charge d’intervention sur le front complexifie la plupart des interventions, même les plus minimes, surtout en comparaison des autres solutions sur lesquelles nous intervenons et notamment Shopify.

Conscient de ces enjeux, nous orientons désormais nos développements Magento sur la technologie Hyvä.

Hyvä Theme est une solution de frontend innovante pour Magento 2, conçue pour offrir une expérience utilisateur optimisée et un développement plus efficace. En reprenant les fondamentaux de Magento, Hyvä propose une approche moderne et épurée du développement frontend, en utilisant les technologies web les plus récentes.

Les principaux atouts de la solution sont les suivants : 

  • Des performances optimisées : Hyvä est conçu pour offrir des performances exceptionnelles grâce à une architecture légère et à l'utilisation de technologies performantes comme Tailwind CSS et Alpine.js.
  • Flexibilité et personnalisation : Hyvä offre une grande flexibilité pour créer des designs personnalisés et uniques, tout en conservant une base solide et maintenable.
  • Un développement simplifié : L'architecture de Hyvä est plus simple et plus intuitive que celle de Magento par défaut, ce qui accélère le développement et réduit les coûts de maintenance.
  • Une communauté active : Hyvä bénéficie d'une communauté de développeurs dynamique et en constante croissance, qui contribue à l'amélioration continue du projet.
  • Une intégration facile : Hyvä s'intègre facilement avec les modules Magento existants et peut être utilisé pour créer des boutiques en ligne de toutes tailles.

Les principaux avantages de Hyvä Theme

  • Expérience utilisateur améliorée : Hyvä offre une expérience utilisateur plus rapide, plus fluide et plus intuitive, grâce à des temps de chargement réduits et à une interface utilisateur moderne.
  • Code propre et maintenable : L'architecture de Hyvä est bien structurée et facile à comprendre, ce qui facilite la maintenance à long terme.
  • Compatibilité avec les normes web : Hyvä respecte les normes web les plus récentes, ce qui améliore l'accessibilité et le référencement naturel.
  • Performance : la différence de rapidité de chargement entre le thème classique (Luma) et le template Hyvä s’illustre très facilement
No items found.

Comment Hyvä fonctionne-t-il ?

La pile JavaScript de Magento, constituée de nombreuses bibliothèques comme Knockout JS, RequireJS, UIComponents, jQuery...etc, complexifie inutilement le développement frontend. 

Cette surcharge impacte négativement les performances des sites e-commerce en nécessitant le chargement de quantités importantes de code JavaScript, même si seule une petite partie est réellement utilisée. Hyvä, en revanche, simplifie considérablement cette approche en réduisant le nombre de bibliothèques et en optimisant le chargement des scripts en utilisant les technologies suivantes :

  • Tailwind CSS : Un framework CSS utilitaire qui permet de créer des styles personnalisés rapidement et facilement.
  • Alpine.js : Un framework JavaScript léger pour ajouter des fonctionnalités interactives aux pages web.
  • PHP : Le langage de programmation utilisé pour développer les templates et les composants de Hyvä.

Le défi de la compatibilité

Magento possède un écosystème riche et diversifié de modules tiers. Ces modules sont souvent conçus pour fonctionner avec l'architecture frontend par défaut de Magento, qui est radicalement différente de celle de Hyvä. 

Ainsi, une question se pose : comment assurer une compatibilité fluide entre Hyvä et ces modules ?

Pour résoudre ce problème, la communauté Hyvä a développé des modules de compatibilité qui sont disponibles soit en téléchargement depuis le repo Gitlab de Hyvä soit chez les éditeurs de module.

Ces modules ont pour but :

  • d’adapter les modules Magento existants à l'architecture de Hyvä: Ils traduisent les éléments spécifiques à l'ancien frontend (templates, styles, scripts) dans le langage et les structures de Hyvä.
  • d’assurer un fonctionnement optimal : Les modules de compatibilité garantissent que les fonctionnalités des modules Magento d'origine sont préservées (et notamment le fonctionnement sur les thèmes Luma / Blank) et fonctionnent correctement dans un environnement Hyvä.

Comment fonctionnent les modules de compatibilité ?

  • Identification des incompatibilités : Lorsqu'un module Magento est installé sur une boutique utilisant Hyvä, le système identifie les éléments qui ne sont pas compatibles avec l'architecture de Hyvä. Ceci est possible en inspectant la console du navigateur pour identifier les erreurs javascript liées à l’absence de certains composants (require, knockout…etc). Il est aussi utile d'avoir une deuxième vue de magasin fonctionnant avec Luma à côté de la vue de magasin utilisant Hyvä. Cela permet de vérifier exactement comment un aspect particulier d'un module fonctionne dans Luma tout en le faisant fonctionner dans Hyvä.
  • Création de modules de compatibilité : Des développeurs créent des modules spécifiques pour adapter ces éléments. Ces modules sont souvent open-source et partagés au sein de la communauté Hyvä.
  • Installation des modules de compatibilité : Les modules de compatibilité sont installés en plus du module Magento d'origine et de Hyvä. Ils permettent ainsi de faire cohabiter les deux environnements.

Site de vêtements sous Hyvä
Site sous Hyvä

Les avantages des modules de compatibilité

  • Réutilisation des modules existants : Vous pouvez continuer à utiliser les modules Magento que vous avez déjà acquis, sans avoir à les remplacer complètement.
  • Accélération du développement : Les modules de compatibilité vous font gagner du temps en évitant de devoir développer des fonctionnalités existantes de zéro.
  • Communauté active : La communauté Hyvä travaille en permanence sur de nouveaux modules de compatibilité, ce qui élargit constamment le catalogue de modules compatibles.

Un écosystème en constante évolution

L'écosystème des modules de compatibilité pour Hyvä est en constante évolution. De nouveaux modules sont régulièrement ajoutés, et les modules existants sont améliorés. Cela signifie que la compatibilité avec les modules Magento est de plus en plus étendue et fiable.

Enfin, les développeurs de modules les plus connus (Amasty, Webkul, MagePlaza,...) rendent compatible Hyvä leurs nouvelles versions de modules (aussi bien que la compatibilité GraphQL qui permet de les exploiter dans un contexte Headless).

En somme

Hyvä Theme est une solution de frontend prometteuse pour Magento 2, qui offre de nombreux avantages en termes de performance, de flexibilité et de facilité de développement. Si vous cherchez à améliorer l'expérience utilisateur de votre boutique en ligne et à simplifier le développement, Hyvä est une option à considérer sérieusement.

Vous avez des questions sur Hyvä ou vous envisagez de l'adopter ?

Nous pouvons vous aider !

Magento 2 : Est-il possible de créer un eCommerce headless en open source ?

Découvrez les avantages et inconvénients du headless en open source avec Magento 2.

Ze News : votre dose hebdo d’actu digital #3

Découvrez l'actu tech et digitale de la semaine : investissements d'Amazon dans Anthropic, Black Friday, chi

Ze news : votre dose hebdo d’actu digitale & eCommerce #2

Un aperçu des points intéressants de la tech et du digital que nous avons vu cette semaine.