Lanzamiento Beta de Astro 1.0

Por
Nate Moore
Fred Schott

¡La Beta de Astro 1.0 ya está disponible! Este lanzamiento marca la estabilización de todas las APIs principales, sin más cambios importantes planeados entre ahora y el lanzamiento oficial de v1.0.

Además, nos emociona anunciar que el lanzamiento oficial de Astro v1.0.0 estará disponible el 8 de junio de 2022. Planeamos usar estos próximos dos meses para mejorar la documentación, corregir bugs, recopilar tus comentarios, y terminar algunas mejoras finales de Astro.

Estamos increíblemente agradecidos por el apoyo que Astro ha recibido hasta ahora. Miles de desarrolladores – incluyendo equipos de Firebase, Trivago, y The Guardian – ya están usando Astro en producción hoy. Si has estado esperando para probar Astro, nunca ha habido un mejor momento para empezar.

Visita astro.new para probar el lanzamiento beta de Astro v1.0 directamente en tu navegador. También puedes ejecutar npm init astro para empezar localmente. Lee nuestras guías de Getting Started y Migración para aprender más.

Para celebrar el lanzamiento, este post explorará los antecedentes de Astro y los 3 principios fundamentales que impulsan nuestro proyecto:

Antecedentes

Durante la última década, las herramientas de desarrollo se han optimizado para un único tipo de proyecto—aplicaciones JavaScript, típicamente Single Page Applications (SPAs). Los frameworks SPA han revolucionado la forma en que construimos software en la web, dominando la última década del desarrollo web.

Pero incluso las mejores SPAs vienen con concesiones, algunas de las cuales tienen poco sentido en sitios web menos stateful y basados en contenido. Thoughtworks Technology Radar lo dijo mejor:

“Demasiado a menudo [vemos equipos] aceptando ciegamente la complejidad de las SPAs por defecto incluso cuando las necesidades del negocio no lo justifican.” — Thoughtworks Technology Radar

Esto nos hizo pensar… ¿cómo sería un framework web diseñado para sitios web orientados al contenido? ¿Cómo cambiaría una herramienta que prioriza el rendimiento nuestro enfoque? Si abandonábamos la noción de que las SPAs siempre son mejores, ¿podríamos impulsar la web de la misma manera que lo hizo JSX hace casi 10 años?

Encontramos nuestras respuestas en Astro.

1. El gran rendimiento web debería ser la norma, no la excepción.

Debería ser imposible (o al menos muy difícil) construir un sitio lento en Astro.

Por defecto, Astro te ayuda a construir sitios que envían cero JavaScript al navegador. La sintaxis de componentes integrada de Astro genera HTML estático tanto como sea posible, solo enviando JavaScript para las partes interactivas de tu página. Te sorprenderá lo poco de JavaScript que realmente necesitas cuando construyas tu primer sitio web con Astro.

Astro también te permite traer tu propio framework. React, Svelte, Vue, Solid, y todos los frameworks populares de UI web están soportados en Astro. Puedes mezclar y combinar estos componentes en tu página, mientras sigues disfrutando de la reducción automática de JavaScript de Astro. Si un componente es 100% estático, Astro elimina el JavaScript por completo y simplemente lo envía como HTML.

Este enfoque único hacia JavaScript (conocido como hidratación parcial o hidratación selectiva) desbloquea algunas características de optimización realmente convincentes y detalladas. Los componentes se cargan e hidratan individualmente, así que podemos personalizar y controlar el comportamiento de carga componente por componente:

<!-- client:load -- high priority, load this component on the page ASAP -->
<MyCriticalBuyButton client:load />
<!-- client:visible -- low priority, only load when visible on the page -->
<MyHeavyReactImageCarousel client:visible />

Este nivel de control es extremadamente difícil en un framework SPA como Next.js o SvelteKit, y completamente único de Astro.

2. Las APIs simples y directas son nuestro superpoder.

