Ampliando React utilizando Astro

¡Hola a todos, y gracias por sintonizar mi charla para React Semi 2023. Soy Elion, soy un ingeniero de software en Veebridge en Bélgica, y por un corto tiempo también he sido un Embajador de Astro y ahora también soy un Mantenedor de Astro.

Y hoy les voy a hablar sobre Astro. Así que si quieres seguirme en línea, o contactarme si tienes alguna pregunta, puedes hacerlo en ElionCodes, soy más activo en Twitter, así que sería lo más fácil, pero siéntete libre de contactarme en cualquier lugar donde me encuentres, ¿de acuerdo?

Ahora que sabes quién soy, comencemos con la pregunta de toda esta charla, que es, ¿qué es Astro? Bueno, Astro no es solo un marco de trabajo súper rápido, en realidad es incluso mejor que esos que son increíblemente rápidos. Me gusta llamarlo astronómicamente rápido. Entonces, en resumen, Astro es este marco de trabajo todo en uno construido para la velocidad, y eso puede sonar como una caja vacía en este momento, pero te prometo que se aclarará en las siguientes diapositivas por qué digo eso.

Entonces, mi objetivo para hoy es presentarte la arquitectura de la Isla de Astro y mostrarte cómo se puede utilizar con React, para que puedas ampliar las capacidades de React con Astro. Así que, permíteme comenzar mostrándote un ejemplo teórico. Así que, toma esta página por ejemplo. Podemos dividir todas estas estructuras HTML en bloques, ¿lo ves como una base de Lego? Con bloques agregados a la base, y en esos bloques, bloques pequeños, y en total, tú entiendes la idea.

Ya hacemos esto en un par de frameworks por ahí. Bueno, la mayoría de los frameworks de UI en realidad, como Dittsveld, Vue, Solider, React. Estamos familiarizados con este diseño de componente. Pero en Astro, en realidad puedes hacer algo como esto. Bueno, es teóricamente posible, no se recomienda, se aclarará por qué. Pero puedes elegir diferentes colores o sabores para cada ladrillo, refiriéndote al color como el marco de trabajo de UI. Por ejemplo, si quieres que un componente sea solo JS, o si quieres un componente en Svelte, puedes hacerlo con Astro. Entonces, por eso llamamos a Astro un trae tu propio marco de trabajo. Entonces, Astro es en realidad un marco de trabajo que te permite traer tu propio marco de trabajo a él, lo cual significa que puedes traerlo y te mostraré eso en las siguientes diapositivas. Por ejemplo, todas las integraciones se pueden verificar en el propio sitio web de Astro. Hay una página completa dedicada a todas las integraciones, todas las integraciones oficiales y no oficiales existentes. Y, como puedes ver, sintonizaste un evento que se trata principalmente de React. Así que te mostraré cómo se ve la integración con React en las siguientes diapositivas. Pero, antes de sumergirnos en React con Astro, por supuesto que tenemos que comenzar un nuevo proyecto de Astro. Así que, déjame entrar en la terminal aquí y mostrarte cómo se ve nuestra CLI. Puedes usar cualquier administrador de paquetes que te guste. Me gusta usar pnpm. Pero siéntete libre de usar npm o Yarn. Entonces, simplemente creas algo nuevo y luego ves Houston.

Sí, ahí está. Entonces, Houston es nuestra mascota y nos guiará a través del proceso de configuración de un nuevo proyecto dentro de nuestra terminal. Entonces, te hará algunas preguntas. Por ejemplo, ¿cuál es tu proyecto? ¿Quieres usar una plantilla? Lo cual no quiero. Y luego, por supuesto, instalará tus dependencias y te preguntará si quieres usar TypeScript.

