Probablemente, en los últimos años hayas escuchado el nombre de Astro, un metaframework Javascript para hacer páginas o sitios web que se está haciendo muy popular. ¿Por qué Astro es especial respecto a la gran cantidad de frameworks que ya existen en el ecosistema Javascript?
La particularidad de Astro es que el enfoque es muy diferente a la mayoría de metaframeworks existentes y cubre muy bien ciertas necesidades que otros frameworks no cubren. Mientras que muchos se enfocan principalmente en mejorar la experiencia de desarrollo (que sea cómodo al desarrollar), descuidan otros detalles como la eficiencia final o la necesidad de añadir complejidad extra.
Astro destaca especialmente en estos detalles:
- 1️⃣ Mantiene una experiencia de desarrollo (DX) cómoda y simple.
- 2️⃣ Es eficiente: Prioriza HTML e intenta evitar Javascript cliente.
- 3️⃣ Evita añadir complejidad extra y centrarse en las bases.
Veamos estos aspectos desglosados para entender cuando es interesante decantarse por Astro.
Reduce Javascript y prioriza HTML
Una de las filosofías principales de Astro es Reducir en lo posible la cantidad de Javascript cliente y priorizar HTML si es posible. Usar Javascript es cómodo, la mayoría de los desarrolladores prefieren utilizarlo para hacer cosas de forma dinámica, reutilizable y automatizable. Sin embargo, el gran problema es que ese código Javascript se termina ejecutando en el navegador del usuario, digamos que «tiene que construirse» cada vez que cargas la página.
Astro lo enfoca de otra forma: Puedes usar Javascript en tu editor (en local), si es posible, se transforma a HTML (ya construido), que es lo que cargará el navegador. De esta forma, una web construida con Astro será mucho más rápida que con otro framework basado en Javascript cliente.
Esto que hemos mencionado es un resumen sencillo del concepto SSR/SSG first:
- 1️⃣ SSR: La web se construye en el servidor y se envía al usuario ya construida.
- 2️⃣ SSG: La web se construye antes de subirla al servidor.
- 3️⃣ CSR: La web se envía sin construir y se construye en el navegador del usuario.
Aunque con Astro se puede hacer cualquiera de las anteriores, por defecto usa SSG.
Arquitectura de islas
Otro de los conceptos que utiliza Astro y se diferencia de muchos otros metaframeworks es que utiliza una Arquitectura de islas. ¿En que se basa esto? Básicamente, la filosofía de Astro define que un alto porcentaje de la web es contenido estático, que no requiere ser dinámico, lo cuál puede ser costoso en términos de velocidad de carga o rendimiento.
Astro divide la app en «islas», donde todas actúan como islas estáticas, salvo aquellas que el desarrollador puede marcar como dinámicas, ya que necesitan una interacción más compleja.
Compatible con frameworks UI
Bastante relacionado con lo anterior, la mayoría de los desarrolladores prefieren trabajar con frameworks Javascript porque son especialmente cómodos y tienen una mejor experiencia de desarrollo (DX) que otras herramientas. La gran desventaja, es que generalmente también son más lentos e ineficientes.
Con Astro te quedas con lo mejor de ambos mundos. Al poder dividir en islas, puedes trabajar con frameworks UI y despreocuparte de estos aspecto, manteniendo el máximo posible de la aplicación de forma estática. Además, aunque no suele ser lo común, puedes incluso tener varias partes construidas en diferentes frameworks de Javascript en una misma aplicación.
Por si fuera poco, la mayoría de las librerías o complementos del ecosistema de Javascript, tienen integraciones o adaptadores para poder utilizarse en Astro. Por ejemplo, TailwindCSS uno de los frameworks de CSS más utilizados últimamente, es compatible con Astro y se puede utilizar sin problemas.
Aunque Astro tiene integración con estos frameworks y librerías, siempre deberías seguir un criterio de no añadir dependencias si no son lo suficientemente importantes para tu caso. Añadir integraciones o frameworks harán que el rendimiento sea menor y la complejidad de la app sea mayor. Mi consejo es que comiences trabajando de forma vanilla y poco a poco vayas escalando.
Markdown: Ideal para contenido
Si tu caso de uso se trata de crear una página donde predomina el contenido de texto, es probable que Astro sea una excelente opción para ti. Astro permite crear facilmente una estructura de carpetas con ficheros markdown donde te centrarás en escribir el contenido.
Luego, desde Astro, puedes añadir plantillas, marcado, estilo y crear una página o sitio web que complemente ese contenido independiente que tienes en esos ficheros .md. Tiene incluso un sistema de colecciones que permite organizar todo de forma más práctica y rápida.
DX: Experiencia de desarrollador
Por último, y probablemente uno de los aspectos más importantes, es que Astro se centra en que la experiencia de desarrollo (DX) sea excelente y mucho mejor que trabajar con otros sistemas.
Vanilla: Si te gusta trabajar simplemente con tecnologías vanilla, puedes crear tu app en Astro sin frameworks de UI y utilizar simplemente HTML, CSS y Javascript, sin necesidad de frameworks.
Frameworks e integraciones: Si te gusta trabajar con React, Vue, Svelte u otros, Astro te permite crear componentes en cualquiera de estos frameworks y con una integración reconocerlos y utilizarlos sin problema junto a Astro.
Filosofía HTML primero: Uno de los puntos interesantes de Astro es que es muy natural e intuitivo. Astro utiliza HTML como primera opción, y puedes usar componentes simplemente conociendo un poco (muy poco) de Javascript y HTML.