Diseñamos la sintaxis del lenguaje de Astro para ser simple, con la esperanza de que cualquiera pudiera aprenderla sin importar su background o nivel de habilidad. Astro te resultará familiar incluso si solo has usado un framework de JavaScript frontend, estás acostumbrado a herramientas de backend más tradicionales, o simplemente estás trabajando en lo básico de HTML y JavaScript.

Lo más importante que debes saber sobre el lenguaje de componentes de Astro es que es un superset de HTML. Un snippet de HTML válido es un componente válido de Astro. No hay funciones de render que exportar, JSX que retornar, ni hooks que gestionar. De hecho, ¡no hay JavaScript en absoluto!

<!-- This is a valid Astro component! HTML is the best :) -->
<p>Hello, World!</p>

¡Te sorprendería lo lejos que puedes llegar en Astro con solo HTML!

A medida que ganes más experiencia, aprenderás cómo Astro soporta el plantillado dinámico con expresiones tipo JSX y props de componentes. También te familiarizarás más con el script de componente "frontmatter" que usamos para ejecutar código del lado del servidor junto con tu plantilla. En poco tiempo, estarás escribiendo componentes de UI más potentes como este:

---
// Run JavaScript code in your component frontmatter.
// This all runs at build time, so no JS on the client!
const message = "Hello, " + Astro.props.name
---
<p>{message}</p>

Diseñamos el resto de Astro para ser igualmente directo: Soportamos APIs Web Standard siempre que podemos, así que puedes usar la API fetch() con await de nivel superior para obtener datos de una fuente externa. Usa un import ESM explícito para leer datos locales de tu proyecto, en lugar de una cascada de datos implícita e invisible.

3. La web merece una base agnóstica de framework.

Antes mencionamos que Astro soporta todos los frameworks de UI populares—React, Vue, Svelte, Solid, Preact, y Lit. Las implicaciones del diseño agnóstico de framework de Astro son masivas, y algo que siempre consideramos activamente al diseñar nuevas características para Astro.

Un caso ejemplar: SolidJS se lanzó en 2021 sin un framework web full-stack oficial como Solid Start. Claro, podías usar SolidJS en un nuevo proyecto, pero muchas herramientas hacen imposible probar SolidJS incrementalmente en tu base de código sin hacer una reescritura completa a un nuevo framework web compatible con Solid.

El lock-in de framework puede ser un gran problema, especialmente en grandes organizaciones que piensan en las decisiones tecnológicas en una escala de tiempo mucho más larga que el resto de nosotros. En el ecosistema de código abierto más amplio, el lock-in de framework simplemente hace más difícil que nuevos frameworks como SolidJS ganen tracción.

Con esto en mente, hemos diseñado Astro para ser completamente agnóstico de framework. Nuestro enfoque es construir la mejor base para proyectos a largo plazo, dando a las organizaciones la flexibilidad de cambiar tecnologías y frameworks con el tiempo. Grandes organizaciones como Google también pueden beneficiarse de simplificar la infraestructura y el soporte a una sola herramienta (Astro) mientras le dan a sus equipos frontend la flexibilidad de usar su framework de UI favorito.

Si estás construyendo un nuevo framework de UI para la web, considera lanzar tu proyecto con soporte para Astro.

¿Qué Sigue para Astro?

Esta semana es Launch Week en la sede de Astro, así que tenemos algunos anuncios más emocionantes preparados para el resto de la semana.

  • Martes, 5 de abril: Más Allá de los Sitios Estáticos
  • Miércoles, 6 de abril: Temas, Componentes, Integraciones
  • Jueves, 7 de abril: Día del Colaborador
  • Viernes, 8 de abril: Resumen (y una cosa más…)

Más allá de eso, puedes revisar nuestra hoja de ruta pública para actualizaciones mientras trabajamos hacia el lanzamiento oficial de Astro v1.0.0 el 8 de junio de 2022! 🎉

Si estás interesado en involucrarte o compartir algún comentario, te invitamos a visitar nuestro GitHub y unirte a nuestro servidor de Discord.