Mientras esperamos, incluso si no usas TypeScript o no te gusta, bueno, si no quieres usar TypeScript o escribir tu propio TypeScript, bueno, Astro seguirá utilizando algo de TypeScript en el backend, lo cual no tendrás que preocuparte, pero debes saber que todavía hay algo de seguridad de tipos sucediendo. Así que elegiré estricto aquí solo para mostrarte cómo funciona y cosas así. De acuerdo, genial. Así de fácil es configurar un nuevo proyecto en Astro. Realmente genial.

Entonces, tal vez abramos nuestro proyecto en VS Code. Sí, ahí vamos. Entonces, para obtener soporte para los archivos de Astro en VS Code, aún debes instalar una extensión separada. Es una integración muy buena, es oficial, así que no te preocupes por eso. Todo lo demás debería funcionar sin problemas. Pero como puedes ver, echemos un vistazo a la sintaxis aquí. Entonces, la sintaxis se siente bastante familiar. Parece algo intermedio. Bueno, en realidad, se parece a HTML regular con algunos fragmentos de JSX en el medio. Pero la mayor parte de lo que podemos ver ahora mismo es HTML. Pero entraré en eso un poco más tarde.

Porque antes de sumergirnos en nuestros ejemplos de código, quiero que eches un vistazo a la estructura de archivos de Astro, porque es muy importante saber de qué es capaz Astro. No hay nada demasiado extraño sucediendo aquí. Tu configuración se realiza en el archivo astro.config.js. Tus componentes y páginas y diseños van en sus directorios separados dentro de la carpeta source. Todo eso debería tener sentido si alguna vez has usado un meta framework como Next o Nuxt antes. Astro tiene enrutamiento basado en archivos, por lo que cada archivo dentro de la carpeta de páginas responderá a su propia página o ruta. Puedes ver que dentro del blog hay un id entre corchetes, eso es una página dinámica, por lo que también es capaz de hacer eso. Y también tenemos la página 404. Pero como puedes ver, también hay una pequeña pista al componente allí, que se llama counter.tsx.

Te lo mostraré en un par de minutos. Así que agreguemos la integración con React a nuestro proyecto. De esta manera, podemos usar componentes de React dentro de Astro. Cuando escribes astro as react, como he hecho aquí, te mostrará qué archivos actualizará ese comando. Te mostrará qué dependencias instalará. Como puedes ver, son las últimas versiones de React y React DOM, y luego las propias integraciones. Muy genial. Es una experiencia de CLI muy buena. Es increíble y me gusta pensar en ello como una mejor versión de CRA, que se llama Create React Astro. Mucho mejor que Create React App porque está basado en Vite, por supuesto. De acuerdo.

Este también es un buen punto para mostrarte lo increíble que es la experiencia para desarrolladores con Astro. Solo tienes que escribir astro add y automáticamente te mostrará una lista de integraciones populares. Tienes los frameworks de UI enumerados allí. También tienes algunos SSR, adaptadores y, por supuesto, otras cosas como Tailwind, por ejemplo. Desde la CLI hasta las páginas de error, Astro siempre tiene una gran experiencia para desarrolladores porque es muy importante para nosotros.

De acuerdo. Este es el archivo de configuración actualizado. Simplemente importamos la integración de React y la agregamos a nuestra lista de integraciones, bueno, en el array, en realidad. Y todo eso se hizo automáticamente, bueno, incluso automágicamente, sin ningún problema. Muy genial.

De acuerdo. Ahora que hemos importado e instalado nuestra integración de React, podemos comenzar construyendo componentes de React. Así que sumerjámonos y hagámoslo. Para comenzar a construir con React y Astro, simplemente creamos un nuevo componente, al que llamamos counter.tsx. Cuando usas la extensión tsx o gsx, el compilador de Astro automáticamente sabe que te refieres a un componente de React.

