Todo Sobre Astro

Rate this content
Bookmark

Astro 3 fue lanzado hace un tiempo y trajo consigo algunas características nuevas increíbles. En esta charla, echaremos un vistazo a algunas de las características recién lanzadas en Astro 3, haremos algo de codificación en vivo y nos divertiremos. Podemos echar un vistazo a lo que vendrá a continuación en Astro 4 y también podría haber 'una cosa más'

FAQ

Astro es un meta marco comparable a Nuxt y Next, diseñado principalmente para sitios web impulsados por contenido. Ofrece una sintaxis fácil de entender y envía 0 kilobytes de JavaScript por defecto, optimizando así el SEO y el rendimiento.

Astro 4 introduce mejoras significativas como una nueva CLI, mejor manejo de errores, y una barra de herramientas de desarrollo que mejora la experiencia en el navegador, mostrando elementos interactivos y propiedades de los componentes directamente en el IDE.

Astro utiliza un concepto llamado 'islas' que permite seleccionar específicamente qué componentes necesitan JavaScript, enviando código solo a esos componentes. Esto hace que las páginas carguen mucho más rápido y permite usar múltiples bibliotecas de front-end.

Starlight es una plataforma de documentación construida sobre Astro, optimizada para aprovechar las ventajas de Astro en una solución ideal para documentación. Permite una integración fluida con las funcionalidades de Astro.

Aunque Astro es ideal para sitios impulsados por contenido, también puede ser utilizado para crear SPAs completas si es necesario. Sin embargo, puede no ser la mejor herramienta para todos los casos de uso, especialmente donde se requiere alta interactividad.

Astro es una excelente opción para migrar aplicaciones legadas, especialmente SPAs. Ofrece guías detalladas y soporta la integración gradual, permitiendo envolver una SPA existente como una 'isla' dentro de Astro.

Actualizar Astro es sencillo gracias a comandos específicos como npx.astrags.upgrade que manejan la actualización. Además, Astro proporciona guías de actualización detalladas que ayudan en el proceso.

Sí, Astro funciona bien con CMS sin cabeza como Storyblok y Sanity. Hay guías disponibles que muestran cómo integrar diferentes CMS con Astro, facilitando su uso en una variedad de proyectos.

Elian Van Cutsem
Elian Van Cutsem
28 min
08 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Astro es un poderoso marco de trabajo para sitios web impulsados por contenido, con su propia sintaxis y la capacidad de usar las bibliotecas de front-end favoritas. Ha visto mejoras significativas en Astro 2 y Astro 3, incluyendo transiciones de vista y mejor rendimiento. Astro 4 introduce características como una potente barra de herramientas de desarrollo, almacenamiento en caché de contenido y soporte de internacionalización. La comunidad de Astro es muy apreciada, y Astro se está utilizando para sitios web de producción. Astro también admite la migración de sitios web heredados e integración con CMS sin cabeza.

Available in English: All Things Astro

1. Introducción a Astro

Short description:

Hola a todos. Soy Elian, un miembro principal del equipo de experiencia de desarrolladores en Astro. Trabajo en React Bruselas y BGS como embajador de conferencias y coanfitrión de podcast. Astro es un gran marco comparable a Nuxt o Nuxt. Permíteme enseñarte sobre ello.

Muy bien, muy bien. Hola a todos. ¿Cómo está todo el mundo? ¿No demasiado cansados? Hagan algo de ruido. Hagan que la gente que está allí atrás, sí, genial. Bien.

Entonces, ¿quién soy yo? Por supuesto, fui presentado por Nathaniel. Gracias, Nathaniel. Soy Elian. Estoy en el equipo de developer experience en Astro, miembro principal. Trabajo en React Bruselas y BGS como embajador de conferencias y coanfitrión de podcast. Esas son las conferencias que hacemos en Bélgica. ¿Dónde están todos mis belgas, por cierto, porque había muchos. ¿Solo uno? ¿Cómo somos los más grandes? Bueno, está bien. Bélgica es un país pequeño, de todos modos. También hago mis propios encuentros, devs.gent en Gante, Bélgica. Y puedes encontrarme en línea con Elian Coates.

Pero ayer recibí un correo electrónico realmente divertido y te lo leeré. Conoce al luminar del universo Astro, Elian van Kutsem, ese soy yo, la fuerza motriz detrás del equipo principal de Astro. Una presencia experimentada en conferencias y el entusiasmo de Elian por Astro 4 es ilimitado. Así que estoy totalmente bien si no me llamas Elian sino simplemente el luminar de Astro.

