El Bosque para los Árboles (Sintaxis Abstracta)

Rate this content
Bookmark

Llámalo "iniciar", "crear estructura", "inicializar" o simplemente "escribir palabras en una terminal y obtener archivos para comenzar", esta es a menudo la primera oportunidad para que un framework deleite o decepcione a los desarrolladores. ¿Qué tan fácilmente pueden comenzar, pueden extenderlo con su conjunto de herramientas ideal y cómo escalará? En esta charla exploraremos las limitaciones de las soluciones actuales y examinaremos las formas en que nos propusimos mejorar la experiencia de incorporación de desarrolladores del nuevo framework y SDK de React de Shopify, Hydrogen.

This talk has been presented at React Advanced 2021, check out the latest edition of this React Conference.

FAQ

Hydrogen es un marco de trabajo y SDK React diseñado para crear tiendas personalizadas rápidas y dinámicas utilizando la plataforma Shopify. Proporciona las herramientas necesarias para construir una experiencia de comercio electrónico optimizada.

Hydrogen está actualmente en versión beta privada, pero se espera una vista previa para desarrolladores que será lanzada en las próximas semanas.

Hydrogen ofrece una interfaz de línea de comandos sofisticada y extensible que permite una configuración detallada y personalizada, a diferencia de otros frameworks que pueden estar limitados a clonar un directorio de plantilla sin muchas opciones de configuración.

Hydrogen utiliza un enfoque basado en la compilación que involucra análisis, transformación y generación de código. Esto incluye la manipulación de un Árbol de Sintaxis Abstracta (AST) para ajustar el código según las necesidades del proyecto.

Hydrogen utiliza Babbel para la mayoría de las operaciones de transformación de código y también proporciona acceso a herramientas como astexplorer.net y Babel Playground para ayudar en el desarrollo y visualización de las transformaciones AST.

Hydrogen incluye migraciones integradas en su CLI que pueden analizar y aplicar automáticamente cambios necesarios para adaptarse a nuevas versiones del marco de trabajo, garantizando así la compatibilidad y optimización continuas del proyecto.

Hydrogen realiza auditorías de accesibilidad, seguridad y conformidad con los indicadores vitales de la web para asegurar que los proyectos cumplan con los estándares actuales. Además, utiliza su CLI para alimentar pruebas de integración que detectan problemas en configuraciones de aplicaciones generadas de forma dinámica.

Matt Seccafien
Matt Seccafien
8 min
25 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Hydrogen es un framework y SDK React con opiniones para construir tiendas personalizadas rápidas y dinámicas impulsadas por Shopify. Con Hydrogen, los desarrolladores pueden aprovechar los compiladores para componer fácilmente operaciones comunes y mejorar la experiencia del desarrollador. El framework se enfoca en el rendimiento de imágenes, el almacenamiento en caché de solicitudes, la representación en el servidor y los componentes de servidor de React. También proporciona auditoría de accesibilidad, seguridad, métricas web y violaciones del framework. La CLI de Hydrogen ofrece una experiencia de desarrollo poderosa y divertida para la creación inicial, la aplicación de las mejores prácticas, el mantenimiento continuo y las pruebas.

1. Introducción a Hydrogen

Short description:

Hydrogen es un marco de trabajo y SDK React con opiniones para construir tiendas personalizadas rápidas y dinámicas impulsadas por Shopify. El tiempo que lleva ponerse en marcha es crucial para la experiencia del desarrollador. Queríamos brindar a los desarrolladores un mejor punto de partida con una interfaz de línea de comandos más sofisticada, extensible y que los acompañe mientras construyen su experiencia de comercio personalizada. Aquí hay un modelo mental de alto nivel de cómo funciona esto: recopilar información sobre el proyecto, analizar el proyecto existente o comenzar desde un proyecto base de Hydrogen, aplicar funciones de transformación para manipular el código y generar nuevo código a partir de la representación JSON.

Hydrogen es un marco de trabajo y SDK React con opiniones para construir tiendas personalizadas rápidas y dinámicas impulsadas por Shopify. Actualmente estamos en versión beta privada, pero estén atentos a una vista previa para desarrolladores en las próximas semanas. En realidad, no voy a entrar en detalles sobre cómo funciona Hydrogen específicamente, pero pueden ver esta demostración con Toby, el CEO de Shopify, en nuestra conferencia Unite de este año.

