El Bosque para los Árboles (Sintaxis Abstracta)

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.

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.