Vercel et Shopify reconstruisent le framework Hydrogen en open source et agnnostique de runtime

Vercel et Shopify ont annoncé à la conférence Vercel Ship 26 à New York qu'ils reconstruisent complètement le framework Hydrogen pour le commerce sans tête, en le rendant open source et agnostique du runtime — il pourra maintenant s'exécuter dans n'importe quel environnement où JavaScript est exécuté, pas seulement en conjonction avec une pile spécifique.

Ce qui va changer dans la nouvelle architecture

Hydrogen simplifiait auparavant le lancement des vitrines sans tête mais était difficile à porter entre les piles. La nouvelle version est ouverte et non liée à un runtime : les développeurs pourront construire une boutique en Svelte, Nuxt, Next.js ou sur leur propre framework.

• L'annonce a été faite à la conférence Vercel Ship 26 à New York
• Nouvelle version de Hydrogen — open source et agnostique du runtime
• Svelte, Nuxt, Next.js et frameworks arbitraires supportés
• L'architecture divisée en trois couches : core, client et server

Comment la couche core est structurée

Auparavant, chaque équipe écrivait son propre code « collant » pour travailler avec l'API Shopify — par exemple, pour formater les prix : l'API renvoie non pas un nombre, mais son propre type MoneyV2, où le montant est codé en tant que chaîne. Maintenant, cette logique est extraite dans une couche core commune basée sur Intl.NumberFormat standard : le développeur appelle la fonction formatMoney prête à l'emploi et obtient un prix formaté sans écrire et maintenir son propre wrapper. Lorsque l'API Shopify change, la mise à jour devient triviale, pas une correction manuelle dans chaque projet.

Ce que fait la couche client

La couche client gère les solutions répétées pour le rendu — principalement l'état du panier. Auparavant, tous ceux qui construisaient une application commerciale écrivaient leur propre version d'un fournisseur de panier : méthodes pour ajouter, mettre à jour et supprimer des articles, appliquer des remises, travailler avec la devise, états d'erreur, synchronisation entre les onglets du navigateur. Dans la nouvelle version de Hydrogen, l'état du panier est connecté par une simple importation du crochet useCart, pas réécrit de zéro dans chaque projet.

Ce que cela signifie

Vercel et Shopify extraient la logique répétée des magasins en ligne — formatage des prix, état du panier — dans une couche ouverte commune qui est corrigée et améliorée une fois pour tous, au lieu que chaque équipe résolve les mêmes tâches encore et encore sur sa propre pile.

Questions fréquemment posées

Sur quels frameworks puis-je utiliser le nouveau Hydrogen ?

Le framework est agnostique du runtime et supporte explicitement Svelte, Nuxt, Next.js, et permet également de connecter votre propre framework de développeur.

De quelles couches se compose la nouvelle architecture

Hydrogen ?

Les développeurs distinguent trois couches : core (logique générale pour travailler avec l'API Shopify), client (état de l'UI et panier) et server.