Como cualquier nuevo marco de trabajo o producto, el tiempo que lleva ponerse en marcha es crucial para la experiencia del desarrollador. Con tantos frameworks competidores, todos con una trayectoria mucho más larga, sabíamos que esto sería una consideración importante para cualquiera que decida adoptar Hydrogen. Los scripts de creación, como Create React App o Create Next App, son bastante estándar para la creación de proyectos. Pero aún así, muchos de ellos están actualmente limitados a clonar un directorio de plantilla. Esto no es ideal, ya que no proporciona muchas opciones de configuración, y cada nueva configuración conlleva la sobrecarga de mantenimiento de una plantilla completamente nueva y, probablemente, mucho código duplicado. Es muy poco probable que las configuraciones predeterminadas de estas plantillas se ajusten exactamente a tus preferencias. Es posible que desees agregar Tailwind o componentes de estilo o Storybook, o puedes instalar tu propia biblioteca interna. En estos casos, te quedas solo para unir tu configuración final para múltiples ejemplos o duplicar proyectos anteriores, todo antes de escribir una sola línea de código real.

Queríamos brindar a los desarrolladores un mejor punto de partida. Una interfaz de línea de comandos más sofisticada, extensible y que los acompañe mientras construyen su experiencia de comercio personalizada. Un CLI específico para el desarrollo de Hydrogen que hará más que la creación de proyectos, pero al que llamarás continuamente mientras desarrollas tu proyecto y capaz de un número infinito de configuraciones sin la sobrecarga adicional. Aquí hay un modelo mental de alto nivel de cómo funciona esto. Primero, recopilamos información sobre el proyecto ya sea mediante argumentos en el CLI, un archivo de configuración o solicitudes de entrada. Luego, analizamos el proyecto existente si hay uno o comenzamos desde un proyecto base de Hydrogen y lo convertimos en una representación en forma de árbol JSON. Esto es lo que se conoce como un árbol de sintaxis abstracta o AST. Luego, aplicamos funciones de transformación para mover nodos del JSON, manipulando efectivamente el código en función de las entradas que recopilamos en la primera etapa. Y finalmente, generamos nuevo código a partir del JSON y lo escribimos de vuelta en el disco. Estas etapas, análisis, transformación y generación son comunes en la mayoría de los compiladores. Y estamos utilizando Babbel en el fondo para hacer la mayor parte del trabajo pesado. Para aquellos que no están familiarizados, Babbel es una herramienta que es más conocida por ser una de las primeras formas en que comenzamos a modificar el código escrito utilizando características de JavaScript a una sintaxis más compatible con los navegadores. Cada etapa del compilador se ocupa de una preocupación diferente. No usamos muchos archivos de plantilla como EJS o Handlebar Templates, y solo operamos en el AST y las funciones de transformación son agnósticas al código de entrada. Esto se debe a que utiliza un patrón de código común conocido como el patrón visitante que permite muchas operaciones únicas e independientes en el objeto AST. Una función principal comenzará recorriendo el árbol y emparejando nodos con funciones de transformación. Estas funciones solo se preocupan por los nodos específicos en los que operan y les importa poco el resto del código fuera de esos puntos de interés.

2. Aprovechando los Compiladores y la Experiencia del Desarrollador

Short description:

Dado que cada operación está aislada, se comportan como el componente primitivo en React y podemos agrupar operaciones comunes en un paquete compartido. Esto hace que componer una serie de transformaciones comunes sea trivial y la sintaxis es muy accesible. Con Hydrogen, queremos ser un marco de trabajo con opiniones cuando más importa, preocupándonos por el rendimiento de las imágenes, el almacenamiento en caché de las solicitudes y utilizando el renderizado del lado del servidor y los componentes de servidor de React para proporcionar respuestas no bloqueantes y eliminar las cascadas del lado del cliente. Queremos proporcionar una experiencia de desarrollo que haga que el desarrollo web sea divertido nuevamente. Podemos inspeccionar problemas comunes mientras se utilizan los componentes de servidor de React y guiarlo hacia el uso correcto o simplemente cambiar el código por usted. También auditamos su proyecto en cuanto a accesibilidad y seguridad, conformidad con los indicadores vitales de la web y cualquier violación del marco de trabajo. Esto ha sido una breve mirada bajo el capó de cómo estamos aprovechando los compiladores desde la creación inicial hasta la aplicación de las mejores prácticas, el soporte de mantenimiento continuo e incluso las pruebas internas. Con la CLI de Hydrogen, cada una de estas interacciones culmina en una experiencia de desarrollo poderosa y divertida.