Como puedes ver, solo estoy escribiendo un contador básico de React. Probablemente todos hayamos hecho esto un par de veces, así que probablemente no necesite explicar todo. Pero es solo una función básica y simple en React. Devuelve un poco de HTML donde vamos a usar algunos estados. Vamos a tener dos botones, uno que aumenta el número del estado y otro que disminuye el número del estado. Y aquí voy a escribir cómo definimos ese estado. Y como puedes ver, voy a eliminar el React aquí e importar solo el estado de React. Y esto en realidad es mucho más genial de lo que puedas pensar al principio. Porque, en realidad, estamos usando este componente en Astro, pero aún así, estamos importando el estado de la propia biblioteca de React. No lo estamos importando de la integración de React de Astro. Eso básicamente significa que puedes copiar y pegar componentes desde, por ejemplo, un sitio web XJS o un antiguo sitio web de creación de React. Puedes simplemente copiar y pegar esos componentes en Astro y funcionarán. ¿Qué tan genial es eso? Así que sí, realmente es una cosa genial. La mayoría de los paquetes también funcionarán. Bueno, la mayoría, no todos ellos.

Pero, por ejemplo, React Fibre también funcionará con Astro. Así que eso también es algo genial para tener en cuenta.

De acuerdo, ahora que hemos construido nuestro componente de contador, todavía tenemos que agregarlo a nuestra página, por supuesto. Así que podemos volver a nuestro archivo index.astro, que será simplemente la página de inicio, y podemos ver los corchetes en la parte superior allí. Bueno, los bloques de código. Podemos importarlo como lo haríamos normalmente con JavaScript, colocarlo en la página. Y si ahora vamos a nuestro servidor de desarrollo, que es localhost 3000, por supuesto, puedes ver que realmente está allí en la página. Ahora, puedes ver que estoy pasando el cursor sobre esos botones. En realidad, estoy haciendo clic en ellos, pero no puedes verlo, por supuesto. Pero el estado no se está actualizando. Entonces, ¿hay algo extraño sucediendo allí ahora, verdad?

Bueno, en realidad, este es el comportamiento deseado. Astro no incluye ningún JavaScript por defecto. Así que echemos otro vistazo a eso. Si abrimos nuestras herramientas del navegador aquí, voy a hacer clic una vez más para que puedas verlo. Voy a abrir nuestras herramientas de desarrollo del navegador. Bueno, si vamos a nuestra pestaña de red y actualizamos, puedes ver que no se está enviando nada excepto HTML. Eso es increíble. Entonces, por supuesto, ¿qué pasa si necesitas interactividad? ¿Qué pasa si quieres interactividad en tu sitio web? ¿O qué pasa si quieres renderizar tus componentes condicionalmente o tener componentes que se actualicen? Bueno, por supuesto que es posible dentro de Astro. No es que sea completamente generado del lado del servidor. Es posible, y lo llamamos hidratación parcial. Permíteme cargar los activos aquí. Se vuelven un poco locos, pero se supone que representa una piscina dentro del cuero. Está bien, ahora está mejor. De acuerdo, genial. Pero puedo escucharte pensar, ¿qué es la hidratación parcial? Esa terminología no tiene sentido. Bueno, a lo largo de las veces que he dado esta charla, lo he hecho un par de veces, he perfeccionado como la analogía perfecta para ello. En realidad, es esta planta. Así que la hidratación parcial, por supuesto, hidratamos las plantas. Y si no regamos o hidratamos nuestra planta lo suficiente, nuestra planta se sentirá muy triste. Se sentirá simple.

Se sentirá aburrido. Si lo hidratamos demasiado, nuestra planta se ahogará en agua. O si lo llevamos a nuestra aplicación, nos ahogaremos en deuda técnica, tamaño del paquete, o complejidad general. Entonces, sí, veamos esto teóricamente en un ejemplo real.

