Actualmente una tecnología muy sonada entre el mercado e-commerce es Hydrogen de Shopify, el cual es un stack de Shopify para comercios headless.
Podría interesarte: Resumen de Hydrogen por Shopify
El motivo para ser tan popular es su capacidad de personalización y flexibilidad a la hora de construir tu sitio web; Pasamos de crear sitios netamente con Shopify a usar una tecnología bastante conocida como lo es react, además de contar ya con una integración estable con el Storefront API de Shopify, lo que ayuda a reducir también el tiempo de desarrollo (Como puede suceder con otras tecnologías headless).
Podría interesarte: Qué es el comercio headless. Guía básica para el 2023
Características clave de Hydrogen
Performance
Hydrogen al ser una tecnología headless, usa al mínimo su Javascript, permite integrar controles de almacenamiento en caché y al ser SSR, aumenta el rendimiento de los sitios que construye. Sin embargo, debemos tener presente que esto también dependerá mucho de las buenas prácticas aplicadas al momento de desarrollarlo, en algunas ocasiones, al cometer algunos errores en la construcción del sitio puede disminuir el rendimiento del mismo en hasta 40 puntos.
Personalización y flexibilidad
Hydrogen al ser construída con Remix (React), te permite crear contenido dinámico y adaptable de forma fácil, permitiendo enfocar así el sitio a la comodidad del usuario final, lo que puede aumentar en gran medida la lealtad del cliente. Adicionalmente, al ser una tecnología headless, si requieres realizar algún tipo de modificación o actualización de diseño no tendrás que preocuparte por fallos de funcionalidad al final.
Experiencia de desarrollo
Como indiqué anteriormente, Hydrogen fue desarrollada con Remix, es decir, ReactJS. Al ser una tecnología muy usada en el mundo de desarrollo frontend, es fácil de usar, escalable y en caso de requerir otros desarrolladores en tu equipo, entendible. Claro está, al igual que en todo, esto va a depender mucho de las buenas prácticas que se apliquen al momento de desarrollar la tienda y también la documentación que dejen de este proceso.
Integraciones
Hydrogen te permite integrar diferentes aplicaciones de forma fácil y rápida, desde aplicaciones tipo CMS como Sanity o Contentful hasta aplicaciones como Klaviyo o Recharge (Podría interesarte: ¿Cómo aumentar las ventas con productos por suscripción?). Además, al ser un framework JS también puedes usar dependencias node de forma rápida, que te ayuden también a mejorar parte de la experiencia de usuario; solo recuerda usar las que realmente necesitas, agregar demasiadas dependencias podría jugarte en contra.
Mantente al tanto de las novedades en
E-commerce y Shopify
Casos de éxito y demos
Hydrogen al ser una herramienta relativamente joven no cuenta con muchos casos en los que se haya implementado. Navegando en su sitio oficial encontré tres de los casos que implementó la herramienta con resultados sorprendentes.
Te hablo de Denim Tears, All birds y Patta x Tommy; en estos sitios puedes ver una gran personalización, un muy buen uso de animaciones y algunos detalles que son un poco más difíciles de desarrollar usando únicamente Shopify. Estos casos mencionados ejemplifican bien una de las características más importantes de los sitios headless, la personalización, cuando usas hydrogen además de contar con una personalización del sitio tan profunda, también cuentas con una integración muy poderosa como lo es Shopify, quien se encargará de mantener toda la lógica del stock, ventas, histórico, etc.Si te interesa entender un poco más a fondo cómo funciona Hydrogen, te comento que Shopify creó un demo que puedes explorar y ver en tiempo real, lo puedes encontrar aquí, o también puedes explorar el directorio de demos creados por Shopify, de esta forma puedes entender a nivel de código cómo funciona y está estructurada esta herramienta.
¿Por dónde comenzar?
Te recomiendo que en tu primer paso por esta tecnología no apuntes a generar un proyecto completo, sino que te enfoques en aprender, entender e identificar las posibilidades que te brinda esta herramienta, por lo que te dejo un pequeño tutorial en el que te indico cómo puedes generar de forma rápida un proyecto funcional que puedes usar como guía y manual para tus próximos proyectos.
Paso 1:
Ahora, para usar Hydrogen, debes crear el proyecto con el siguiente comando en tu terminal.
$ npm create @shopify/hydrogen@latestPaso 2:
Allí te solicitará elegir un template, te recomiendo usarlo por primera vez con el template de “Demo Store” esto te generará un proyecto de ejemplo completamente configurado con el que podrás interactuar para identificar cómo puedes configurar y estructurar tu proyecto.
Paso 3:
Te solicitará elegir el lenguaje de programación que se usará en el proyecto, personalmente me inclino un poco más por Typescript debido a su sistema de tipado, lo que hace que su código sea más fácil de debuggear; sin embargo, si no conoces el lenguaje, puedes elegir Javascript.
Paso 4:
Debes especificar el directorio en donde será alojado tu proyecto, recuerda que el ejecutar ese comando te creará una carpeta con tu proyecto hydrogen, por lo que no es necesario tener la carpeta vacía para ubicarlo allí mismo.
Paso 5:
Te preguntará si deseas instalar las dependencias con NPM de una vez o si prefieres hacerlo de forma manual, para este caso, como es una prueba te recomiendo seleccionar la opción “(y) Yes, confirm“.
Ejecuta tu proyecto
Con estos pasos 5 pasos ya tienes configurado tu primer proyecto hydrogen! 🚀
Ahora, ten presente que para correr el proyecto debes ubicarte en la carpeta correspondiente y ejecutar el siguiente comando:
$ npm run dev
Al ejecutar ese comando deberás abrir el link http://localhost:3000/ en tu navegador. Allí podrás ver el demo funcional de Hydrogen corriendo en tiempo real con tu computador.
Información adicional que te puede ser de utilidad para la construcción de un sitio Hydrogen:
- Esta es una guía básica o de inicio para Hydrogen: https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development
- Esta es una explicación detallada de la estructura de carpetas que se implementó en Hydrogen: https://shopify.dev/docs/custom-storefronts/hydrogen/project-structure
- Esta es una guía de las variables de entorno que requiere Hydrogen para funcionar: https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables.
Tu proyecto mostrará el inventario de la tienda demo de Hydrogen, para conectarlo al inventario de tu tienda Shopify, debes actualizar el archivo `hydrogen-storefront/.env` con el ID de tu tienda y la clave API de Storefront. Para esto, te recomiendo instalar esta aplicación nativa de Shopify en tu tienda; esta aplicación te permitirá configurar los permisos, configurar las claves necesarias y expondrá tu tienda headless como otro canal de venta sin tener que recurrir a procesos manuales, algo que te ahorrará bastante trabajo al momento de configurar Hydrogen.
Adicionalmente, recuerda que Hydrogen tiene integración con Shopify por medio de su Storefront API, lo que quiere decir que si requieres obtener la información de tus productos o cualquier módulo de Shopify deberás conectarte directamente con esta misma. Ten presente que el Storefront API de Shopify usa servicios GraphQL, por lo que es necesario que también tengas conocimientos mínimos de esta tecnología. No te preocupes, en la sección de recursos adicionales te dejo los links a estas documentaciones.
Recursos adicionales
Como te comenté, los proyectos headless pueden ser maravillosos y podrían ayudarte a brindar una experiencia muy agradable para tus usuarios, sin embargo, todo esto depende de que lo uses correctamente y siempre intentes usar buenas prácticas de programación para hacerlo.
Para ayudarte en ese proceso, te recomiendo leer algunos de los artículos que te brindo en la siguiente lista, espero te sean de utilidad para sacarle el mejor provecho a esta tecnología:
- En caso de no tener instalado NPM aún: ¿Cómo descargar e instalar NPM?
- Si tienes dudas respecto al API de Shopify que está integrado con tu proyecto Hydrogen: Storefront API
- Si deseas conocer alguna funcionalidad específica de GraphQL: Documentación de GraphQL
- Si deseas conocer alguna funcionalidad específica de Remix: Documentación de Remix
- Si deseas conocer alguna funcionalidad específica de React: Documentación de React
Si deseas conocer algunas buenas prácticas en React: Tips para codificar correctamente en React
Conclusiones
Hydrogen es una herramienta relativamente nueva que te permitirá alcanzar con más detalle los objetivos de tu comercio, permitiendo una mayor personalización de tu tienda manteniendo el rendimiento de la misa, además de una conexión directa con Shopify, lo que te permite a su vez aprovechar algunas de las aplicaciones que ya usabas en tu tienda monolítica. Lo mejor es que te permite hacerlo con una tecnología muy poderosa y conocida como lo es ReactJS; sin embargo, ten presente que para sacar el mejor provecho a esta herramienta, deberás estudiar y entender un poco el lenguaje de programación y el framework frontend usado aquí.
Mantente al tanto de
las novedades
Mantente al tanto de las novedades
