Astro & Fresh - Comprendiendo la Arquitectura de Islas

Hola a todos. Quiero hablar sobre la arquitectura de islas hoy. Es una nueva forma emergente de construir sitios web que te permite construir sitios web con poco o incluso sin JavaScript. Las bibliotecas líderes en esto son Astro y Fresh. Intentaré hacer una demostración de Astro en esta charla y exploraremos cómo implementa la arquitectura de islas.

Pero antes de llegar allí, quiero sentar las bases de por qué existe algo como la arquitectura de islas y cómo llegamos a este punto. Así que un poco sobre mí, mi nombre es Arpit. Puedes encontrarme en línea. Trabajo en el espacio de Web 3.0 para un protocolo DeFi y comencemos.

Entonces, pensemos en el tipo de sitios web que estamos acostumbrados a construir. Construimos blogs, documentaciones o aplicaciones muy impulsadas por datos, algo como Facebook que tiene mucha información para mostrar al usuario. Podemos dividirlos en dos tipos diferentes de sitios web: sitios web impulsados por contenido y sitios web impulsados por datos. Ambos tienen diferentes necesidades y diferentes tipos de escala que están tratando de lograr y debemos intentar usar la herramienta correcta para el trabajo.

Entre ellos, tenemos de todo. Como dije, sitios web impulsados por contenido y sitios web impulsados por datos. Pero esto no es una cosa de elegir uno u otro. Hay algunos sitios web que tendrán mucho contenido en una página, pero la otra página será principalmente estática y nada más. La razón por la que menciono esto es que estamos acostumbrados a construir muchos de estos con las mismas herramientas. Y esas herramientas son bibliotecas de componentes que se han vuelto muy populares en la última década más o menos. La más popular es React, pero algunos de ustedes pueden estar usando Vue, Svelt o SolidJs. Los beneficios de estos son que son componibles. Puedes combinarlos en diferentes componentes. Puedes reutilizarlos en toda tu aplicación. Incluso en sistemas de diseño, puedes usar tipos similares de componentes en diferentes plataformas incluso. Por lo general, son fáciles de escribir, especialmente si los escribes en pequeños fragmentos. Son muy fáciles de eliminar. La cosa sobre estas bibliotecas es que todas son bibliotecas del lado del cliente. Por lo general, no renderizan nada en el servidor. Debido a esto, tienes un problema y los motores de búsqueda no pueden indexar fácilmente tus sitios web. También entregan una carga de JavaScript grande porque tienes que servir tu propio JavaScript junto con la biblioteca en sí.

Junto con eso, no sirves ningún HTML. Por lo tanto, tienes todas las desventajas sin ninguna de las ventajas. La principal es que hay un panel de contenido grande llamado LCP, que es lento. Esto significa que tarda mucho tiempo en que el contenido sea visible para los usuarios.

La forma en que resolvemos esto en la industria es utilizando el renderizado en el lado del servidor. Todas estas bibliotecas tienen sus propios frameworks. React tiene Next, Vue tiene Nuxt, y todos ellos se basan en algo nuevo. Los beneficios son que renderizas algunas partes de tu aplicación como HTML y lo sirves a los usuarios. La obtención de datos puede ocurrir en el servidor. Con Next.js, puedes obtener datos una vez cuando se construye la aplicación, o cada vez que el usuario accede, que es lo que hace su función getServerSideProps. Esto permite un buen SEO para ti, porque junto con JavaScript también estás sirviendo HTML, y tiene un LCP más rápido. Un problema con esto es que aún sirves una carga de JavaScript muy grande que es posible que no necesites realmente. Estos frameworks dependen principalmente de la hidratación de la página completa.

Lo que quiero hablar a continuación es de la hidratación. La hidratación consiste básicamente en servir una página HTML y junto con eso servir un archivo JavaScript y hacerla interactiva. El HTML mostrará algunos datos en la pantalla o algún contenido en la pantalla mientras el JavaScript se carga y después de que el JavaScript se carga, hará que tu contenido sea interactivo agregando listeners de eventos, agregando listeners de clic, por ejemplo. Todo lo que harías con JavaScript, esto es lo que es la hidratación.

En este momento, pensarías en la hidratación como sin hidratación o hidratación de página completa. Sin hidratación es simplemente que tu servidor renderiza algo de HTML y lo sirve a los usuarios y eso puede llevarte bastante lejos. Solo HTML y CSS te llevarán bastante lejos, pero necesitarás algo de JavaScript más adelante. Entonces, la forma en que estos frameworks permiten esto es cargar todo el JavaScript para la página completa de una vez y luego el framework que estás utilizando cargará y se hará cargo de todo el sitio web y será responsable de la renderización, cualquier renderización que ocurra. Así que hay un punto intermedio entre esto que es la hidratación parcial. Entonces, cuando estás escribiendo un framework basado en componentes, puedes pensar en algunos componentes que cargarán solo HTML y algunos componentes que cargarán su JavaScript que necesitan junto con el HTML. Lo que esto te permite hacer es crear islas de interactividad. Lo que esto significa es que tendrás múltiples elementos en tu página que son responsables de cargar sus propios datos y esto significa que tu aplicación es básicamente una colección de muchas aplicaciones o muchas islas que cargan sus propios datos y son responsables de renderizarse a sí mismas básicamente.