Imagina que tenemos esta página en un marco meta de JavaScript normal. Piensa en Next o Nuxt o incluso en Svelte en ese sentido. Todos estos diferentes componentes aquí requerirán JavaScript para renderizar, incluso si algunos de ellos ni siquiera necesitan interactividad, por ejemplo. Mira el pie de página. Son enlaces básicos. Tal vez sea una imagen. ¿Por qué necesitamos JavaScript si en realidad no lo necesitamos? Así no es como se supone que funciona la web.

Entonces, en un mundo perfecto, en realidad queremos algo más como esto. O simplemente seleccionamos los componentes que queremos que sean interactivos y luego enviamos JavaScript solo a esos pequeños componentes. Y en realidad esto es algo que Astro puede hacer. Entonces, en Astro puedes hacer esto con la directiva del cliente, que te he mostrado aquí. Usando la directiva del cliente, podemos elegir qué componentes deben usar JavaScript, pero también tenemos la flexibilidad de controlar cómo o cuándo nuestros componentes deben volverse interactivos. Y por supuesto, te lo voy a mostrar. Entonces tenemos un par de opciones para la hidratación y veamos la mayoría de ellas. La carga del cliente tiene sentido. Solo comenzará a hidratar tu componente tan pronto como el hilo principal del navegador esté libre. Muy útil y probablemente sea el que usaré en todos mis componentes. Excepto los visibles para el cliente, pero ya verás. Así que también voy a demostrar este para que puedas ver qué hace en realidad. La carga del cliente es exactamente lo que dice, comenzará a hidratar tu componente tan pronto como pueda. De acuerdo, veamos la directiva de carga del cliente. Si la agregamos aquí a nuestro componente de contador, que es el mismo que hemos hecho antes, voy a abrir mi terminal aquí y voy a construirlo y previsualizarlo. Y la razón por la que estoy haciendo esto es porque quiero que veas el resultado enviado real. Por supuesto, si uso el servidor de desarrollo, Vite enviará algo de JavaScript de forma predeterminada, lo cual tiene sentido. Pero ahora puedes ver que tenemos un par de archivos de JavaScript. Y sí, exactamente. Ahora funciona.

Como puedes ver, hay uno que dice counter.jsx blah blah blah. Ese es el que se asegura de que tu componente esté hidratado. El contador es completamente funcional como un componente React dentro de Astro. Muy genial.

De acuerdo. Luego tenemos client media. Client media es una directiva muy genial. Es perfecta para componentes solo de móvil o de tablet. Te permitirá comenzar la hidratación cuando se cumplan las consultas de medios especificadas. Tiene sentido.

También tenemos client-visible. Como mencioné antes, es una muy poderosa. Solo comenzará a importar tu JavaScript tan pronto como el componente entre en la vista. Utiliza el observador de intersección para eso. Cambiemos client-load por client-visible aquí, para que puedas ver qué hace. También agregaré un par de textos porque si es visible al instante, no verás ninguna diferencia. Estoy copiando y pegando esto varias veces en lugar de usar un atajo de imagen. Lo sé. Lo siento mucho. Soy muy malo programando en vivo. Aunque esto está pregrabado.

De acuerdo, ahora voy a iniciar la construcción nuevamente. Puedes ver que nuestras construcciones son muy rápidas, así que no me importa dejar esto aquí. De acuerdo, estamos en el navegador. En el momento en que comenzamos a desplazarnos hacia abajo, puedes ver, bam, ahí está nuestro JavaScript. Súper genial. En el momento en que el elemento del contador aparece, se hidrata al instante. Y por supuesto, también es completamente funcional, lo cual tiene sentido. Increíble. Echemos otro vistazo a nuestra aplicación web teórica.

Ahora que tenemos una mejor comprensión de nuestras directivas del cliente, tal vez podamos hacer que este ejemplo de página web sea astronómicamente rápido. O incluso astronómicamente optimizado. Así que intentémoslo juntos, pensemos juntos. Sé que no tengo interactividad, pero solo pensemos en ello.

