Astro funciona, como muchos frameworks Javascript, mediante Componentes. Los componentes son una forma ideal de trabajar en Frontend. Permiten al desarrollador enfocarse en una parte concreta de la página, pudiendo dotar de estructura y contenido (html), diseño y estilo (css) y funcionalidad (javascript), todo ello en un mismo fichero.
Además, trabajar con componentes facilita la reutilización y permite que sea mucho más fácil entender y mantener nuestro proyecto.
La estructura de un fichero .astro
Los componentes (nativos) de Astro tienen la extensión .astro. En realidad, parten de un formado llamado frontmatter, ideado hace años por Jekill. Sin embargo, hace algunas modificaciones para adaptarlo a Astro.
Los ficheros .astro contienen dos partes:
- 1️⃣ Una parte inicial y opcional, entre
---donde habrá código Javascript. - 2️⃣ Después del segundo
---habrá código HTML.
Veamos un ejemplo, en el fichero src/pages/index.astro:
---
console.log("Hola, aparezco en la terminal"); // Local-side message
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
Algunas consideraciones importantes sobre este código:
- 1️⃣ El
console.log()de la parte Javascript no se ejecuta en el navegador, sino en la terminal. - 2️⃣ La ruta
/favicon.svghace referencia a un fichero en la carpetapublic. - 3️⃣ El atributo
contentdel<meta name="generator">es una expresión Javascript. - 4️⃣ Como siempre, el interior de la etiqueta
<body>sería la parte visual de la página.
Vamos a ir explicando estos detalles poco a poco para entenderlos mejor y más adelante organizaremos y simplificaremos todo.
Javascript en «developer-side»
Generalmente, en frontend, estamos acostumbrados a que cuando escribimos un console.log() se ejecute en el navegador y podamos verlo en la consola del navegador. Sin embargo, en Astro, el código Javascript que tenemos entre los fragmentos --- no se ejecuta en el navegador, sino en la terminal de texto del desarrollador.
En el ejemplo anterior, donde escribimos console.log("Hola, aparezco en la terminal"), puedes comprobar que ese mensaje no aparece en la consola del navegador, sino que aparece en la terminal donde hicimos previamente el npm run dev.
Esto ocurre porque este fragmento de código entre --- se ejecuta con Node, y no con el navegador. Esto nos permitirá ejecutar fragmentos de código Javascript, que nunca llegarán al navegador, sino que se procesarán en HTML final, que es el que sí llegará al navegador. De esta forma, el navegador no tendrá que generarlo y lo mostrará directamente, haciéndolo mucho más rápido.
Observa el siguiente ejemplo:
---
const title = "El título de mi página";
console.log(title);
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
Hemos creado una constante title que contiene el título de la página. Luego, la añadimos en la etiqueta <title> del HTML, envolviéndola con llaves {title}. Esta es la forma que tiene Astro de comunicar el HTML con la parte superior de Javascript. Recuerda que ese Javascript nunca llega al navegador, puesto que al navegador sólo se envía el HTML generado abajo.
Esto nos sirve para comenzar a organizar mejor nuestro código y tenerlo mucho más fácil de mantener. Por ejemplo, también podríamos sustituir el <h1>Astro</h1> por <h1>{title}</h1>, de modo que se muestre también el título en la página.
Recuerda que el interior de estas
{}es una expresión Javascript, por lo que ahí dentro puedes poner código Javascript. Por ejemplo,{5 * 5}sería algo válido y devolvería25.