Así que tomemos un ejemplo, por ejemplo, y tenemos un diseño básico para un sitio web. Es posible que desees tener un encabezado, contenido de texto, un carrusel de imágenes y un pie de página. Probablemente no necesites que todos estos se rendericen a través de React o algo así. Puedes renderizar algunos de estos en el servidor y no necesitas cargar el JavaScript para eso en absoluto. Debes identificar qué parte de tus aplicaciones no necesita JavaScript en absoluto y luego servir eso básicamente. Por ejemplo, un encabezado puede tener una barra de búsqueda, una barra lateral puede tener cierta interactividad y el carrusel de imágenes tendrá listeners de clic. Entonces, necesitan algún tipo de JavaScript que puedan cargar y habrá islas que cargarán JavaScript para sí mismas. Y el pie de página y el contenido principal de texto, es posible que realmente no necesiten JavaScript. No tiene sentido escribir un componente de React para ellos y cargar ese JavaScript de vuelta al usuario cuando realmente no lo necesitan.

Un ejemplo que también quiero mencionar es Smashing Magazine. Mira este sitio web. Todo lo que ves aquí se puede renderizar en el servidor y probablemente no necesitas nada que necesite interactuar con él. Todos estos son enlaces y hacer clic en enlaces es una característica que el navegador te brinda de forma gratuita básicamente. Pero la entrada. Si busco async await aquí, esto está ejecutando alguna consulta de búsqueda en segundo plano y todo esto es posible gracias a algún JavaScript. No puedes deshacerte de él por completo. Entonces, la forma ideal sería renderizar todo esto en el servidor e inyectar algún tipo de JavaScript. Esta barra de búsqueda en sí misma sería una isla de interactividad donde carga solo el JavaScript que necesita.

Entonces, eso es la hidratación parcial y eso nos lleva a la implementación de la arquitectura de islas architecture y la hidratación parcial. Entre eso, quiero hablar sobre astro que es astro.build. Esta biblioteca es un marco de trabajo para implementar la arquitectura de islas. Veamos una demostración de esto. ¿Cómo lo hacemos? Ejecutamos el asistente de configuración. Entonces, pnpm create astro. Vamos. Llamémoslo test. Test no está vacío. Wow. Llamémoslo test uno. Hagamos lo básico. ¿Te gustaría instalar? No lo hagamos ahora mismo. Sin repositorio git. Y realmente me gusta TypeScript con tipos estrictos. Genial. De hecho, ya había creado una demostración de Astro para esto. Así que vamos a ver qué obtenemos. Lo siento, queremos ver esto en acción. ¿Cómo ejecutamos esto? Hay algunos scripts. Vamos a ejecutar el script dev pnpm dev. Y lo siento. Vamos a localhost. Esto es 3000. Y aún no vemos nada. ¿Por qué no vemos nada? Una cosa sobre esto, sigue el enrutamiento con archivos de página, enrutamiento basado en archivos. Así que ahora vemos que no estamos renderizando nada. Veamos qué sucede cuando renderizamos nuestro componente hello.

Dice hola, soy Arpit. ¿Cómo estás? Bien, exploremos qué es este componente hello. También presta atención a cuál es la extensión de archivo. Es dot astro. Entonces dot astro viene con su propio marco de componentes y modelo de renderizado de componentes, básicamente. Por lo tanto, puedes ejecutar JavaScript en esta área aquí mismo, y debajo de eso habrá un componente de archivo único que puedes exportar e importar en otros archivos de componentes, básicamente.

Entonces quiero renderizar en un H1 con el nombre, y esto es JSX, al igual que React, como muchos de ustedes pueden estar familiarizados. Si actualizo esto a algo como esto, actualizado, genial. Como puedes ver, esto es realmente rápido, así que es bueno que también implementen una actualización rápida. Una cosa, entonces este JavaScript, ¿dónde se ejecuta? Imprimió hola aquí, pero ¿se imprimió aquí? No lo hizo. Parece que este componente Azure solo se ejecuta en el servidor. Entonces en realidad no enviaste ninguno de estos JavaScript al usuario. Esto se convierte en HTML y luego se envía al usuario. Esto significa que puedes usarlo como un formato de plantilla, donde puedes hacer una búsqueda de... Fetch algo desde tu base de datos, básicamente. Y eso se ejecutaría como PHP. Hay una broma en la comunidad de Astro que dice que Astro es solo PHP, donde buscas todos tus datos aquí y renderizas plantillas. Y eso es en cierto modo verdad, realmente.

