¿Crear webs sin JavaScript? AstroJS construye webs rápidas, ligeras y estáticas implementando CSS, React, Vue y Svelte. ¡Tutorial dev aquí! 🚀
Cuando hablamos de páginas web y de su respuesta, la cual debe ser instantánea, no pensamos en un proyecto robusto, si no una página web estática. Por lo que los gestores de esta generación prometen ser más rápidos que el tradicional, y Astro específicamente promete la construcción de websites usando cualquier framework o ninguno, pero sin implementar JavaScript.
Al revisar la documentación, encontramos esta leyenda que emociona mucho: “[...] las guerras de frameworks no tendrán un ganador; Astro te permite usar cualquiera que desees (o ninguno) [...] Y sin interactividad, ¿no deberíamos optimizar nuestras herramientas para eso? No somos los primeros en hacer la pregunta, pero podríamos ser los primeros con una respuesta”.
ASTRO
TALK DE LA SEMANA
Lo que tiene Astro de especial, es que otros gestores están vinculados a una librería en especial, pero Astro permitirá el uso de cualquiera.
Sin embargo, actualmente sólo están Svelte, Vue y React. Así que, hoy junto con Andrés, veremos la creación de lo que se conoce hasta ahora como un proyecto en Astro.
Si existe algún error en el reproductor, puedes ver el video en el siguiente LINK.
¿Cómo utilizar AstroJS?
Tan sencillo como correr:
npm init astro
- La primera pregunta: Directory not empty. Continue [force overwrite]?
› Yes
- Which app template would you like to use?
› Starter Kit (Generic)
Hagamos el kit de inicio ya que este sirve para guiarnos, sin embargo, todos son buenos. Además tienen otros sitios de ejemplo
- Which frameworks would you like to use?
› React
Escoge una o combina varias de estas opciones: Preact, React, Solid, Svelte y Vue.Luego, correr:
npm install
Y esperar...
AstroJS, cero JavaScript por defecto.
La estructura que se genera dentro del proyecto es muy similar al de algunos proyectos, "src" será nuestra carpeta o directorio principal y "componentes" contendrá dos tipos de archivos: los de extensión .jsx, típico React.js. Y el otro es un componente estático, de extensión .astro
Los componentes Astro manejan perfectamente el HTML como un componente que se puede importar en las páginas.
ℹ️ Tip: No olvides instalar la extensión de IDE para soportar el lenguaje .astro:
Importando y usando JavaScript en AstroJS
Para construir componentes dinámicos, usamos un script en Markdown dentro de una valla de código de (3 guiones) donde podemos agregar configs, metadatos y código JavaScript.
Por ejemplo, el import, se escribe en la parte superior en la etiqueta script (---), la cual denota una sección de código Server-Side de forma alineada con la filosofía de Astro.
---
import { component } from 'astro/components';
---Astro usa Snowpack que proporciona soporte integrado sin configuración. Estas son las importaciones admitidas:
JavaScript ( .js, .mjs)
TypeScript ( .ts, .tsx)
JSON ( .json)
JSX ( .jsx, .tsx)
CSS ( .css)
Módulos CSS ( .module.css)
Imágenes & Activos ( .svg, .jpg, .png, etc.)
Componentes Astro ( .astro)
Markdown ( .md)
WASM ( .wasm)
Vamos a reusar la plantilla que nos ofrece Astro e importamos el componente <AstroMessage/> dentro de nuestro archivo index.astro
---
import AstroMessage from '../components/AstroMessage.astro';
Usa:
npm run dev Para iniciar el servidor local.
Inspeccionando la página en el navegador, no podemos localizar la etiqueta del script porque Astro es un lenguaje de plantillas donde el script sólo corre durante la compilación, y sólo representa el HTML en el navegador.
En el CLI Output, nos muestra con [access] la ruta en la que estamos trabajando: /. Y podemos observar además, que los nombres de las clases de cada uno de los contenedores inician con astro/<id>.
Este componente se encargará de recibir en un formulario la información del usuario y enviar por medio de una petición POST a una API de ejemplo.
Luego de enviar el POST, seremos redireccionados a una vista de agradecimiento, un href hacia nuestro index y un un agradecimiento en console.log, porque queremos saber dónde podremos revisar si el código JS se envía o ejecuta en el navegador.
Si eres React dev y crees que te gustaría usar Astro con el concepto "cero javascript" puedes migrarlo de forma sencilla gracias a la arquitectura de "islas" de Astro.
La documentación de Astro define una "isla" como "cualquier componente de interfaz de usuario interactivo" estático, liviano y renderizado por el servidor, ya que, realmente las páginas web no necesitan JS en su totalidad sino en unas pequeñas partes: "islas" 🏝️
Esperemos que el proyecto logre finalizar de manera exitosa, como ellos dicen en su página de lanzamiento:
¡Estamos trabajando duro en Astro! Mantengan sus ojos en el cielo, astronautas.
¡Gracias por leer!
📍 Conéctate con nosotros en instagram👇