Astro es un framework para sitios web orientados al contenido, como blogs revistas, o cualquier monstruo de Frankenstein que sea le ocurra a marketing.

Astro es popular por muchas razones además de su increíble comunidad Open Source (recuerda escuchar el episodio del podcast sobre Open Source) también conceptos como el de sus islas con las que logra reducir el JS necesario hasta en un 90% de lo que necesitan otros frameworks. ⚡️ Pero lo mejor, es que puedes usar la herramienta frontend de tu preferencia.

Como React, Svelte, Vue o incluso Solid ¡puedes hasta combinarlas! 🤯

Bueno, pues Astro está estrenando una buena lista de cosas en su nueva versión.

¡En esta entrada hablaremos de todo esto! 🥳

1. Barra de herramientas de desarrollo de Astro
2. Ruteo de internacionalización (i18n)
3. Caching de contenido incremental (Experimental)
4. Nueva API para transiciones
5. Logging rediseñado
6. Nuevo diseño de la documentación

👀 Astro 4.0 está disponible con el comando npm create astro@latest Si tú ya usas Astro, checa la guía de actualización a v4

1. Barra de herramientas de desarrollo de Astro

Astro 4.0 estrena una barra de desarrollo. Tiene la intención de personalizar la experiencia de desarrollo en el navegador, y para ser honesto, me parece increíblemente útil. 🔥

Con esta barra de desarrollo puedes inspeccionar tu pagina y encontrar problemas de accesibilidad, pero lo mejor, es que puedes extenderla con tus propias apps o de terceros. 🧩

Parece que Astro quiere crear su propio ecosistema de plugins como ya lo hace Vite. ⚡️

Esto es sumamente interesante para los que estamos descubriendo Vite porque ayuda a entender mejor la relación que tiene Astro con Vite, porque son inseparables, cual tortolitos, esperemos que Astro no nos salga tóxico como Next.js. 🦆

👀 Estoy preparando un video para explorar esta barrita, suscríbete y no te lo pierdas. 📺

2. Nuevo diseño de la documentación

Astro le ha colocado un theme a su sitio de documentación, en el que busca mostrar todas las capacidades de su framework al tiempo que el desarrollador disfruta de una experiencia de lectura moderna y cómoda. 🤓

Este theme se llama Starlight e incluye las mejores prácticas y patterns que el equipo de Astro ha recolectado a lo largo de dos años administrando sus docs a gran escala. 🚜

1.wWRzJJ7Y.webp

La documentación de Astro con este tema, nos ofrece una experiencia agradable no solo agrdable, también inteligente gracias a su nuevo plugin de Algolia y a features como su código expressivo (Expressive Code).

El equipo de Astro planea liberar nuevos componentes interactivos en el futuro como su quiz de opción múltiple.

3. Ruteo de internacionalización (i18n)

Astro hace mucho incapié en que su framework no es para todos, es un framework pensado específicamente para sitios web de contenido, así que si piensas crear un dashboard de administrador o un e-commerce, Astro no es la mejor opción.

Sin embargo, si tu sitio web está creado para mostrar contenido, (📗texto, 📷imagen, 🎤audio, 📼video) entonces Astro no solo es perfecto para ti, también lo es aprender sobre internacionalización (i18n).

Con Astro 4.0 crear urls internacionalizables se vuelve muy sencillo:

import { defineConfig } from "astro/config"
export default defineConfig({
  i18n: {
    defaultLocale: "en",
    locales: ["en", "es", "pt-br"]
  }
})

Esto se ve inofensivo, pero es muy poderoso, pues Astro detecta el idioma de preferencia del usuario, para luego, entregarle contenido adecuado o direccionarlo adecuadamente.

Puedes probar este y sus otras APIs en su guía.

👀 Puedes aprender más sobre las discusiones del equipo de Astro sobre internacionalización, en este link.

4. Caching de contenido incremental (Experimental)

Este es un feature experimental. Pero que aumenta el performance en el build de sitios muy grandes o con muchísimo contenido.

Cuando un sitio hecho con Astro crece, las paginas que se tienen que leer y convertir aumentan significativamente y el proceso de building se vuelve muy largo. Astro resuelve este problema proponiendo hacer caching para reducir la cantidad de trabajo duplicado del comando astro build.

2-2.O97UYV_2.webp

Astro ahora puede “trackear” los cambios dentro de tus colecciones, Astro puede revisar la cache en cada build y reutilizar todo el contenido que no ha cambiado. 🙌🏼

5. Nueva API para transiciones

Astro posee una API muy interezante para crear animaciones en las transiciones de tus paginas. Lo que te permite ofrecerle a tu usuario una experiencia “casi” nativa (app-like).

Son muchas las herramientitas que posee esta API, yo creo que merece su propia entrada.

Con la API de transiciones puedes:

• Animar la navegación entre diferentes paginas sin crear un .js pesado.
• Persistir el UI “stateful” como reproductores de video o mapas.
• Transformar elementos comunes de una página a otra automáticamente.
• Slide y fade son dos elementos que nos permiten agregar más personalidad a nuestras páginas.

¡Ha, pero eso no es todo! 🔥🙌🏼😎

Astro v4 ahora agrega nuevas herramientas a esta ya increíble API.

• Formularios para poder interactuar con HTML estático y componentes del lado del cliente dinámicos, detonando una transición al hacer submit del formulario en lugar de navegación. 🤯
• Prefetching puede usarse para precargar el contenido de un link cuando se le hace hover o cuando es visible. Muy similar al prefetch de Remix. 🥸
• Anunciador de ruta. Esta es una herramienta de (asistencia | apoyo | facilitación | ayuda). Pero también una API de bajo nivel que puede modificar la navegación y el ciclo de vida.

6. Logging rediseñado

El equipo de Astro dice que le ha dado un nuevo baño de pintura al CLI para mejorar la experiencia de logging.

• Se ha removido la información innecesaria. Evitando el double-logging.
• Errores más breves. Los errores ahora ocupan menos espacio en la terminal, menos scrolling y terminales más pequeñas cuando hay que “debuggear”.
• Stack traces refinados. Los errores ya no incluyen información fuera de contexto de Vite.

👀 ¿Qué es Logging? https://docs.python.org/es/3/howto/logging.html

Ahora sabes en qué consisten los estrenos de Astro v4.

Si quieres seguir aprendiendo conmigo sobre Astro, no dejes de decírmelo en los comentarios, pues es una herramienta que tal vez valga la pena agregar a nuestro cinturón, ¿no lo crees? pues, si te gusta, haré más. 😇

Abrazo. Bliss. 🤓

Enlaces relacionados

Astro Content Collections API

https://docs.astro.build/en/guides/content-collections/

Guía de Astro i18n

https://docs.astro.build/en/guides/internationalization/

Internationalization (i18n)

https://web.dev/learn/design/internationalization

Guía de actualización a Astro v4.0

https://docs.astro.build/en/guides/upgrade-to/v4/

Expressive Code

https://github.com/expressive-code/expressive-code

¿Qué es Logging?

https://docs.python.org/es/3/howto/logging.html