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'

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

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

Opt in Design – The New Era of React Frameworks
React Advanced Conference 2023React Advanced Conference 2023
23 min
Opt in Design – The New Era of React Frameworks
Picking up a new technology, developers stick with defaults. It's a fact that every tool from JQuery to NextJS has needed to face. At their worst, defaults ship hundreds of wasted JS kilobytes for routing, state, and other baggage developers may never use. But at their best, defaults give us a simple baseline to start from, with a clear path to add the exact set of features our project demands. This is the magic of opt-in design.
Let's see how smart defaults guide modern frontend tools from Astro to React Server Components, and why this new era reshapes your workflow, and performance metrics, for the better.
You Don’t Know How to SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
You Don’t Know How to SSR
A walk-through of the evolution of SSR in the last twelve years. We will cover how techniques changed, typical problems, tools you can use and various solutions, all from the point of view of my personal experience as a consumer and maintainer.
The Next Wave of Web Frameworks is BYOJS
JSNation 2022JSNation 2022
23 min
The Next Wave of Web Frameworks is BYOJS
Web application development has had many shifts over the lifetime of the web. From server-side applications with a sprinkle of JavaScript to Single Page Applications built entirely with JavaScript. Now we’re heading back to where many new web frameworks build for static first, with JavaScript added as needed. This talk covers building web applications with JavaScript through the lens of Astro, a static site generator where the choice of JavaScript framework is uniquely yours.
Astro & Fresh - Understanding the Islands Architecture
React Advanced Conference 2022React Advanced Conference 2022
21 min
Astro & Fresh - Understanding the Islands Architecture
An introduction to the emerging islands architecture which can significantly improve the performance of your apps.

Workshops on related topic

Crash course into Astro and Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Crash course into Astro and Storyblok
WorkshopFree
Arisa Fukuzaki
Arisa Fukuzaki
Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications. 
In this workshop, we will quickly take a dive into the Headless World and Architecture. 
Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory. 
- Master headless CMS fundamentals- Master an Astro & headless CMS approach- Use Atomic design in your Astro & Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless
Crash Course Into Astro, Kontent.ai and Portable Text
React Summit 2023React Summit 2023
91 min
Crash Course Into Astro, Kontent.ai and Portable Text
WorkshopFree
Ondrej Polesny
Ondrej Polesny
During this crash course, we’ll create a new project in the headless CMS, create the content model and data using the Kontent.ai CLI. Then, we’ll use the content to build an Astro website including front-end components and rich text resolution using Portable Text.
This will be hands-on workshop, you’ll need VS Code, Git, NPM and basic knowledge of JavaScript. Don’t worry, I will explain all the steps as we advance through the workshop and you will be able to directly ask any questions.