cover

Astro. ¿Otro framework JavaScript?

author photo

Héctorbliss

@hectorbliss


robot logo saying hello

No te quedes atrás: Actualízate

Suscríbete para recibir información sobre nuevos frameworks, updates, eventos, tips, hacks y más.

Hoy vamos a hablar de Astro. ¿Otro framework JavaScript?

Sip, es una pregunta y un chiste gracioso porque es verdad que los frameworks web de JavaScript no tienen llenadera. Pero que no te sorprenda ni te parezca raro, apenas estamos entrando a la era de los frameworks.

Ya abrieron el camino a la web 2.0 los frameworks legendarios como Rubi-on-rails, Laravel o ExpressJS que introdujeron el MVC, pero ahora toca darle la bienvenida a los muchos que aparecerán para introducirnos a la era de la optimización y la experiencia de usuario.

En este blog hemos hablado ya bastante sobre Remix que desde mi humilde punto de vista es uno de los frameworks mejor pensados hasta ahora. Y casi no hemos hablado de Next que tiene ya un tiempo con nosotros y es tal vez el framework full-stack o para server-rendering más popular hasta ahora (pero también el más complejo).

fresh, nuxt, qwik framework

Aunque aún nos falta hablar de muchos otros y conforme pasan los días aparecen muchos más, como Nuxt, Qwik, Fresh y el día de hoy toca hablar de Astro. Que para engancharte y te quedes a leer, diré que puede ser el más interesante de todos hasta ahora y ya te digo porqué.

3 propuestas interesantes de Astro

El equipo de Astro, liderado por su creador Fred K. Schott tiene un par de afirmaciones muy potentes sobre su nuevo framework, además de ser muy claros sobre su público objetivo (nicho) para quien el framework resultará más útil. Esto es algo que a mí realmente me gusta mucho, saber que se nos están entregando herramientas más específicas para ciertas tareas o tipos de sitios web. Más que navajas suizas que deberían funcionar para TODOS los casos, terminando con sitios pasadísimos construidos con herramientas que piensan en todo mundo pero que pesan muchísimo para los fines de un creador independiente o una pequeña empresa. Así que veamos cuáles son estas afirmaciones.

#1. Arquitectura basada en islas.

Astro está pensado con esta "nueva" arquitectura de islas de la que muchos developers de la comunidad open source están hablando. Destinaré en un futuro cercano un post entero para hablar sólo de esta arquitectura, por ahora la simplificaré:

"Esto es un paradigma que busca reducir el volumen de JavaScript que es descargado por el servidor al visitar una página web, mismo que puede ser independiente del HTML estático que es entregado y su tarea es crear interactividad a pequeñas partes de la página"

En otras palabras; Astro entrega HTML estático con pequeños pedacitos (islas) o snippets JS que le dan vida (interactividad) a ciertos elementos en la página (un carousel, un botón etc). Y que además son hidratadas en segundo plano una vez que la pagina ha sido entregada sólo si entran en pantalla.

Esto mejora el performance en general ya que no se descarga un APP entera hecha con JS y JSX que captura las rutas y muta el sitio (como lo hace create-react-app).

Es chistoso hablar de esto en 2022 porque es como si estuviera hablando de entregar un sitio estático y agregarle en pequeñas partes un poco de jQuery ¿no crees? PERO AQUÍ TENEMOS REACT 😇

Dato curioso: A esta misma arquitectura se le estaba llamando "micro-frontends" pero no ha ganado tanto impulso como el concepto de islas.

#2. Rápido por default.

o como dice su creador MUCHO MÁS RÁPIDO. Astro tiene una filosofía la cual te invita a desprenderte de tu framework frontend favorito (React, Svelte, Vue etc.) para pensar en la entrega de contenido HTML. Claro puedes usar estas herramientas con Astro para crear pequeñas islas interactivas como vimos en el punto anterior pero Astro te invita a pensar en el sitio web como un sitio estático una vez más y ya no como "everything with React" (Todo el sitio con React) es decir: en vez de encerrar tu sitio web a una herramienta solamente, Astro te invita a pensar en el contenido con los cimientos básicos (HTML) y a partir de ahí a crear islas de interactividad. De hecho Astro convierte lo que escribas en JSX a sólo HTML si no tiene interacción (JS). Abordando esta filosofía Astro consigue ganarle a cualquier otra herramienta monorepo en performance y velocidad. astro vs next

#3. Diseñado para contenido.

Astro está orientado a creadores de contenido, un nicho que, por si aún no te has dado cuenta comienza a crecer y expandirse en 2022. Los creadores de contenido ahora somos cualquiera de nosotros, yo mismo pensando en compartir y formar parte de la comunidad de developers que somos curiosos y queremos mejorar, estoy creando contenido constantemente y me hace todo el sentido tener herramientas que me ayuden a publicar más fácil y que al mismo tiempo proporcionen una buena experiencia de usuario para mi audiencia.

Astro nos permite no sólo administrar nuestro contenido fácilmente, también consumirlo de otras fuentes, lo cual es muy inteligente pues no estoy obligado a mudar/migrar mi contenido de mi CMS actual, puedo consumirlo de tal forma que pueda ofrecer una mejor experiencia de usuario con Astro pero sin mover mi contenido de lugar. storyblokApi

Algo que me gusta de Astro en este punto es: la posibilidad de crear páginas completas con Markdown (otro tema pendiente que está agarrando vuelo en 2022) una herramienta que ya está en mi día a día y poder pensar en crear páginas completas de mi sitio web sólo con Markdown SIN JSX me parece ¡increíble! astro markdown

Conclusión

Astro tiene más propuestas pero no quiero hacer este post gigantesco, tengo respeto por tu tiempo y agradezco que me leas, voy a echarle un ojo de cerca a Astro estas próximas semanas y voy a intentar hacer lo que ya hago con Remix y saber de primera mano si en verdad le come el mandado... ...no me sorprendería rehacer todo mi blog con Astro si la curiosidad me domina, porque indi-developer...

Pero prometo volver contigo para contarte lo que encuentro.

¿cómo ves, te parece que Astro tiene una buena propuesta?

Recuerda que siempre podemos charlar en mi e-mail o en Twitter 🤓

Abrazo. Bliss.

course banner

¿Quieres mantenerte al día sobre los próximos cursos y eventos?

Suscríbete a nuestro newsletter

Jamás te enviaremos spam, nunca compartiremos tus datos y puedes cancelar tu suscripción en cualquier momento 😉

robot logo saying hello
facebook icontwitter iconlinkedin iconinstagram iconyoutube icon

© 2016 - 2023 Fixtergeek