Dado que cada operación está aislada, se comportan como el componente primitivo en React y podemos agrupar operaciones comunes en un paquete compartido. Esto hace que componer una serie de transformaciones comunes sea trivial y la sintaxis es muy accesible. También existen algunas herramientas excelentes como astexplorer.net o el Babel Playground que pueden ayudarlo a escribir y visualizar transformaciones AST.

Imagina poder agregar soporte para aplicaciones web progresivas con un solo comando, o por ejemplo, si escribiste una transformación que agregara internacionalización con todos los manejadores de errores y fallbacks adecuados en su lugar. A un nivel básico, podríamos importar un proveedor y un hook, proporcionar al hook una configuración única basada en su proyecto y envolver la otra aplicación en ese proveedor, pasando el resultado del hook como una propiedad. Por supuesto, también instalaríamos el paquete y todas las cosas fáciles, pero poder manipular el código de esta manera puede llevar a oportunidades bastante poderosas y creativas.

Con Hydrogen, queremos ser un marco de trabajo con opiniones cuando más importa, pero hay ciertos complementos en su proyecto que pueden no tener sentido para usted desde el principio. Si decide más adelante que el proyecto lo requiere, podemos proporcionar un proceso llave en mano en el futuro y con todas las mejores configuraciones predeterminadas. Entonces, ¿en qué somos opinionados? Bueno, nos preocupamos por el rendimiento de las imágenes, el almacenamiento en caché de las solicitudes y el uso del renderizado del lado del servidor y los componentes de servidor de React para proporcionar respuestas no bloqueantes y eliminar las cascadas del lado del cliente. En Shopify, nos apasiona el comercio y queremos brindar a los desarrolladores de comerciantes en nuestra plataforma los bloques de construcción para crear tiendas de alto rendimiento utilizando Hydrogen.

En ese mundo, tenemos opiniones sobre los aspectos difíciles pero no diferenciados del desarrollo y queremos proporcionar una experiencia de desarrollo que haga que el desarrollo web sea divertido nuevamente. Piense en esto como nuestro intento de elevar el nivel base en la medida de lo posible para que pueda elevar más fácilmente el techo dentro de los tipos de experiencias de comercio creativas y personalizadas que desarrolla. Tomemos los componentes de servidor de React. Probablemente no es algo con lo que hayas trabajado mucho todavía y tal vez no estés seguro de qué componente debería ser solo para el cliente, solo para el servidor o compartido, y qué primitivas están disponibles en cada uno de ellos. Bueno, utilizando el mismo proceso de análisis, transformación y generación que he descrito anteriormente, podemos acompañarte. Podemos inspeccionar problemas comunes mientras se utilizan los componentes de servidor de React y guiarlo hacia el uso correcto o simplemente cambiar el código por usted. Podemos proporcionar migraciones integradas directamente en la CLI que analizarán automáticamente su proyecto en busca de cambios que puedan romper en nuevas versiones de Hydrogen y, opcionalmente, aplicar una migración automáticamente. También auditamos su proyecto en cuanto a accesibilidad y seguridad, conformidad con los indicadores vitales de la web y cualquier violación del marco de trabajo. También utilizamos la CLI internamente para alimentar nuestras pruebas de integración, generando configuraciones únicas de aplicaciones Hydrogen sobre la marcha que probamos en navegadores sin cabeza para detectar problemas. Esto nos protege de lanzar nuevas versiones con problemas desconocidos y también tiene la ventaja adicional de que probamos nuestras propias herramientas. Entonces, esto ha sido una breve mirada bajo el capó de cómo estamos aprovechando los compiladores desde la creación inicial hasta la aplicación de las mejores prácticas, el soporte de mantenimiento continuo e incluso las pruebas internas. Con la CLI de Hydrogen, cada una de estas interacciones culmina en una experiencia de desarrollo poderosa y divertida.