Entonces, ¿qué es Astro? ¿Quién ha usado Astro antes? Bien, bien. Un par de personas. Genial. ¿Y quién no? Todas las demás manos. Vale. Eso es bueno porque estoy aquí para enseñarte sobre ello. Estoy aquí para entusiasmarte con ello porque Astro es realmente, realmente genial. Piensa en Astro como un marco comparable a Nuxt o Nuxt, un meta marco, como te gustará. Tuvimos una gran discusión sobre, ¿debería llamarse un meta marco? Bueno, lo llamaré así por hoy. La discusión es para otro momento.

2. Astro: Una Fundación con Giros y Ajustes

Short description:

Astro es comparable a Nuxt y Next, pero con sus propios giros y ajustes. Tiene una sintaxis fácil de entender y es ideal para sitios web impulsados por contenido. Astro envía 0 kilobytes de JavaScript por defecto, lo que lo hace más rápido. Introduce el concepto de islas, lo que te permite usar tus bibliotecas de front-end favoritas. Esto hace que tu sitio web sea increíblemente rápido. 2023 fue un año loco.

Astro es muy comparable a Nuxt y Next desde el punto de vista de que es una fundación. Pero tiene un par de giros y ajustes de los que quizás no estés al tanto. Tiene esta increíble cosa llamada la sintaxis de Astro. Y es realmente fácil de entender. ¿Ves el área, la materia frontal en la parte superior entre los guiones? Es solo básico JavaScript o TypeScript, si quieres. Nada más. Y luego todo lo que está debajo de eso, el cuerpo, por así decirlo, es solo JSX. Importas componentes, los usas como componentes, los recorres, tal como lo harías normalmente.

Bueno, Astro es ideal para sitios web impulsados por contenido, tanto en términos de SEO como de rendimiento. Y una de las cosas que hace posible esto es que envía 0 kilobytes de JavaScript por defecto. ¿Cómo vemos eso? Bueno, esto es lo que obtienes cuando envías una aplicación Next o una aplicación Nuxt o incluso solo React o cualquier otra cosa. Básicamente son todos los componentes que están envueltos en JavaScript. Y eso realmente no tiene sentido. ¿Y por qué es eso? Bueno, ¿ves todos esos enlaces de pie de página allí? Son solo enlaces de anclaje estáticos. ¿Por qué necesito enviar JavaScript a ese componente si nunca voy a usar la interactividad que ofrece JavaScript? Bueno, te ofrecemos una solución para eso. En realidad, queremos algo más como esto, donde solo seleccionamos los componentes que necesitan JavaScript o necesitan interactividad y enviamos JavaScript solo a esos componentes. Esto es mucho, mucho, mucho más rápido.

