Pasar al contenido principal
Tecnológico de Monterrey Tecnológico de Monterrey
  • Guía paso a paso
    • Acerca del video educativo
    • Antes de grabar tu video
    • Durante la grabación de tu video
    • Después de grabar tu video
    • Aspectos legales del video
    • Producción de eventos
  • Herramientas y tutoriales
    • Para grabar y editar videos
    • Para crear presentaciones y videos animados
    • Formatos descargables
    • Video-tutoriales
  • Clases digitales
    • Aprende
    • Cuida
    • Enriquece
    • ¡Inspírate!
    • Recuerda
  • Experiencias Tec
  • Canales de video
    • Canales de profesores
    • Innovación educativa en Youtube
    • VideoTEC
  1. Inicio
  2. Astro: una plataforma para programación de sitios web

Astro: una plataforma para programación de sitios web

Astro: una plataforma para programación de sitios web
Slide 0
PreviousNext

Una mirada a la construcción de sitios con Astro

Escrito por: Luis Á. Reynoso M.

Astro es un marco completamente nuevo para crear sitios web. Para mí, lo más importante es que te permite crear un sitio como si estuvieras usando un marco de JavaScript (y lo estás haciendo), pero el resultado es un sitio estático sin JavaScript. Puedes optar por el JavaScript del lado del cliente según sea necesario, y hay opciones inteligentes para hacerlo. En particular, la curva de aprendizaje se aplana un poco por el hecho de que admite componentes que quizás ya conozcas: React / Preact (JSX), Svelte, Vue o componentes web.

Apuestas de mesa

Iniciar un nuevo proyecto es tan fácil como:

img_0_astro

Hay un ligero y útil proceso:

img_1_astro

Como se esperaba (como lo harías con Next o Nuxt o cualquier otro tipo de proyecto de creación de sitios), se obtiene un servidor de desarrollo en un puerto local que puede aparecer de inmediato:

img_2_astro

A partir de aquí, considero que lo que está en juego es la inyección CSS o recarga de módulos inmediata. No te preocupes:

img_3_astro

 

Un generador de sitios estáticos con componentes reales

Me gusta mucho la idea de los generadores de sitios estáticos; creo que tienen mucho sentido en muchas situaciones. Enviar HTML por cable es solo un buen movimiento para la resiliencia, la eficiencia de CDN, el SEO, la accesibilidad, lo que sea. Pero en el pasado, muchas de las opciones eran:

  • Un generador de sitios estáticos impulsado por JavaScript, que genera un sitio "estático", pero también incluye un paquete de JavaScript (por ejemplo, Next o Gatsby).
  • Un generador de sitios estáticos que se centra más en HTML y tiene sus propias plantillas / formatos que no son componentes de JavaScript (p. Ej., Eleventy o Jekyll).

Sé que hay excepciones, pero esto cubre la gran mayoría del mercado de generadores de sitios.

¡Pero qué pasa si quiero ambos!

  • Quiero crear sitios a partir de componentes JavaScript, porque la sintaxis y las herramientas que los rodean son simplemente mejores que cualquier otro sistema de componentes que tengamos en este momento.
  • Quiero una salida estática que en realidad sea cero JavaScript (a menos que optes manualmente por las cosas).

Eso es lo que pasa con Astro.
¿Esos componentes?

Pueden ser archivos JSX, SVElTE o VUE. Estos son "renderizadores" y puedes traer tus propios.

Astro también tiene su propio formato (.astro) y también es muy atractivo porque obviamente, es un ciudadano de primera clase de cómo funciona Astro. Es cómodamente similar a JSX, excepto que es mejor porque hace cosas como hacer que el <head> funcione automáticamente.
El alcance con estilo funciona de inmediato, a través de una etiqueta normal de <style>. El JavaScript "cercado" se ejecuta durante la compilación. Veamos eso a continuación.

Archivos Astro

Algunas de las partes interesantes sobre la sintaxis .astro se mencionan justo arriba. En un nivel superior se ve ¡tan poco repetitivo!

img00

Las "vallas" (---) en la parte superior es donde va el JavaScriptin ’inicial. Ahí es donde se obtienen los accesorios para este componente si los necesita (se pueden escribir si lo deseas), hago importaciones/exportaciones y configuro datos para la plantilla a continuación. Lo que se siente un poco raro, pero está en línea con el ambiente Astro, es que esto es esencialmente Node JavaScript. Se ejecuta en el proceso de construcción. Entonces, esa declaración console.log () que no veo en la consola de mi navegador, la veo en mi línea de comando.

img_001_gr

 

Enrutamiento del estilo de las páginas

Es tentador decir que Next.js popularizó esto, pero en realidad el concepto es tan antiguo como los sistemas de archivos. Piensa en cómo funciona un servidor Apache clásico. Si tienes un sistema de archivos como:

img_01

En un navegador, puedes visitar http://website.com/about y eso mostrará esa página index.html en la carpeta / about. Así es el enrutamiento aquí. En virtud de que tengo:

img_02

Tendré una página de inicio y una página / about / en mi sitio. Esa es solo una manera refrescante y agradable de lidiar con el enrutamiento, en lugar de tener que crear su propio enrutamiento con componentes para sí mismo.

Si desea hacer eso en el que todo el contenido de su sitio reside en archivos Markdown directamente en el repositorio, es un ciudadano de primera clase.

Creo que esto es muy común para cosas como blogs y documentación, especialmente porque ya son objetivos populares para los generadores de sitios estáticos. Y en estos primeros días, creo que veremos muchos sitios de Astro en ese sentido mientras la gente espera para ver si está listo para empresas más grandes.
Una forma de usar Markdown es crear páginas en Markdown de inmediato. El Markdown también tendrá "vallas" (Frontmatter) en las que puede elegir el diseño que desea usar (lo mejor es usar un archivo .astro) y pasar los datos si es necesario. Luego, todo el contenido del archivo Markdown fluirá hacia la <ranura />:

img_03

Otra forma increíblemente satisfactoria de usar Markdown en Astro es usar el componente <Markdown /> incorporado. Importarlo y usarlo:

img15_6

También puedes enganchar algo de Markdown de otra parte de su proyecto y convertirlo en un componente. Eso conduce a la obtención de datos, así que veamos eso a continuación.

Obteniendo reglas de datos

Hemos estado hablando de Markdown, así que cerremos el círculo. Se puede "recuperar" datos internamente en Astro mediante fetchContent. Así de sencillo:

img2

Busco el Markdown sin procesar, luego podría usar el HTML que devuelve si quiero, o colocarlo en un componente <Markdown /> si tiene sentido por cualquier motivo:

img_0_4

Pero no tengo que buscar solo datos internos. Soy fan de Eleventy. Durante una compilación de Eleventy, ciertamente puedes ir a buscar datos de una fuente externa, pero yo diría que es un poco delicado. Obtiene los datos con código en un archivo JavaScript separado, extrae su propia biblioteca de red, luego procesa y devuelve los datos para usarlos en otra parte de una plantilla. Como esto. En Astro, esa búsqueda puede ocurrir junto con el componente donde lo necesite.

Observa este ejemplo del mundo real en el que se extraen datos desde CSS-Tricks y se muestran como tarjetas.

img05

Se puede crear una página a partir de los datos de CSS-Tricks con tanta facilidad:

img0_7

Lo fascinante de eso es que los datos ocurren:

  1. en Node, no en el lado del cliente, y
  2. durante el proceso de construcción.

Por lo tanto, para mantener actualizado un sitio web como este, tendría que ejecutar el proceso de compilación / implementación con regularidad.

Astro admite todos estos marcos diferentes de fábrica

Hay un rechazo de que Astro es ineficiente en el nivel  de npm install, ya que tiene que eliminar un montón de cosas que probablemente no necesitará o usará. Escuché un rechazo a la idea de que mezclar marcos de JavaScript coincidentes es una idea terrible.

Estoy de acuerdo en que es una sensación extraña, pero no estoy particularmente preocupado por las cosas que no son de cara al usuario. Cuando las cosas suceden solo durante el proceso de compilación y todo lo que el usuario obtiene es HTML, ¡use lo que le sienta bien! Si finalmente carga los marcos basados ​​en componentes para hacer cosas interactivas en la página, seguramente tiene sentido limitarlo a uno. Y dado que obtienes tanto en el momento de la compilación, tal vez tenga sentido usar algo diseñado para una interactividad superligera en la página renderizada.

Estilizando

Supongamos que desea utilizar Sass para diseñar su sitio. Con muchos generadores de sitios, apuestan por esto, como filosofía. Como decir "no, no queremos ser obstinados aquí, tu estilo como quieras". Y lo entiendo, podría ser una fortaleza, ya que a veces los marcos que son demasiado obstinados pierden gente. Pero para mí, a menudo se siente desafortunado, ya que ahora estoy solo para conectar algunos procesos de construcción de procesamiento de estilo (por ejemplo, Gulp) con los que realmente no quiero lidiar.

Con Astro, la filosofía parece ser apoyar una amplia gama de técnicas de estilo populares listas para usar de inmediato.

  • Simplemente importe "./style.css"; hojas de estilo vainilla.
  • Usar un bloque <style> en cualquier lugar de los archivos .astro y el CSS se ajustará a ese componente que es como los módulos CSS, pero solo es necesario si opta por un archivo .jsx y, si lo hace, es compatible. Las capacidades de estilo de los archivos .svelte y .vue funcionan como se esperaba.
  • Sass está integrado, solo colocar <style lang = "scss"> en los bloques de estilo en cualquier lugar.

El documento de estilo tiene más detalles.

Los elegantes trucos de JavaScript opt-in

Permítame citar esto del README:

  • <MyComponent /> generará una versión solo HTML de MyComponent (predeterminado)
  • <MyComponent: load /> representará MyComponent al cargar la página
  • <MyComponent: idle /> usará requestIdleCallback () para renderizar MyComponent tan pronto como el hilo principal esté libre
  • <MyComponent: visible /> usará un IntersectionObserver para representar
  • MyComponent cuando el elemento ingrese a la ventana gráfica

Eso es un baile elegante. HTML de forma predeterminada, y opta por ejecutar sus componentes en el lado del cliente (JavaScript) solo cuando lo desea específicamente, e incluso entonces, en condiciones eficientes.

Puse un pequeño contador basado en Vue (de sus ejemplos) en mi sitio de demostración y usé el modificador, que está visible para observar cómo funciona. Échale un vistazo:

img_08

Las expectativas son que Astro crezca en mucho más que un marco, una plataforma completa, donde Astro es solo el núcleo de código abierto. Puedes escuchar a Fred hablar con Jason sobre eso en un episodio de Learn with Jason.

Logo Footer Logo Footer

 Creative Commons

Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-CompartirIgual 4.0 Internacional.

Videolab Tec

Acerca de

Mensaje de bienvenida

Contáctanos

Enlaces de apoyo

Preguntas frecuentes

Glosario

Sitios recomendados

Sitio desarrollado por la Dirección de Innovación Educativa y Aprendizaje Digital, de la Vicerrectoría de Innovación Educativa y Normatividad Académica del Tecnológico de Monterrey.
D.R.© Tecnológico de Monterrey, México, 2024. Av. Eugenio Garza Sada 2501 Sur, Col. Tecnológico, Monterrey, Nuevo León, 64849, México..

Aviso legal | Políticas de privacidad | Aviso de privacidad