¿Por qué Astro?
Para el desarrollo de este portafolio he utilizado el Framework Astro en su versión 4.1.2, donde gracias a su simplicidad con el uso de los lenguajes más comunes (HTML, CSS y JS) y con el soporte de herramientas complementarias más enfocadas en la reactividad como React en determinadas situaciones, me ha ayudado a un desarrollo rápido y efectivo.
La elección de escoger Astro no ha sido por un tema de conocimiento sino por un tema de razón de uso en una SPA (Single Page Application) sin un uso de un BackEnd. Esto me ha supuesto un reto de aprendizaje de una herramienta nueva que ha sido emocionante y desafiante.
También he escogido Astro por los siguientes beneficios que aporta:
Rendimento
La velocidad de carga de inicio rápido de Astro es un factor clave en una SPA, y esto lo logra gracias a una renderización en el servidor en lugar de una renderización en el navegador del cliente.
De hecho, Astro es capaz de generar páginas estáticas con un uso cero de JavaScript y, por lo tanto, una carga rapidísima donde es el usuario el responsable de añadir interactividad a la web mediante componentes de Frameworks complementarios que se carguen en el lado del cliente.
En resumen, Astro se basa en una página estática mediante 'componentes reactivos' (llamados por la gente de Astro como 'Astro Islands') y esto le permite una experiencia al usuario de manera fluida y agradable.
SEO
Otro aspecto importante es la capacidad de posicionamiento SEO que tienen las webs diseñadas con Astro. ¿Por qué? Pues porque Astro al generar páginas estáticas (HTML) durante la compilación, permite a los motores de búsqueda indexar y rastrear el contenido de manera eficiente evitando en gran medida la ejecución de archivos JavaScript que retrasen la carga.
Y esto se resume con un enfoque que le da Astro basado en la optimización de eficiencia del peso total de la página para una mejor experiencia de usuario y, al mismo tiempo, influir positivamente en la clasificación del SEO.
Además, hay 2 factores que durante el desarrollo ayudan a un mejor posicionamiento SEO:
La facilidad de crear páginas mediante URLs amigables
La compatibilidad de inserción de Metadatos en cada una de las páginas de forma independiente.
UI-agnostico
Astro es agnóstico a otras herramientas de desarrollo web, pero, ¿qué significa ser agnóstico?
Ser agnóstico en el mundo de la programación significa que no se limita a un uso concreto de herramientas o tecnologías específicas, sino que está abierto en su uso para proporcionar al usuario una manera flexible de trabajar según sus necesidades y preferencias que mejor se adapten.
Y eso es lo que Astro ofrece mediante, además, una integración realmente sencilla y sorprendente de herramientas que todo desarrollador ha manejado al menos alguna vez, como por ejemplo:
Escalabilidad
El hecho de que Astro sea un Framework muy sencillo de utilizar, permite una escalabilidad fácil que ayuda a una mejor experiencia en el desarrollo en equipos de trabajo.
El uso de componentes reutilizables como arquitectura facilita la gestión de proyectos grandes donde los componentes son desarrollados de manera independiente. Además, con la optimización de los propios componentes separando los estáticos de los dinámicos (Astro Islands), permite una eficiencia de recursos en aquellas webs con una gran cantidad de contenido sin tener que perder rendimiento.
También, desde Astro 4.0, se añade una herramienta de desarrollo como es 'Astro Dev Toolbar' que permite inspeccionar de manera visual la página que estás desarrollando (Astro Islands, Testing, Accessibilty problems...)
Internacionalización
También con Astro 4.0 y adelante, se ha incorporado de manera nativa la librería de i18n que permite hacer las traducciones de forma fácil e intuitiva en la configuración del proyecto. Permiten un enrutamiento dinámico según el idioma y una gestión de las traducciones mediante archivos JSON.
Transiciones
Las transiciones son una de las características más sorprendentes que se introdujo a partir de Astro 3, y no solo por su fácil uso sino también por su impacto en la web permiten:
- Animar la navegación entre diferentes páginas
- Compatibilidad entre dispositivos y tamaños de pantalla
- Personalización de diversos tipos de transiciones adaptándose al estilo de la página web
Su implementación se realiza mediante añadir en cada componente (o en su Layout), un componente llamado <View Transitions /> y de esta manera, si 2 componentes están situados en páginas diferentes, se realizará una transición.
Resultado
Y este es el resultado final de utilizar Astro: 😁
