Presentando Astro: Envía Menos JavaScript

Hay un secreto simple para construir un sitio web más rápido — simplemente envía menos.

Lamentablemente, el desarrollo web moderno ha estado tendiendo en la dirección opuesta—hacia más. Más JavaScript, más características, más partes móviles, y en última instancia más complejidad necesaria para mantener todo funcionando sin problemas.

Hoy estoy emocionado de compartir públicamente Astro: un nuevo tipo de constructor de sitios estáticos que entrega un rendimiento ultrarrápido con una experiencia de desarrollador moderna. Para diseñar Astro, tomamos prestado lo mejor de nuestras herramientas favoritas y luego agregamos algunas innovaciones propias, incluyendo:

• Bring Your Own Framework (BYOF): Construye tu sitio usando React, Svelte, Vue, Preact, web components, o simplemente HTML + JavaScript.
• 100% HTML Estático, Sin JS: Astro renderiza toda tu página a HTML estático, eliminando todo el JavaScript de tu build final por defecto.
• Componentes Bajo Demanda: ¿Necesitas algo de JS? Astro puede hidratar automáticamente componentes interactivos cuando se vuelven visibles en la página. Si el usuario nunca lo ve, nunca lo carga.
• Completo: Astro soporta TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, y cualquiera de tus paquetes npm favoritos.
• SEO Habilitado: Sitemaps automáticos, feeds RSS, paginación y colecciones eliminan el dolor del SEO y la sindicación.

Esta publicación marca el primer lanzamiento beta público de Astro. Se pueden esperar características faltantes y bugs en esta etapa temprana. Aún faltan algunos meses para un lanzamiento oficial 1.0, pero ya hay varios sitios rápidos construidos con Astro en producción hoy. Nos encantaría recibir tus comentarios tempranos mientras nos movemos hacia un lanzamiento v1.0 más tarde este año.

Empezando

Comenzar un nuevo proyecto en Astro es fácil:

# create your project
mkdir new-project-directory
cd new-project-directory
npm init astro

# install your dependencies
npm install

# start the dev server and open your browser
npm run dev

Cómo Funciona Astro

Astro funciona muy parecido a un generador de sitios estáticos. Si alguna vez has usado Eleventy, Hugo, o Jekyll (o incluso un framework web del lado del servidor como Rails, Laravel, o Django) entonces deberías sentirte como en casa con Astro.

En Astro, compones tu sitio web usando componentes de UI de tu framework web de JavaScript favorito (React, Svelte, Vue, etc). Astro renderiza todo tu sitio a HTML estático durante el build. El resultado es un sitio web completamente estático con todo el JavaScript eliminado de la página final. No se requiere ninguna aplicación monolítica de JavaScript, solo HTML estático que carga lo más rápido posible en el navegador sin importar cuántos componentes de UI usaste para generarlo.

Por supuesto, a veces el JavaScript del lado del cliente es inevitable. Los carruseles de imágenes, carritos de compra, y barras de búsqueda autocompletables son solo algunos ejemplos de cosas que requieren algo de JavaScript para ejecutarse en el navegador. Aquí es donde Astro realmente brilla: Cuando un componente necesita algo de JavaScript, Astro solo carga ese componente (y cualquier dependencia). El resto de tu sitio continúa existiendo como HTML estático y ligero.

En otros frameworks web full-stack este nivel de optimización por componente sería imposible sin cargar toda la página en JavaScript, retrasando la interactividad. En Astro, este tipo de hidratación parcial está integrado en la herramienta misma.

Incluso puedes diferir componentes automáticamente para que solo se carguen una vez que se vuelvan visibles en la página con el modificador :visible.

Este nuevo enfoque de arquitectura web se llama arquitectura de islas. No acuñamos el término, pero Astro puede haber perfeccionado la técnica. Estamos seguros de que un enfoque de HTML primero, JavaScript solo cuando sea necesario, es la mejor solución para la mayoría de los sitios web basados en contenido.

Abrazando the Pit of Success

El rendimiento pobre a menudo se presenta como un fallo del desarrollador, pero discrepamos respetuosamente. En muchos casos, el rendimiento pobre es un fallo de las herramientas. Debería ser difícil construir un sitio web lento.

El principio de diseño principal de Astro es guiar a los desarrolladores hacia lo que Rico Mariani llamó “the pit of success”. Es nuestro objetivo construir cada sitio “rápido por defecto” mientras también entregamos una experiencia de desarrollador familiar y moderna.

Al construir tu sitio a HTML estático por defecto, Astro hace que sea difícil (pero nunca imposible 😉) construir un sitio lento.

Sostenibilidad a Largo Plazo

Astro es construido por el equipo de desarrolladores de open source detrás de Snowpack y Skypack, con contribuciones adicionales de la comunidad.

Astro es y siempre será gratis. Es un proyecto de open source publicado bajo la licencia MIT.

Nos importa profundamente construir un futuro más sostenible para el software de open source. Al mismo tiempo, necesitamos soportar el desarrollo de Astro a largo plazo. Esto requiere dinero (las donaciones por sí solas no son suficientes.)

Estamos inspirados por el éxito temprano de proyectos como Tailwind, Rome, Remix, Ionic, y otros que están experimentando con sostenibilidad financiera a largo plazo sobre Open Source. Durante el próximo año estaremos explorando cómo podemos crear un negocio sostenible para soportar un Astro 100% gratis y de open source durante los próximos años.

Si tu empresa está tan emocionada por Astro como nosotros, nos encantaría saber de ti.