Vercel y Shopify reconstruyen Hydrogen como framework open source y agnóstico al runtime

Vercel y Shopify anunciaron en la conferencia Vercel Ship 26, celebrada en Nueva York, que reconstruyen por completo Hydrogen, su framework para comercio headless. La nueva versión será open source y agnóstica al runtime: podrá funcionar en cualquier entorno donde se ejecute JavaScript, y no solo ligada a un stack concreto.

Qué cambia en la nueva arquitectura

Hydrogen ya facilitaba el lanzamiento de escaparates headless, pero era difícil trasladarlo de un stack a otro. La nueva versión es abierta y no depende de ningún runtime: los desarrolladores podrán montar su tienda con Svelte, Nuxt, Next.js o con su propio framework.

• El anuncio se hizo en la conferencia Vercel Ship 26, en Nueva York
• La nueva versión de Hydrogen es open source y runtime-agnostic
• Es compatible con Svelte, Nuxt, Next.js y con frameworks arbitrarios
• La arquitectura se divide en tres capas: core, client y server

Cómo funciona la capa core

Hasta ahora, cada equipo escribía su propio código de «pegamento» para trabajar con la API de Shopify. Un ejemplo es el formateo de precios: la API no devuelve un número, sino un tipo propio, MoneyV2, en el que el importe va codificado como cadena de texto. Ahora esa lógica pasa a una capa core común basada en el estándar Intl.NumberFormat. El desarrollador llama a la función formatMoney y obtiene el precio formateado sin tener que escribir ni mantener su propio envoltorio. Cuando la API de Shopify cambia, actualizar se vuelve trivial en lugar de exigir cambios manuales en cada proyecto.

Qué hace la capa client

La capa client asume las decisiones de renderizado que se repiten, sobre todo el estado del carrito. Antes, cualquiera que desarrollara una aplicación de comercio escribía su propia versión del proveedor del carrito: métodos para añadir, actualizar y eliminar artículos, aplicación de descuentos, gestión de divisas, estados de error y sincronización entre pestañas del navegador. En la nueva versión de Hydrogen, el estado del carrito se incorpora con una sola importación del hook useCart, en lugar de reescribirse en cada proyecto.

Qué significa esto

Vercel y Shopify trasladan la lógica repetitiva de las tiendas online, como el formateo de precios o el estado del carrito, a una capa abierta y compartida que se corrige y mejora una sola vez para todos. Así, cada equipo deja de resolver los mismos problemas desde cero en su propio stack.

Preguntas frecuentes

¿Con qué frameworks se puede usar el nuevo Hydrogen?

El framework es runtime-agnostic y es compatible de forma explícita con Svelte, Nuxt y Next.js. Además, permite conectar el framework propio del desarrollador.

¿De qué capas se compone la nueva arquitectura de Hydrogen?

Los desarrolladores distinguen tres capas: core (lógica común para trabajar con la API de Shopify), client (estado de la interfaz y del carrito) y server.