Gracias por ver mi charla. Si tienes alguna pregunta o quieres enviarme un mensaje, no soy muy activo en las redes sociales, pero puedes encontrarme como kardagram en la mayoría de los lugares. Bueno, disfruta el resto de la conferencia.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Remix Flat Routes – Una Evolución en el Enrutamiento
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – Una Evolución en el Enrutamiento
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
Cómo hacer un juego web tú solo
JS GameDev Summit 2023JS GameDev Summit 2023
27 min
Cómo hacer un juego web tú solo
This talk guides you on how to make a web game by yourself, emphasizing the importance of focusing on tasks that interest you and outsourcing the rest. It suggests choosing a game engine that allows distribution on the web and aligns with your understanding and enjoyment. The talk also highlights the significance of finding fun in the creative process, managing scope, cutting features that don't align with the game's direction, and iterating to the finish line. It concludes by discussing the options for publishing the game on the web and leveraging unique web features.
Despliegue Atómico para Hipsters de JavaScript
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Despliegue Atómico para Hipsters de JavaScript
This Talk discusses atomic deployment for JavaScript and TypeScript, focusing on automated deployment processes, Git hooks, and using hard links to copy changes. The speaker demonstrates setting up a bare repository, configuring deployment variables, and using the post-receive hook to push changes to production. They also cover environment setup, branch configuration, and the build process. The Talk concludes with tips on real use cases, webhooks, and wrapping the deployment process.
Tu Ritmo con GraphQL
GraphQL Galaxy 2022GraphQL Galaxy 2022
31 min
Tu Ritmo con GraphQL
The Talk discusses the value proposition of GraphQL and its ability to solve common pain points in API development. It highlights the importance of making informed decisions when choosing GraphQL clients, servers, and schema builders. The Talk also emphasizes the need to focus on the best developer experience in the present rather than seeking a perfect long-term solution. Additionally, it mentions the future of the Urkel GraphQL client and the reasons for dropping ReScript support. Overall, the Talk provides insights into the current state and future trends of GraphQL development.
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
React Advanced 2021React Advanced 2021
6 min
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
Top Content
Alex introduces tRPC, a toolkit for making end-to-end type-safe APIs easily, with auto-completion of API endpoints and inferred data from backend to frontend. tRPC works the same way in React Native and can be adopted incrementally. The example showcases backend communication with a database using queries and validators, with types inferred to the frontend and data retrieval done using Prisma ORM.
Uso de UDP en el navegador para conexiones más rápidas entre cliente/servidor
JS GameDev Summit 2023JS GameDev Summit 2023
21 min
Uso de UDP en el navegador para conexiones más rápidas entre cliente/servidor
Top Content
This talk introduces geckos.io, a real-time client-server communication library using UDP and WebRTC. The speaker discusses the benefits of UDP for real-time multiplayer games and explains how geckos.io enables UDP connections between browsers and Node.js servers. The deployment process for geckos.io involves opening UDP ports and handling signaling through an HTTP request. The speaker demonstrates how geckos.io works with Docker and showcases the ability to host multiple servers on the same machine. Overall, this talk provides an overview of geckos.io and its applications in real-time communication.

