¡Hola!
La tecnología evoluciona todos los días, siempre hay algo nuevo y esta vez es Astro! 🤯
Esta tecnología esta siendo muy bien aceptada en la comunidad, ya tiene más de ⭐ 3k estrellas en GitHub.
¿Pero qué es?
Astro: “Un nuevo tipo de creador de sitios estáticos que ofrece un rendimiento ultrarrápido con una experiencia de desarrollador moderna.”
Puedes leer con más detalles en la introducción a Astro.
Básicamente lo que hace Astro es enviar menos JavaScript en el momento de la compilación convirtiendo todo en HTML estático.
Lo más interesante es que puedes usar cualquier framework o librería (React, Vue, Svelte, etc), para desarrollar tu aplicación.
Hasta usar varios frameworks en un mismo proyecto.
Por ejemplo:
Todo.jsxTodo.vueTodo.svelte
Esto me parece muy interesante, aunque dudo que sea bueno mezclar. 🤔
Iniciar un proyecto con Astro
⚠️ Importante
La versión mínima de Node.js que se requiere es la 14.15.1.
# Inicializamos Astro
npm init astro
# Instalamos las dependencias
npm install
# Ejecutamos el servidor local
npm start
Uso
Estructura básica recomendada:
├── src/
│ ├── components/
│ └── pages/
│ └── index.astro
├── public/
└── package.json
Dentro de Components agregaríamos nuestros archivos, por ejemplo un componente React y luego los importamos en un archivo .astro.
Así es como se ve un archivo .astro
---
import Nav from '../components/Nav.astro';
import TodoReact from '../components/Todo.jsx';
import TodoSvelte from '../components/Todo.svelte';
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Astro</title>
</head>
<body>
<header>
<!-- Colocamo nuestro componente Astro -->
<Nav />
</header>
<div class="contentTodo">
<!-- Colocamo nuestro componente React -->
<TodoReact:visible />
<!-- Colocamo nuestro componente Svelte -->
<TodoSvelte:visible />
</div>
</body>
</html>
Prácticamente es HTML, solo que al principio del archivo colocamos el JavaScript dentro de un bloque de guiones (---).
Routing
El enrutamiento ocurre dentro de src/pages/* los archivos .astro se convierten en .html estático.
Por ejemplo tienes lo siguiente:
index.astroabout.astro404.astro
Los archivos de esta carpeta se corresponde con una URL pública.
Ejemplo:
| Archivo local | URL publica |
|---|---|
src/pages/index.astro |
/index.html |
¡Astro tiene muchas características más!
Más info
- Puedes leer más sobre Astro en el Readme del proyecto.
- Mira la documentación.
- También en esta demo que hizo Cassidy con Astro + React + Vue.
- Aca dejo mi primera experiencia con Astro + React + Svelte + Vue, también puedes verlo en vivo.
- Echa un vistazo a este artículo en CSS-Tricks.
Conclusión
Hay muchos temas más para cubrir, pero espero que este breve artículo pueda servir como para entender un poco Astro y como empezar.
Esta tecnología es muy nueva, es probable que haya algunos errores, pero el equipo de astro está trabajando duro todos los días.
¡Saludos!
Top comments (0)