Bueno, llamamos a este concepto islas, como siendo su propia isla hidratada. Lo bueno que obtienes con eso en Astro es que puedes usar tu propia biblioteca de front-end favorita encima de eso, ya sea Vue, React, Svelte, Preact, Solid y muchas, muchas, muchas más. Puedes simplemente importarlos en Astro y usarlos como una isla. Entonces, quieres un botón en React, quieres un botón en Vue. Puedes ponerlos uno al lado del otro o incluso compilarlos hasta solo HTML estático. ¿No es eso increíble? Ah. Necesito algo de ruido en la audiencia. Sí. Eso es. Eso es. Y esto hace que tu sitio web pueda ir realmente, realmente, realmente, realmente rápido. Y este último año ha sido una locura. 2023 fue una locura.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Diseño Opt-in – La Nueva Era de los Marcos de React
React Advanced Conference 2023React Advanced Conference 2023
23 min
Diseño Opt-in – La Nueva Era de los Marcos de React
Al adoptar una nueva tecnología, los desarrolladores se apegan a los valores predeterminados. Es un hecho que cada herramienta desde JQuery hasta NextJS ha tenido que enfrentar. En su peor momento, los valores predeterminados envían cientos de kilobytes de JS desperdiciados para enrutamiento, estado y otro equipaje que los desarrolladores pueden nunca usar. Pero en su mejor momento, los valores predeterminados nos dan una línea de base simple para comenzar, con un camino claro para agregar el conjunto exacto de características que nuestro proyecto exige. Esta es la magia del diseño opt-in.
Vamos a ver cómo las opciones predeterminadas inteligentes guían las herramientas de frontend modernas desde Astro hasta los Componentes del Servidor de React, y por qué esta nueva era remodela tu flujo de trabajo, y las métricas de rendimiento, para mejor.
No sabes cómo hacer SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
No sabes cómo hacer SSR
Un recorrido por la evolución del SSR en los últimos doce años. Cubriremos cómo han cambiado las técnicas, los problemas típicos, las herramientas que puedes utilizar y diversas soluciones, todo desde el punto de vista de mi experiencia personal como consumidor y mantenedor.
La próxima ola de frameworks web es BYOJS
JSNation 2022JSNation 2022
23 min
La próxima ola de frameworks web es BYOJS
El desarrollo de aplicaciones web ha tenido muchos cambios a lo largo de la vida de la web. Desde aplicaciones del lado del servidor con un toque de JavaScript hasta aplicaciones de una sola página construidas completamente con JavaScript. Ahora estamos volviendo a donde muchos nuevos frameworks web se construyen primero de forma estática, con JavaScript agregado según sea necesario. Esta charla cubre la construcción de aplicaciones web con JavaScript a través de la lente de Astro, un generador de sitios estáticos donde la elección del framework de JavaScript es única para ti.
Astro & Fresh - Comprendiendo la Arquitectura de Islas
React Advanced Conference 2022React Advanced Conference 2022
21 min
Astro & Fresh - Comprendiendo la Arquitectura de Islas
Una introducción a la emergente arquitectura de islas que puede mejorar significativamente el rendimiento de tus aplicaciones.
Novedades en Astro
JSNation 2024JSNation 2024
29 min
Novedades en Astro
¿Qué sigue para Astro? Escucha a Fred K. Schott (co-creador y mantenedor principal de Astro) sobre la dirección futura del marco de trabajo web impulsado por contenido de Astro. Con nuevas noticias y demostraciones que se basan en tres de los primitivos fundamentales de Astro: Islas, Colecciones de Contenido y Transiciones de Vista.
Qué hay de nuevo en Astro
React Summit 2024React Summit 2024
30 min
Qué hay de nuevo en Astro
¿Qué hay de nuevo en Astro? Escucha a Fred K. Schott (co-creador y mantenedor principal de Astro) hablar sobre la dirección futura del marco de trabajo web impulsado por contenido de Astro. Con nuevas noticias y demostraciones que se basan en tres de los primitivos fundamentales de Astro: Islas, Colecciones de Contenido y Transiciones de Vista.

Workshops on related topic

Curso intensivo sobre Astro y Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Curso intensivo sobre Astro y Storyblok
WorkshopFree
Arisa Fukuzaki
Arisa Fukuzaki
La arquitectura sin cabeza ha ganado inmensa popularidad en los últimos años por su capacidad para desacoplar el frontend y el backend, permitiendo a los desarrolladores crear aplicaciones web atractivas, interactivas y escalables.
En esta masterclass, nos sumergiremos rápidamente en el Mundo y la Arquitectura sin Cabeza.
Además, construiremos un sitio web de blog súper rápido utilizando Storyblok, un CMS sin cabeza que ofrece una función de vista previa en tiempo real con un enfoque de componente anidable, y Astro (3.0) que ya está creando revuelo con el nuevo directorio de aplicaciones.
- Domina los fundamentos de CMS sin cabeza- Domina un enfoque de Astro & CMS sin cabeza- Usa el diseño atómico en tu aplicación Astro & Storyblok- Creación de páginas, adición de contenido y comprensión de cómo funciona el enrutamiento dinámico con sin cabeza
Curso Intensivo de Astro, Kontent.ai y Portable Text
React Summit 2023React Summit 2023
91 min
Curso Intensivo de Astro, Kontent.ai y Portable Text
WorkshopFree
Ondrej Polesny
Ondrej Polesny
En este curso intensivo, crearemos un nuevo proyecto en el CMS sin cabeza, crearemos el modelo de contenido y los datos utilizando la CLI de Kontent.ai. Luego, utilizaremos el contenido para construir un sitio web de Astro que incluya componentes front-end y resolución de texto enriquecido utilizando Portable Text.
Este será un taller práctico, necesitarás VS Code, Git, NPM y conocimientos básicos de JavaScript. No te preocupes, explicaré todos los pasos a medida que avancemos en el taller y podrás hacer preguntas directamente.