Le monde de la vente en ligne connaît une croissance dans un environnement hyper-compétitif. De nouvelles technologies émergent constamment, améliorant sans cesse l'expérience du consommateur, la rendant plus simple et agréable. Aujourd'hui, je vous invite à vous pencher sur une nouvelle expérience de développement grâce à Hydrogen.
Qu'est-ce que le headless commerce ?
Le commerce headless est une architecture de e-commerce où le front-end (interface utilisateur) et le back-end (gestion des commandes, des stocks, etc.) sont séparés. Contrairement aux sites traditionnels où le front-end et le back-end sont étroitement liés, dans une architecture headless, le front-end peut être développé indépendamment du back-end. Cela permet une plus grande flexibilité dans la conception et la personnalisation de l'expérience utilisateur. Pour exemple, vous aurez la possibilité d’ajouter des parcours utilisateurs performants sur mesure, d’intégrer toutes les solutions de votre choix et de personnaliser pleinement votre site sans les limitations d’un framework. L’interêt majeur de l’architecture headless est de pouvoir composer avec des briques technologiques interchangeables.
Shopify et le headless commerce
Shopify est l'une des principales plateformes e-commerce, offrant une gamme de fonctionnalités pour créer, gérer et développer des magasins en ligne. Certains développeurs et entreprises souhaitent parfois étendre les fonctionnalités de Shopify au-delà de ses capacités front-end natives (notamment de s’affranchir des thèmes préfabriqués par Shopify).
C'est là que le headless commerce entre en jeu. En utilisant une architecture headless avec Shopify comme back-end, les développeurs peuvent créer des expériences d'achat entièrement sur mesure en utilisant leurs technologies front-end préférées, tout en profitant des fonctionnalités de e-commerce puissantes de Shopify.
Hydrogen : une solution headless pour Shopify
Ceci me permet d’introduire Hydrogen : le générateur de projet headless de Shopify.
Voici un aperçu d’un site web généré en une dizaine de minutes utilisant Shopify en headless grâce à Hydrogen et comprenant :
- une page listing produits
- page détail produit
- un espace compte utilisateur avec login
- une search
- un panier en session
- un checkout fonctionnel qui va jusqu’au paiement
Site préfabriqué avec Shopify Hydrogen
Avec Remix : un framework JS moderne pour applications web performantes
Hydrogen est une solution headless commerce développée par Shopify. Il offre aux développeurs une infrastructure cloud évolutive et des outils pour créer des expériences d'achat en ligne ultra-rapides et hautement personnalisées.
Voici quelques-unes des fonctionnalités clés de Hydrogen :
-
API flexible : Hydrogen encapsule l’API de Shopify qui permet aux développeurs de récupérer aisément les données du back-end Shopify et de les afficher de manière dynamique sur le front-end.
-
Intégrations faciles : Hydrogen s'intègre facilement grâce a la CLI qui permet de se connecter directement à votre store en important les clés API nécessaires.
-
Performance optimisée : avec une architecture headless, les sites développés avec Hydrogen bénéficient d'une performance optimisée car ils sont découplés et peuvent faire appel à des micro-services, offrant des temps de chargement plus rapides et une expérience utilisateur améliorée.
-
Personnalisation avancée : les développeurs ont un contrôle total sur la conception et l'expérience utilisateur, leur permettant de créer des expériences d'achat entièrement personnalisées et uniques.
Voici un schéma représentant les différentes couches inclues lorsque vous générez un projet Hydrogen “from scratch”.
https://shopify.dev/docs/custom-storefronts/hydrogen/project-structure
Hydrogen détient un ensemble de composants, d'utilitaires et de modèles de conception pour développer avec les API de Shopify.
Remix est le framework sous-jacent par défaut qui gère le routage, la récupération des données, l'interface utilisateur réactive et le style. Pour ceux qui ne sont pas familier avec Remix, il s’agit d’une alternative à Next.js qui promeut une meilleure experience utilisateur. Mais pas d’inquiétude, vous avez quand même la possibilité d’utiliser Hydrogen avec React (et donc Next.js) si vous le souhaitez.
Et enfin, Oxygen est la couche infrastructure qui permet de déployer votre application sans vous soucier de son hébergement.
Avec React
Le schéma ci-dessous montre qu’Hydrogen peut être utilisé comme un simple "toolkit" dans des projets React, vous permettant de l'intégrer dans des sites Next.js, Gatsby et d'autres frameworks. Bien sûr, vous avez aussi la possibilité d'auto-héberger votre site.
La documentation Shopify donne des exemples d’utilisation des composants.
https://shopify.dev/docs/custom-storefronts/getting-started/build-options
Quand est-il préférable d’éviter d’utiliser Hydrogen ?
Bien qu'Hydrogen offre de nombreux avantages pour créer des sites e-commerce headless avec Shopify, il existe des scénarios où son utilisation peut ne pas être la plus appropriée. Voici quelques cas où il peut être préférable d'éviter d'utiliser Hydrogen :
-
Projets simples ou à très court terme : pour les petites boutiques en ligne avec des besoins simples et des délais serrés, l'utilisation d'Hydrogen peut introduire une complexité inutile. Dans ces cas, l’utilisation d’un thème Shopify peut être plus efficace.
-
Développeurs inexpérimentés : pour les développeurs qui ne sont pas familiers avec les technologies front-end modernes ou l'intégration d'API, l'apprentissage d'Hydrogen peut représenter une courbe d'apprentissage significative. Dans de tels cas, il peut être préférable de se concentrer sur les outils et les fonctionnalités natifs de Shopify.
-
Budget restreint : le développement avec Hydrogen peut nécessiter des ressources supplémentaires en termes de temps et de coûts, en particulier avec la mise en place d’un environnement de développement sur mesure et la maintenance continue. Pour les entreprises avec un budget limité, il peut être plus rentable d'utiliser des solutions plus simples et directes.
Si Hydrogen ne répond pas à votre besoin, apportez votre propre stack headless
Avec la “Headless sales channel” Shopify permet d'accéder aux primitives et aux fonctionnalités de Shopify, telles que l'affichage des produits et des collections, l'ajout d'articles au panier, le calcul des prix contextuels, etc.
Vous pouvez alors utiliser la Shopify Storefront API pour construire votre site e-commerce sur mesure mais gardez en tête que l’implémentation sera bien plus lourde qu’avec Hydrogen. L’explorateur GraphQL vous permet de tester et jouer avec la Storefront API.
https://shopify.dev/docs/custom-storefronts/headless
Cette solution pourrait être adaptée au cas d’usages sur-mesures suivants :
- Vendre des produits par l'intermédiaire de l'Internet des Objets (IoT), par exemple commander des biens alimentaires lors d’un simple appuie bouton physique
- Vendre des produits à partir d'une application mobile native ou d'une application web progressive (PWA)
- Vendre des produits dans des jeux de réalité augmentée (AR) ou de réalité virtuelle (VR)
Vers de nouvelles experiences utilisateurs
En résumé, en combinant Shopify avec Hydrogen, les entreprises peuvent créer des expériences d'achat en ligne hautement personnalisées, performantes et évolutives. Avec la flexibilité offerte par une architecture headless, les possibilités de création sont pratiquement illimitées, permettant aux entreprises de rester compétitives dans un marché du e-commerce en constante évolution. Cette solution permet de gagner en productivité et de faire évoluer son application sans verrous avec des briques interchangeables.
