Sobre el Framework
Descubrí Astro gracias a mis ganas constantes de aprender sobre programación. Mientras veía un video de un referente para mí en el sector, el Youtuber y Streamer Midudev.
En el video se comentaban las bondades que ofrecía Astro en cuanto a su simplicidad de uso y sobre todo, el increíble rendimiento y herramientas que ofrecía para construir páginas web estáticas basadas en contenido, tal y como la que estas viendo.
Me aventuré a indagar más sobre el Framework y a observar más opiniones al respecto, y me sorprendió que todas ellas destacaban una experiencia muy positiva utilizando el Framework, por lo que me decidí a aprenderlo e implementarlo en un proyecto real.
¿Por qué usar Astro y no vanilla CSS, HTML y JS?
Tuve esta misma pregunta al momento de plantearme su uso, si el Framework esta diseñado para generar páginas estáticas basadas en contenido, ¿por qué agregar una capa de abstracción adicional, en lugar de usar la receta tradicional de HTML,CSS y JS?.
No fue hasta que comencé a construír este proyecto, y dedicar horas y horas a leer la documentación de la página oficial, que me dí cuenta de lo simple que era esta respuesta, asique me limitaré a explicarte las principales razones, como me hubiese gustado que me las explicaran a mí, antes de aventurarme a aprender y desarrollar este sitio web con Astro.
1. Componetización
Si ya conoces o has utilizado Frameworks de Frontend como React, Svelte o Vue, sabrás de lo que hablo. Y si no, es tan simple como decir que Astro nos ofrece la capacidad de abstraer y reutilizar componentes de UI, eliminando toda la complejidad y el boilerplate asociado, en comparación si lo hicieramos con React, Svelte o Vue. Por lo que esta primera razón y diferencia, es clave entre elegir Astro, por sobre HTML, CSS y JS. Sé que suena abstracto, por lo que te daré un ejemplo real de implementación haciendo una comparativa.
Supongamos que queremos implementar una serie “Cards” en HTML, para mostrar una seccion de pricing y planes de un servicio, observa como lo implementaríamos sin el uso de Astro.
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8" />
<title>Esto es una card usando un componente Astro </title>
</head>
<body>
<!-- Card 1 -->
<article>
<img src="algunaurl" alt="ejemplo">
<h3>Titulo de la tarjeta 1</h3>
<p>
aqui el parrafo de la primera card
</p>
<a href="algunaurl">ir al enlace</a>
</article>
<!-- Card 2 -->
<article>
<img src="algunaurl2" alt="ejemplo2">
<h3>Titulo de la tarjeta 2</h3>
<p>
aqui el parrafo de la segunda card
</p>
<a href="algunaurl2">ir al enlace 2</a>
</article>
<!-- Card 3 -->
<article>
<img src="algunaurl3" alt="ejemplo3">
<h3>Titulo de la tarjeta 3</h3>
<p>
aqui el parrafo de la tercera card
</p>
<a href="algunaurl3">ir al enlace 3</a>
</article>
<!-- Card 4 -->
<article>
<img src="algunaurl4" alt="ejemplo4">
<h3>Titulo de la tarjeta 4</h3>
<p>
aqui el parrafo de la cuarta card
</p>
<a href="algunaurl4">ir al enlace 4</a>
</article>
</body>
</html>
Ahora el mismo ejemplo utilizando Astro con un componente nombrado “Card.astro”.
const {imgUrl,imgAlt,titulo,descripcion,enlace} = Astro.props;
<!-- Cards -->
<article>
<img src={imgUrl} alt={imgAlt}>
<h3>{titulo}</h3>
<p>
{descripcion}
</p>
<a href={enlace}>ir al enlace</a>
</article>
Fuera del componente card , en el HTML principal se simplifica a lo siguiente:
import Card from './components/Card.astro';
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8" />
<title>Esto es una card usando un componente Astro </title>
</head>
<body>
<Card imgUrl="algunaurl" alt="ejemplo" titulo="Titulo de la tarjeta" descripcion="aqui el parrafo de la primera card" enlace="algunaurl">
<Card imgUrl="algunaurl2" alt="ejemplo2" titulo="Titulo de la tarjeta2" descripcion="aqui el parrafo de la primera card2" enlace="algunaurl2">
<Card imgUrl="algunaurl3" alt="ejemplo3" titulo="Titulo de la tarjeta3" descripcion="aqui el parrafo de la primera card3" enlace="algunaurl3">
<Card imgUrl="algunaurl4" alt="ejemplo4" titulo="Titulo de la tarjeta4" descripcion="aqui el parrafo de la primera card4" enlace="algunaurl4">
</body>
</html>
2. Simplicidad
Si ya conoces o has utilizado Frameworks de Frontend como React, Svelte o Vue, te estarás preguntando que diferencia tiene usar Astro en comparación con estos Frameworks. Lo primero es la simplicidad, para hacer un componente en Astro no necesitas exportar ningun tipo de módulo ni requiere boilerplate adicional. Por lo que es mucho mas simple y elimina toda complejidad asociada a la componetización. Como segundo punto, Astro recoje lo mejor de cada uno de estos Frameworks por lo que podrás aprovechar todas sus bondades juntas, tales como el uso de una sintáxis similar a JSX, estilos aplicados con scope al componente mismo, y el uso de la prop “children” de React con mucha facilidad y “azúcar sintáctico”.
3. Mejoras en rendimiento y scripts optimizados
Astro tiene optimizaciones por defecto en scripts JS gracias a su arquitectura de “islas”, lo que permite un rendimiento increíble en cuanto a los scripts JS necesarios para añadir interactividad a componentes y secciones específicos del sitio web, sin afectar el rendimiento de aquellos componentes y secciones que son estáticos.
Conclusiones
Como conclusión final, puedo decir que confirmo todas las buenas reseñas que ha recibido Astro, es un Framework muy sencillo de utilizar, y muy potente al mismo tiempo, elimina toda la simplicidad de los Frameworks que utilizan el enfoque de SPA, ofreciendo el mismo enfoque, con mejoras de rendimiento incluidas. Si deseas conocer mas de Astro, como su API de ViewTransitions, sus colecciones de contenido, la posibilidad de integrarlo con los mismos Frameworks y trabajar en conjunto con ellos y mucho más, te animo a desarrollar un proyecto, aunque sea pequeño, utilizándolo, y estoy seguro que compartirás mi misma opinión al respecto. Gracias por leer.