Workshops on related topic

Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
Construye una Tienda Personalizada en Shopify con Hydrogen
React Advanced 2021React Advanced 2021
170 min
Construye una Tienda Personalizada en Shopify con Hydrogen
Workshop
Matt Seccafien
Cathryn Griffiths
2 authors
Hydrogen es un marco de trabajo y SDK React con opiniones para construir tiendas personalizadas rápidas, alimentadas por Shopify. Hydrogen adopta los Componentes del Servidor React y utiliza Vite y Tailwind CSS. En este masterclass, los participantes tendrán una primera vista de Hydrogen, aprenderán cómo y cuándo usarlo, todo mientras construyen una tienda personalizada completamente funcional con el equipo de Hydrogen.
Creación de tiendas personalizadas en Shopify con Hydrogen
React Summit 2022React Summit 2022
71 min
Creación de tiendas personalizadas en Shopify con Hydrogen
WorkshopFree
Abe Haskins
Megan Majewski
2 authors
Sumérgete en Hydrogen, un marco basado en React impulsado por Shopify. En este masterclass, exploraremos el marco y pondremos en marcha una tienda personalizada rápidamente. Aprenderás cómo (y cuándo) aprovechar los Componentes del Servidor de React y los mecanismos de almacenamiento en caché para construir tiendas personalizadas rápidas y dinámicas.
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
React Advanced 2022React Advanced 2022
81 min
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
WorkshopFree
David Witt
David Witt
Sumérgete en Hydrogen, un marco de trabajo basado en React para construir tiendas en línea sin cabeza. Hydrogen está diseñado para el comercio de Shopify con todas las características que necesitas para una tienda en línea lista para producción. Proporciona un inicio rápido y un entorno de desarrollo rápido para que puedas centrarte en lo divertido: construir experiencias de comercio únicas. En este masterclass, crearemos una nueva tienda en línea y construiremos rápidamente una página de producto. Cubriremos cómo empezar, enrutamiento basado en archivos, obtener datos de la API de Storefront, los componentes integrados de Hydrogen y cómo aplicar estilos con Tailwind.Aprenderás:- Empezar con la plantilla hello-world en StackBlitz- Enrutamiento basado en archivos para crear una ruta /productos/ejemplo- Enrutamiento dinámico /productos/:handle- Consultar la API de Storefront con GraphQL- Mover la consulta dentro de la aplicación de Hydrogen- Actualizar la consulta para obtener un producto por su identificador- Mostrar título, precio, imagen y descripción.- Estilizado con Tailwind- Selector de variantes y botón de compra ahora- Bonus si hay tiempo: página de colecciones
Requisitos previos: - Un navegador basado en Chromium (StackBlitz)- Idealmente experiencia con React. Un conocimiento general de desarrollo web también es válido.
Managers Are From Mars, Devs Are From Venus
TechLead Conference 2024TechLead Conference 2024
111 min
Managers Are From Mars, Devs Are From Venus
Workshop
Mo Khazali
Mo Khazali
Una Guía para Desarrolladores sobre Cómo Comunicar, Convencer y Colaborar Efectivamente con los Stakeholders
Es una historia tan antigua como el tiempo: la colaboración entre desarrolladores y stakeholders de negocios ha sido durante mucho tiempo un desafío, con una falta de comunicación clara que a menudo deja a ambas partes frustradas. Los mejores desarrolladores pueden comprender profundamente las necesidades de sus contrapartes de negocios, comunicar efectivamente la estrategia técnica sin perder a la audiencia no técnica y convencer al negocio de tomar las decisiones correctas. Trabajando en una consultoría, he fallado y tenido éxito en arquitectar y “vender” visiones técnicas, aprendiendo muchas lecciones en el camino.Ya sea que trabajes en una empresa de productos, seas consultor/freelancer, o quieras aventurarte más allá de ser solo un desarrollador, la capacidad de convencer y comunicar claramente con los stakeholders puede diferenciarte en la industria tecnológica. Esto se vuelve aún más importante con el auge de GenAI y el mercado de desarrolladores cada vez más competitivo, ya que la resolución de problemas y la comunicación efectiva son clave para posicionarte.En esta masterclass, compartiré ejemplos del mundo real, tanto buenos como malos, y te guiaré a través de poner la teoría en práctica mediante dojos.
Cómo crear experiencias de edición que tu equipo amará
React Advanced 2021React Advanced 2021
168 min
Cómo crear experiencias de edición que tu equipo amará
Workshop
Lauren Etheridge
Knut Melvær
2 authors
El contenido es una parte crucial de lo que construyes en la web. Las tecnologías web modernas aportan mucho a la experiencia del desarrollador en términos de construir sitios impulsados por contenido, pero ¿cómo podemos mejorar las cosas para los editores y creadores de contenido? En este masterclass aprenderás cómo usar Sanity.io para abordar la modelización de contenido estructurado, y cómo construir, iterar y configurar tu propio CMS para unificar los modelos de datos con experiencias de edición eficientes y agradables. Está dirigido a desarrolladores web que desean ofrecer mejores experiencias de contenido para sus equipos de contenido y clientes.