Comencemos con el encabezado. El encabezado es un componente que siempre está en la parte superior, requiere cierta interactividad, como botones por ejemplo, cambiadores de tema y cosas así. Por lo tanto, tiene sentido enviar JavaScript primero a eso. Entonces, ¿qué directiva del cliente usaríamos para eso? Probablemente estés pensando en client load, eso tendría sentido. Y estás en lo correcto. Simplemente porque client load envía tu JavaScript tan pronto como se carga el contenido inicial del DOM, es una parte importante aquí en el encabezado de la experiencia general del usuario y del sitio, especialmente si tienes un modo oscuro o incluso un botón móvil o lo que sea.

¿Y qué pasa con la barra lateral izquierda? Tiene sentido intentar diferir la barra lateral tanto como sea posible porque está en un sitio. Para esto, tenemos la directiva del cliente, por supuesto. Oh, veo que fui demasiado rápido. Ya tenía el carrusel de imágenes allí, que es client visible. Pero déjame explicarte por qué usamos client visible allí. Porque es un carrusel de imágenes, probablemente sea un componente muy pesado para cargar. Tal vez dependa de otra biblioteca y tal vez tenga algunas animaciones. Y todas esas cosas probablemente tendrían sentido solo si ves ese componente porque de lo contrario estás ralentizando toda tu página solo por algunas imágenes que un usuario podría nunca ver. Y eso significa que ya no verías esto, sino que verías esto, lo cual es realmente genial. Entonces, el ingrediente secreto de lo que nos hace, esto es el ingrediente secreto en realidad, lo que hace que Astro sea tan perfecto para SEO. Todos los componentes son puros HTML, excepto si los hidratas y el contenido es completamente indexable. Todo eso sin tener que enviar toneladas de JavaScript. Eso es lo que un sitio de Astro te ofrece cuando lo envías a producción. Y en realidad puedes ver esto en tiempo real en nuestro medidor de emoción de Astro, lo que sea que tengamos. Es una herramienta en línea donde medimos todas las puntuaciones, las puntuaciones de Lighthouse de todos los sitios de Astro en producción. Y es increíble ver cuántos de ellos tienen todas las puntuaciones en cientos.

De acuerdo. También tengo, por supuesto, una pequeña demostración de tener datos dinámicos, por ejemplo. ¿Qué pasa si queremos tener una API de chistes? ¿Queremos obtener un chiste de la API? Así que agreguemos el código y agreguemos el HTML. Ahí vamos.

Queremos un chiste, así que simplemente podemos hacerlo, bien, aquí está la API, obtengámosla, configúrala. Y aquí está el chiste. Es muy fácil. Ten en cuenta, también, como el nivel superior, son una característica realmente genial. Realmente impresionante. También puedes ver aquí la combinación de JSX dentro del HTML, que es pura sintaxis de Astro. Así que es realmente genial, muy guay. Probablemente estés acostumbrado a ello. Se sentirá como algo natural para ti.

Ahora, si vamos a nuestro navegador y tenemos los chistes, puedes ver que los chistes se muestran en la pantalla. Ahora, hay un detalle a tener en cuenta. Si actualizara esta página verías que no obtiene una API. Eso se debe a que Astro es, por supuesto, SSG de forma predeterminada. Por lo tanto, solo obtendrá la API una vez en el momento de la construcción, lo que también significa que si actualizas esta página cien veces todas esas cien veces serán la misma respuesta exacta de la API sin realmente... porque básicamente lo compilas a HTML y solo envías ese HTML. Así que el chiste se mantendrá igual. Por supuesto, hay una forma de solucionar esto. Podrías extraerlo en un componente.

