Astro (framework)
Astro es un framework de aplicaciones web basado en JavaScript de código abierto. Fue creado por Fred K. Schott y varios colaboradores, quienes a día de hoy lo siguen manteniendo junto con la ayuda de cientos de usuarios que mejoran el código gracias a su naturaleza de código libre.
| Programa | ||
|---|---|---|
| Parte de Generador de sitios estáticos | ||
 | ||
| Información general | ||
| Tipo de programa | Framework JavaScript | |
| Autor | Fred Schott | |
| Desarrollador | Astro y la comunidad | |
| Modelo de desarrollo | Código abierto | |
| Lanzamiento inicial | 2021 (Beta), 2022 (Release) | |
| Licencia | Licencia MIT | |
| Información técnica | ||
| Programado en | ||
| Versiones | ||
| Última versión en pruebas | 5.0.0-beta.813 de noviembre de 2024 | |
| Enlaces | ||
Descripción
editarAstro, tal y como mencionan sus creadores en su documentación, es la elección idónea para construir sitios web orientados al contenido, como podría ser un foro o un blog.[1]
Astro fue el creador de la nueva arquitectura de diseño web front-end denominada Astro Islands, la cual se encargaba de reducir la sobrecarga causada por frameworks de JavaScript más pesados.[2]
Es gracias a esta nueva arquitectura que Astro es uno de los frameworks más ligeros y eficientes para usar, pero esto conlleva ciertas desventajas que afectan a la hora de crear aplicaciones web de un gran tamaño como podría ser una red social.[cita requerida]
Historia
editarCuando Astro comenzó, su única propuesta, que en gran medida sigue siendo la misma hoy en día con solo algunos cambios, era la facilidad y velocidad de uso y ejecución. Se podía obtener contenido de cualquier lugar, incluyendo una API, un sistema de gestión de contenidos (CMS), un archivo MDX o un archivo Markdown, y mostrarlo en tu sitio con Astro.[cita requerida]
Sin embargo, lo que llevó a Astro a triunfar fueron las Islas Astro.[3]
Versiones
editar| Versión | Fecha de liberación | Enlace a su blog |
|---|---|---|
| 4.0 | 30 de diciembre de 2023 | Astro 4.0 |
| 3.0 | 4 de agosto de 2023 | Astro 3.0 |
| 2.0 | 24 de enero de 2023 | Astro 2.0 |
| 1.0 | 9 de agosto de 2022 | Astro 1.0 |
Características
editarAstro Islands
editarUna isla de Astro es un componente de interfaz de usuario interactivo incrustado dentro de una página HTML estática. Pueden existir varias islas en una página. Una isla siempre se representa de manera aislada al ser hidratada de forma independiente, es decir, a través de la hidratación parcial.[2]
De este modo, una aplicación de Astro puede lograr un tiempo de carga inicial destacable sin estar lastrado por JavaScript. La mayor parte del sitio permanece estática y las partes interactivas o islas solo se hidratan según sea necesario después de la carga inicial de la página. Para simplificar muchísimo más esta explicación, sería como si ciertos componentes Astro se renderizasen con lazy loading.
Agnóstico a la interfaz de usuario/framework
editarPuedes utilizar cualquier framework JavaScript que desees, incluso varios frameworks a la vez. El siguiente fragmento de código muestra un ejemplo de uso de un componente de React en Astro.[4]
---
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<html>
<body>
<h1>¡Usa componentes de React directamente en Astro!</h1>
<MyReactComponent />
</body>
</html>
Server Side Rendering y Static Site Generation
editarA pesar de que al principio Astro comenzó como un generador de sitios estáticos (SSG), lo que conlleva que el código sea cargado por los recursos del usuario, evolucionó satisfactoriamente y ahora permite el renderizado en el servidor (SSR) bien sea en la aplicación web al completo o páginas concretas. El SSR permite mejorar el rendimiento de un sitio web. Al delegar algunas de las tareas de renderizado al servidor, puedes reducir la carga de trabajo que el navegador del usuario necesita realizar, lo que se traduce en tiempos de carga inicial más rápidos y una experiencia de usuario más fluida.[5]
Para activar el renderizado en el servidor, hay que configurar el fichero astro.config.mjs añadiendo la clave output tal que:
import { defineConfig } from 'astro/config';
export default defineConfig({
output: 'server'
});
Sin JavaScript por defecto
editarA pesar de que como todo framework de JavaScript el programador puede añadir todo el código JavaScript que vea conveniente, de forma predeterminada el framework no creará casi nada de JavaScript para su uso. De esta forma evita la renderización costosa fuera de los dispositivos de los usuarios que naveguen por la aplicación web.
Personalización con las integraciones de Astro
editarPermiten al programador agregar nuevas funcionalidades a la aplicación web con muy pocas líneas de código. Gracias a estas integraciones puedes:
- Usar Astro con otros frameworks y librerías como React, Vue, Svelte, Solid, TailwindCSS, etc.
- Generación automática de sitemaps.
| Enlace | Tipo | Integración |
|---|---|---|
| @astrojs/alpinejs | Frameworks UI | AlpineJS |
| @astrojs/react | Frameworks UI | React |
| @astrojs/solid-js | Frameworks UI | SolidJS |
| @astrojs/svelte | Frameworks UI | Svelte |
| @astrojs/vue | Frameworks UI | Vue |
| @astrojs/netlify | Adaptador SSR | Netlify |
| @astrojs/vercel | Adaptador SSR | Vercel |
| @astrojs/cloudflare | Adaptador SSR | Cloudflare |
| @astrojs/partytown | Otras Integraciones | Partytown |
| @astrojs/tailwind | Otras Integraciones | Tailwind |
Ecosistema
editarEl equipo central de Astro también proporciona bibliotecas útiles creadas por ellos mismos.
Bibliotecas oficiales
editarPatrocinios
editarAstro está patrocinado por empresas como Vercel, Storyblok, Google Chrome, Netlify y Sentry, entre otras.[10]
Referencias
editar- ↑ «¿Por qué Astro?». Docs. Consultado el 25 de febrero de 2024.
- ↑ a b «Astro Islands». Docs. Consultado el 24 de febrero de 2024.
- ↑ Emmanuel, Ohans (17 de noviembre de 2023). «Astro adoption guide: Overview, examples, and alternatives». LogRocket Blog. Consultado el 24 de febrero de 2024.
- ↑ «Componentes de otros frameworks». Docs. Consultado el 24 de febrero de 2024.
- ↑ «Modos de renderizado». Docs. Consultado el 24 de febrero de 2024.
- ↑ «Agrega integraciones». Docs. Consultado el 24 de febrero de 2024.
- ↑ Moore, Nate (24 de febrero de 2024), natemoo-re/astro-icon, consultado el 24 de febrero de 2024.
- ↑ Schumacher, Jonas (24 de febrero de 2024), jonasmerlin/astro-seo, consultado el 24 de febrero de 2024.
- ↑ Fernandez, Alexandre (22 de febrero de 2024), Alexandre-Fernandez/astro-i18n, consultado el 24 de febrero de 2024.
- ↑ «Astro». Astro (en inglés). Consultado el 24 de febrero de 2024.
Enlaces externos utilizados
editar
Datos: Q114769542