Veamos algunos otros ejemplos. Quiero construir un contador, un ejemplo interactivo de lo que debería suceder aquí. Comentemos esto. Quiero construir un contador de react, que básicamente agregará un botón de incremento y un botón de decremento. Entonces, un ejemplo simple, useState, lo incrementaremos con add, lo decrementaremos con subtract. Y veamos qué hace esto. En un archivo de Astro, puedo importar componentes React. Esto es realmente asombroso. Entonces, veamos cómo funciona esto. Componentes, contador react, punto, ¿necesito? Probablemente no. Sí. Muy bien.

¿Qué pasó? Contador React. Estoy haciendo clic en él, pero no pasa nada. ¿Por qué es eso? Esto es extraño. ¿Está roto? No. Entonces, la cosa es que esto no es un error, es más bien una característica, en Astro.build, no enviamos JavaScript por defecto. Entonces, ¿qué significa eso? ¿Cómo habilitas JavaScript entonces? Porque estamos usando React, obviamente, queremos enviar JavaScript, no funciona sin JavaScript.

Por defecto, vemos que se renderizó lo que sea que fuera la salida, por defecto, lo que se renderizaría en el servidor, podemos habilitar JavaScript mediante estas directivas, estas directivas del cliente. Entonces, ¿qué es esta carga del cliente? Esto significa que JavaScript se cargará junto con la página cuando se cargue toda la página. Entonces, ahora si hago clic en él, ahora funciona. Eso es increíble, ¿verdad? Entonces, JavaScript solo se carga cuando lo necesitas. Esto significa que también hay otras directivas. Idle, significa que tan pronto como pueda comenzar a cargarse, básicamente. Media es, puedes cargar JavaScript condicionalmente, si estás en un dispositivo móvil, solo se cargará ese componente en el móvil, si estás en un escritorio, solo se cargará ese componente en el escritorio. Esto es lo mismo que las variables CSS. Luego, client-visible, utiliza internamente algo llamado observador de intersección para observar si el componente está en pantalla o no, y si está en pantalla, solo cargará el JavaScript en ese momento. Entonces, si estás construyendo una página de destino muy grande, por ejemplo, y tienes que seguir desplazándote y desplazándote, pero también quieres que la página de destino se cargue muy rápidamente, puedes habilitar algo como esto donde el HTML se cargará y se renderizará muy rápidamente, y el JavaScript se cargará progresivamente cuando el componente entre en la vista. Entonces, por ahora queremos mantenerlo en carga.

Otra cosa sobre Astro es que es un marco de múltiples componentes, como habrás visto, componente sólido y un componente hinchado aquí. Entonces, sí, veamos cómo funciona eso. Puedes renderizar varios de estos componentes en Astro, incluso en el mismo archivo, de hecho. Veamos cómo sucede esto, por cierto. Entonces, astro.config, estamos cargando React y Tailwind aquí. Como habrás notado, estoy usando Tailwind aquí. Esto hace que Astro pueda manejar componentes de React y componentes de Tailwind. Entonces, veamos cómo funcionan estas integraciones. Astro tiene integraciones para todos estos frameworks, alpinejs, lit, preact, vue que no estamos cubriendo aquí. Pero veamos cómo agregamos estos. Entonces, npx astro add-react, okay. Tengo un componente sólido y un componente hinchado escritos aquí. Veamos si podemos agregar esto.

Astro add, veamos si podemos agregar múltiples de estos. Solidjs y swelled. Vamos. Sí, sí, ya, vean qué inteligente fue esto. Así que agregó solidjs y swelled a nuestra configuración automáticamente cuando hicimos un astro add. Así que veamos un componente sólido aquí.

Solidjs es muy similar a react. Así que creamos una señal. Creamos una función de suma y una función de resta y esto se verá casi exactamente igual excepto que el contador será una llamada a función. Y veamos. Oh, no lo importamos. Importémoslo. Contador sólido. Vean qué increíble es esto. Estamos ejecutando un componente React y un componente sólido en la misma página. Vamos un paso más allá.

Este también es un componente swelled que escribí. Lo mismo, una función de suma, una función de resta, solo incrementamos de manera diferente aquí, adjuntamos nuestros controladores de clic y importamos, digamos, solid. ¿Por qué son impresionantes múltiples bibliotecas? Imaginen que están construyendo una aplicación realmente grande, donde múltiples equipos están trabajando en diferentes tipos de aplicaciones y tienen diferentes necesidades, podrían estar trabajando en dos proyectos diferentes y un equipo quiere usar React y otro equipo quiere usar Solid, y teóricamente podrían hacerlo, bueno, en realidad ahora pueden hacerlo, y lo mismo con cualquier otro framework, y digamos que quieres migrar lentamente de una base de código basada en React a una base de código basada en Solid, podrías reemplazar progresivamente cada uno de los componentes que tienes y pasar a un framework diferente, básicamente. Sí, esto es SolidJS. Esto es ReactJS. Esto es SwellJS. En la misma cosa, habilitado por AstroJS, y eso es todo. Adiós.