También tenemos una gran historia de markdown en Astro. Podemos agregar algo de texto en markdown pero también puedes usar MDX. Y lo genial de MDX es que también puedes importar un componente de contador. Por supuesto, no funciona aquí y eso es exactamente porque lo mismo que te dije antes se compila todo a HTML. No enviará ningún JavaScript de forma predeterminada. Pero lo genial es que las directivas del cliente son totalmente compatibles en markdown. Bueno, markdown extendido así que puedes seguir adelante y usarlo y luego verás que el contador ahora es interactivo. Así que eso es realmente genial para crear contenido. Incluso puedes hacer páginas completas en MDX sin preocuparte por ello. Lo que te he mostrado sé que es un poco abstracto pero abre muchas posibilidades. Por ejemplo, puedes obtener estos datos de un CMS y así sucesivamente. Por supuesto, también intentamos documentar tanto como sea posible con Astro.

Actualmente estamos trabajando con el equipo de front matter para agregar una nueva guía de CMS, por ejemplo. Puedes encontrar todas ellas en la documentación de Astro.

Por supuesto, mi tiempo casi se acaba. Esto tampoco es todo lo que ofrece Astro. Astro también tiene integraciones fáciles con preprocesadores de estilo. Por ejemplo, es tan fácil como instalar SAS con NPM, por ejemplo y simplemente funciona porque Astro tiene soporte para CSS. Astro también admite Denoise, un tiempo de ejecución. También hay un paquete de precarga de primera clase. Hay una integración de imágenes para optimizar y estilizar tus imágenes. Por supuesto, también hay integraciones de Tailwind CSS. Si deseas descargar todo tu JavaScript del hilo principal, puedes usar Party Town o los trabajadores web de Cloudflare. Adaptadores de implementación, por ejemplo, para Vercel, Netlify, etc. Incluso puedes usar los mismos con SSR también. Y desde la versión 2 de Astro, también existe la posibilidad de utilizar representación híbrida o crear puntos finales de API en tu proyecto de Astro. También es muy genial. Y luego, por supuesto, hay colecciones de contenido pero eso sería un tema completamente diferente para una charla porque llevaría demasiado tiempo.

Genial, ahora que has visto algunas de las funciones y ventajas de la arquitectura de Astro, ¿por qué deberías usar Astro? ¿Por qué no preferirías Astro en lugar de otros META frameworks como Next, Nuxt, Solid Start, etc.? Todos esos ejemplos hacen que Astro, todos los ejemplos anteriores en realidad, hagan de Astro el marco definitivo de todos ellos, ya sea para SEO, experiencia de desarrollo o rendimiento. Y dado que la mayoría de tu, o incluso todo tu HTML se renderizará en tiempo de construcción, los rastreadores estarán felices porque podrán indexar todo. Entonces, sí, si lo comparas con otros frameworks, puedes ver que Astro está en la cima allí haciendo cosas muy buenas.

Si estás interesado en probar Astro, simplemente ve a astro.new en tu navegador. Puedes configurar todo un proyecto en dos segundos en Stack Blitz, va muy rápido, todo en el navegador, realmente genial para jugar. La documentación de Astro también es increíble. Intentamos hacerla accesible para todos y fácilmente accesible para todos. Sería un gran lugar para que comiences si quieres leer al respecto. Si no te apetece, puedes ir a la documentación, también hay un tutorial interactivo completo sobre cómo puedes construir tu propio blog usando Astro. También estamos trabajando en uno nuevo específicamente sobre la arquitectura de las islas de Astro, también muy genial. Y luego, por supuesto, he puesto algunos enlaces aquí para que puedas comenzar dentro del espacio de Astro. Puedes consultar el tutorial allí. También está astro.build.chat que es nuestro servidor de Discord. Hay un equipo de soporte completo que te ayudará si tienes alguna pregunta y te guiarán en tu viaje astronómico a través del espacio. Genial, esto concluye mi charla. Gracias por ver y espero que te resulte interesante. Y por supuesto, si alguna vez encuentras algún problema en Astro, no dudes en preguntar. Sí, este es mi sitio web y mi nombre de usuario en Twitter así que no dudes en contactarme. Gracias a todos y espero verte pronto. Adiós.