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.

3. Mejoras en Astro 2

Short description:

Lanzamos Astro 2 con mejoras a Astro 1, incluyendo una nueva CLI llamada Clack. Las colecciones de contenido permiten una fácil creación con Markdown o MDX. El renderizado híbrido mejora el rendimiento y soporta APIs. Astro 2 también presenta un nuevo diseño y mejores mensajes de error.

Lanzamos Astro 2 en enero y trajo muchas mejoras a un ya muy buen marco llamado Astro 1. Presentó esta nueva CLI. Así es como se ve nuestra CLI. Muy, muy buena. Y hasta hoy, es amada por mucha gente. Y porque es tan buena, la lanzamos como una biblioteca de código abierto llamada Clack para que la uses en tus propios proyectos. Esa es la belleza del código abierto. Puede ser agnóstico al marco y puede ser muy accesible.

Con Astro 2, enviamos colecciones de contenido. Las colecciones de contenido ofrecen esta forma de crear contenido con algo como Markdown o MDX de una manera completamente segura. Usamos una biblioteca bien conocida para eso llamada Zod y en realidad se verá así. Todo salido de tu Markdown. Realmente, realmente fácil. Para ti como desarrollador, eso es.

Luego te trajimos el renderizado híbrido. Y el renderizado híbrido significaba que podías usar middleware, podías mejorar tu renderizado performance para las páginas que se visitan con frecuencia o simplemente quieres agregar una API a un sitio web muy estático. Todo es posible con el renderizado híbrido. Y con el uso de Vite 4, pudimos obtener una mejora de performance del 33%, lo cual es mucho. Por supuesto, hay un par de otras cosas.

Astro 2 también presentó un nuevo design. No solo un design para nuestra marca y nuestras páginas de marca, páginas de marketing, todo eso, sino también para ti. Un beneficio para ti como usuario de Astro serían mejores errores. Primero siempre los obtenemos, queremos buscarlos en Google y luego no obtenemos resultados. Eso es molesto. Bueno, simplemente te guiamos hacia el error. Si puedo leer esto correctamente, dice, tu blog, astrotutorial.mdx, que es el contenido archivo, la materia frontal no coincide con tu esquema. Hay algo mal. Es el título. Te estás olvidando de tu título. Y aún hoy, en todos los demás frameworks, seguimos impulsando los mensajes de error hacia adelante.

4. Astro 3: Transiciones de Vista y Mejora del Rendimiento

Short description:

Frameworks como Nuxt y Svelte están ofreciendo un mejor formato de error. Astro 3 fue el lanzamiento más emocionante y la versión mayor. Introdujo transiciones de vista, haciendo que las aplicaciones de múltiples páginas se sientan como SPAs. Solo se necesitan dos líneas de código. Astro 3 también incluyó middleware de Edge para una entrega de contenido más rápida, optimización de imágenes y una gran refactorización interna que resultó en una mejora del rendimiento y la capacidad de usar cualquier framework JSX mientras se preserva el estado.

Y es muy bueno que veamos frameworks como Nuxt y, creo, Svelte, subiéndose al tren de ofrecer un mejor formato de error.

Luego, en agosto, que no es hace tanto tiempo, lanzamos Astro 3, el lanzamiento más emocionante y mayor de Astro que hicimos hasta ese momento.

Enviamos transiciones de vista. ¿Quién ha usado transiciones de vista? No en Astro, en todas partes. No mucha gente. Genial. ¿Quién sabe qué son las transiciones de vista? Vale. Eso es mucha más gente. Bueno, bien.

Puedo mostrártelo. Porque puedo mostrártelo en un gráfico muy sencillo aquí. Creo que esto dice suficiente, ¿verdad? Las transiciones de vista hacen que tu aplicación de múltiples páginas o MPA, si quieres, se sienta como una SPA. Estás enviando JavaScript. Esto es en realidad todo nativo del navegador. Entonces, no estás enviando ningún JavaScript. Y por lo tanto, un rendimiento más rápido y mejor. Pero lo más loco de todo esto en Astro es que solo tienes que usar dos líneas de código. ¡Vaya! Ahí vamos. Bien, bien.

Entonces, con Astro 3, también enviamos middleware de Edge, para que pudieras entregar contenido incluso más rápido a tus usuarios finales, creando un tiempo de respuesta mucho más rápido. Enviamos optimización de imágenes, que es realmente fácil de hacer. Solo importa la imagen, úsala en el componente de imagen, y podrías usar eso con picture. Y la diferencia con picture es que realmente podrías usar diferentes formatos o múltiples tamaños, lo que sea, y siempre estará optimizado. Pero tú, como desarrollador, puedes ver o usar la imagen de mayor calidad que tienes. Y nosotros nos encargaremos del resto por ti.

Gracias a una gran refactorización en nuestros internos con Astro 3, pudimos obtener otro 75% de mejora en el performance. Y eso fue para Astro 2, que ya era un 33% más rápido que Astro 1. Y lo que esa refactorización hizo a nuestros internos es realmente bueno, porque hizo que pudieras usar cualquier framework JSX, como Solid, Preact, o React, y estás preservando tu estado mientras estás modificando un archivo. Entonces, como puedes ver, el contador sigue corriendo. Está en el estado.

5. Características de Astro y Semana de Lanzamiento

Short description:

Astro introduce la actualización rápida, eliminando la molestia de los modales que se cierran automáticamente. Los fragmentos de página permiten a los desarrolladores utilizar bibliotecas populares como HDMX. Starlight, una plataforma de documentación construida sobre Astro, está ganando popularidad. La semana de lanzamiento incluyó el anuncio de Astro 4 y el fondo del ecosistema, dedicado a mejorar la vida de los usuarios.

Pero si escribes, simplemente se mantiene actualizando el estado. Y todos sabemos lo molesto que puede ser cuando estás trabajando en un modal y cambias algo en los estilos y simplemente se cierra automáticamente. Lo volvemos a abrir, lo hacemos un par de veces hasta que está bien. Esto se deshace de eso. Se llama actualización rápida. Realmente, realmente impresionante.

Te enviamos fragmentos de página. Los fragmentos de página son literalmente lo que dice. Es básicamente una página sin ningún tipo de documento HTML, sin ninguna cabecera o cuerpo. Y lo que obtienes como desarrollador es que puedes hacer que algo como HDMX funcione. HDMX es ahora realmente popular, por lo que es posible dentro de Astro.

Y luego lanzamos Starlight. ¿Quién ha oído hablar de Starlight? Eso es demasiado poca gente. Sí, Chris, has oído hablar de Starlight. Ese es el creador de Starlight. Un aplauso. Eso es para ti, Chris. Realmente bien hecho. Bueno, Starlight aún no está en su primera versión mayor, pero ya muchas personas lo están adoptando en su stack diario. Y Starlight es una plataforma de documentación construida sobre Astro, lo que significa que podrías usar todas las ventajas que obtienes con Astro de una manera mejor optimizada para la documentación. Es todo lo que hemos aprendido de hacer la documentación de Astro en Astro y luego ponerlo en un framework, como una solución ideal.

Y luego tuvimos toda esta cosa llamada semana de lanzamiento esta semana, por lo que no dormí anoche, por cierto. Esta semana, anunciamos Astro 4, el fondo del ecosistema, iniciativas de la comunidad y mucho más. Y empezaré con el fondo del ecosistema. El fondo del ecosistema es $100,000 dedicados del dinero de Astro que se reinvierte en el ecosistema de Astro que mejora la vida de los usuarios todos los días. Por ejemplo, LushaAuth o, creo, ¿qué más tenemos, Chris? Tenemos Pilckro. Tenemos LushaAuth. Luego tenemos, bueno, dos más. Tenemos equipos de Lexington, que son simplemente equipos construidos sobre Astro y muchas otras cosas. Y estamos dedicando ese dinero para mejorar tu vida como desarrollador.

6. Migración y Mejoras de AstroDocs

Short description:

Hemos migrado nuestra documentación a Starlight, lo que ha mejorado su apariencia y velocidad. Esta migración también nos ha permitido mejorar Starlight para nuestras propias necesidades, como la introducción de un plugin para código expresivo en muestras de código. Se esperan más mejoras en el futuro.

Y esperemos que otros frameworks empiecen a hacer esto también. Pero por supuesto, ahora tenemos Starlight. Así que queríamos construir nuestra documentation en Starlight. Y realizamos toda la migración y la lanzamos, creo, el lunes por la noche. Fue realmente genial. Como puedes ver, se ve súper bonito. Es realmente rápido. Y gracias a hacer esto y hacer Starlight con AstroDocs y AstroDocs con Starlight, podemos mejorar Starlight para nuestras propias necesidades. Por ejemplo, de esa manera tú como desarrollador podrías usar código expresivo ahora. Es un plugin para tus muestras de código, y ya está incorporado en Starlight porque lo necesitábamos en AstroDocs. Así que te beneficia. Y estoy muy seguro de que vendrán muchas más mejoras.

7. Lanzamiento de Astro 4 y Características Emocionantes

Short description:

El martes se lanzó Astro 4, introduciendo la potente barra de herramientas de desarrollo y la herramienta de Auditoría para pruebas de accesibilidad. Astro 4 también trae una caché de contenido experimental pero estable, que acelera significativamente el proceso de construcción de sitios web estáticos. Con la caché de contenido incremental, una documentación de Astro de 3,000 páginas vio una mejora del 80%. Astro ofrece muchas más características como soporte de internacionalización, registro y prefetch. ¿Qué sigue? Depende de ti.

El martes, lanzamos Astro 4, la nueva versión principal de Astro. Introdujimos la barra de herramientas de desarrollo. Y la barra de herramientas de desarrollo es una forma poderosa y mejorada de trabajar en tu navegador, en tu entorno de desarrollo local con Astro. Puedes ver aquí, en tu barra de herramientas, puedes ver qué elementos son interactivos, cuáles son ligeros, cuáles son solo HTML estático. Y desde la barra de herramientas, puedes hacer clic en las propiedades, ver las propiedades, y simplemente puedes hacer clic en el componente y se abre en tu IDE. Realmente asombroso.

Aquí puedes ver otra herramienta llamada Auditoría. Y la Auditoría puede realizar pruebas contra problemas comunes en la accesibilidad. Por ejemplo, puedes detectar imágenes que no tienen imágenes alternativas o una descripción incorrecta, atributos de área mal configurados y todo eso sin tener que salir de tu navegador. Realmente, realmente genial.

Luego, Astro 4 introduce algo que todavía es experimental, pero utilizable. Llegas a ser, como, el desarrollador. No sé si quieres enviar esto a producción. Es experimental, pero aún estable. La cosa es que, con la caché de contenido, puedes acelerar tu proceso de construcción de tu sitio web. Especialmente para sitios web estáticos. Porque un sitio web estático toma cada página y la construye en HTML estático, lo cual puede llevar mucho tiempo si tienes muchas páginas. Y en realidad, con la caché de contenido incremental, nos deshacemos de esa recursividad. Y al hacer eso con nuestra propia documentación de Astro, que creo que tiene unas 3,000 páginas, vimos una mejora de alrededor del 80%. Eso es mucho. Y por supuesto, eso no es todo. Envié muchas características. Lo sé. Realmente lo sé. Pero la parte más loca es que tenemos muchas, muchas más. Como soporte de internacionalización, tenemos registro, tenemos prefetch, y mucho, mucho más. Así que solo te estoy dando un poco de la introducción aquí. La pregunta es, por supuesto, siempre, ¿qué sigue? Es este marco de React. ¿Has oído hablar de él? No, estoy bromeando. ¿Qué sigue para nosotros? Lo próximo para nosotros es que tú decidas.

8. Hoja de ruta de Astro y avance de Astra Studio

Short description:

Tenemos una hoja de ruta abierta. Bien. ¿Cuántos Houston's contaste? Gracias. Eso es todo lo que trajimos en 2023. Tenemos mucho más por venir en 2024. Pero antes de dejar el escenario, tengo una cosa más. Lo vamos a hacer al estilo Apple. ¿En qué hemos estado trabajando? Se llama Astra Studio, y se lanzará antes de lo que piensas. Principios de 2024. Eso es todo lo que realmente tengo por ahora. Muchas gracias a todos. Y escuchemos sus preguntas.

Tenemos una hoja de ruta abierta. Así que si quieres ver alguna característica en Astro, puedes simplemente enviarla, construir un RFC. Es de código abierto. Puedes votar por cosas. Podemos discutir sobre cosas. Y eso realmente funciona muy bien para nosotros.

Bien. ¿Cuántos Houston's contaste? ¿Alguien tiene una idea? Había pequeños Houston's escondidos por el lugar, y si después vienes a hablar conmigo y aciertas la cantidad correcta, te daré una pegatina de Houston, que es genial. Venga, allá vamos. Genial.

Gracias. Eso es todo lo que trajimos en 2023. Tenemos mucho más por venir en 2024. Fue un año súper emocionante, y gracias por estar aquí. Pero antes de dejar el escenario, tengo una cosa más. Lo vamos a hacer al estilo Apple. A veces trabajamos en cosas secretas, y quizás puedo darte un pequeño avance aquí. ¿En qué hemos estado trabajando? Bueno, puedo decir que no es un CMS. Tampoco es serverless hosting. Es algo completamente nuevo y algo que dará a cada usuario de Astra en el planeta superpoderes. Y simplemente no podemos esperar para mostrarlo. Se llama Astra Studio, y se lanzará antes de lo que piensas. Principios de 2024. Te lo revelaremos. Muy bien. Eso es todo lo que realmente tengo por ahora. Muchas gracias a todos. Y escuchemos sus preguntas. Siempre es emocionante pasar el rato con ustedes. Ustedes han sido, son desarrolladores.

9. Desarrolladores de Astro y Actualizaciones

Short description:

Los desarrolladores de Astro son increíbles, tanto en las características que implementan como en la calidad que entregan. Se preocupan por la experiencia del desarrollador, desde los productos hasta la documentación. Guiamos a nuestros talentosos desarrolladores y proporcionamos plantillas para ayudarles con las actualizaciones. Esto resulta en una guía de actualización completa.

Han estado trabajando mucho. Has estado trabajando mucho. Ha sido una locura. La cantidad de características que implementan con la calidad que entregan, son increíbles. Y también tus desarrolladores están construyendo productos increíbles. Estás ayudando a crear y construir una increíble developer experience, pero parece que los desarrolladores también se preocupan por la developer experience.

Oh, definitivamente. Porque es como, desde el principio, desde los productos hasta la documentation en mi ordenador, la experiencia del desarrollador es una prioridad. Bueno, tuvimos que inculcárselo, pero ahora les importa.

¿Y cómo es eso para ti? Algo así como enseñarles y hacer de eso una cultura en la empresa. Pero en realidad... En la organización. Lo siento. Sí, en la organización. No te preocupes. Lo cierto es que en realidad tenemos desarrolladores realmente talentosos y ellos hicieron mucho de todo eso por su cuenta. Y nosotros sólo los guiamos y pensamos con ellos. Pero nunca tenemos que decirles, oye, esto está mal. Probablemente sean incluso mejores que yo en eso. Pero una cosa que hacemos para ayudarles es simplemente guiarles en la escritura. Por ejemplo, si hacemos una actualización como la que acabamos de hacer con Astra 3 a 4, construimos una completa guía de actualización. Y lo que hacemos es proporcionarles plantillas como, oye, en Astra 3, esta característica existía. Ya no existe o ha cambiado. En Astra 3, hiciste esto. En Astra 4, estás haciendo esto o tienes que cambiar esto. Así que está realmente condensado y es muy fácil para ellos pensar en ello. Vale, hice eso, construí esa característica y tienes que hacer eso para obtener los beneficios de ella. Y una vez que guías eso en un documento, de repente tienes una guía de actualización completa. Genial. Bueno, vamos a saltar a algunas de las preguntas del público.

10. Astra: Contenido vs Eventos

Short description:

Astra es excelente para sitios impulsados por contenido, pero puede no ser adecuado para sitios impulsados por eventos. Depende de las necesidades del desarrollador. Si requiere un marco impulsado por eventos, PHP con Laravel es una excelente opción. Astra es mejor para blogs, sitios web personales y paneles de control. No está destinado para aplicaciones altamente interactivas o impulsadas por el frontend. En general, no hay trampa con Astra, pero es importante elegir la herramienta correcta para tu proyecto específico.

Asegúrate de agregar tus preguntas, vota las preguntas y voy a repasarlas. Voy a guardar una de las preguntas que está en la parte superior para el final y voy a cambiar el orden. Pero veamos. Entonces tenemos la primera, que es sobre Astra. Lo presentaste como que es realmente bueno para sitios impulsados por contenido. ¿No es una opción adecuada para sitios impulsados por eventos? Bueno, depende. Esa es probablemente la respuesta. Y es cuando entramos en el terreno de 'depende'. La cosa es que es cierto, es impulsado por contenido. Sí, claro. Pero también puedes construir un SPA completo en él si quieres. Claro. La pregunta es, ¿qué necesitas como desarrollador? Si necesitas algo impulsado por eventos, incluso no hay nada malo en ir a algo como PHP por ejemplo, como Laravel. Sé que tienen una gran, gran cosa impulsada por eventos. Elige la herramienta para tu trabajo. Y si Astra no se ajusta a eso, está bien. Pero si se ajusta, entonces te quedas con él. ¿Es genial para eventos impulsados? Yo diría que no, pero es genial en otras cosas. Absolutamente. Y honestamente, creo que es una buena transición porque la gente está diciendo como, ¿cuál es la trampa? Pero honestamente, es como que hay cosas en las que es bueno. Hay cosas para las que tal vez no es la herramienta adecuada. Entonces, ¿dónde te encontrarías, por ejemplo, si alguien dice, OK, tengo un proyecto, tengo un sitio web que estoy tratando de construir, estoy evaluando un par de diferentes frameworks. ¿Cuáles son algunas de las preguntas que deberían hacerse que les harían decir, OK, sí, Astra es la elección correcta y tal vez dirán, no, Astra no es la elección correcta en la forma en que está en este momento? Bueno, depende de nuevo, ¿verdad? La cosa es, si necesitas un montón de database backends, todo eso, personalmente no elegiría Astra. Pero si necesitas un blog, si necesitas un sitio web personal, si necesitas paneles de control, incluso eso puede suceder dentro de Astra. La cosa es, no hay trampa, excepto que por defecto, es solo HTML estático. Así que si estás buscando algo que sea realmente, realmente interactivo, realmente, realmente impulsado por el frontend, interactivo, entonces podrías no mirar algo como Astra. Pero no veo ningún problema en general. No, absolutamente. Creo que es como un clásico, como, ¿cuál es la trampa con caminar? Si tengo que hacerlo a través de Alemania, duele. Exactamente.

11. Actualizando las Versiones de Astra

Short description:

Astra actualiza sus versiones con frecuencia, pero la actualización es fácil y está bien documentada. Theo actualizó su sitio web de Astra 1 a Astra 3 con solo un comando. El nuevo comando, npx.astrags.upgrade, se encarga de todo. Las guías de actualización son completas y fáciles de seguir.

Y por eso es que conduzco. Exactamente. Sí. Así que pasemos a la siguiente pregunta. Esta dice, como, Astra parece actualizar las versiones tan a menudo. Quiero decir, hemos hablado de Astra 1, 2, 3, 4. Y parece que estás avanzando, estás progresando. ¿Es fácil actualizar Astra a las nuevas versiones o debería preocuparme, como, si me comprometo ahora que voy a estar en problemas después? Vi a Theo actualizando su sitio web de Astra 1 a Astra 3 con un solo comando. Creo que eso dice suficiente. De hecho, hemos lanzado un nuevo comando, que es npx.astrags.upgrade, que se encargará de todo. Lo único que tienes que hacer es buscar la guía de actualización. No tenemos muchas, como, características rompedoras que literalmente romperán tu sitio. Pero si las hay, están listadas en la parte superior. Y es súper, súper fácil de seguir. Diré, he usado las guías de actualización antes. Están realmente bien documentadas. Así que también quiero destacarlas.

12. El Modelo de Ingresos de Astro

Short description:

¿Cómo genera ingresos Astro? Astra es gratuito y de código abierto, mientras que Astra Studio tiene una versión de pago con un generoso nivel gratuito. La empresa de tecnología Astra actualmente no genera dinero, pero dona el dinero de los patrocinadores a la comunidad. Astra ve a los patrocinadores como una gran inversión, que beneficia a la empresa y a otros sitios de blogs. No se pueden dar pistas sobre información futura.

Y luego esta es una especie de pregunta sobre, como, la organización en su conjunto. Como, obviamente, vivimos en un mundo capitalista. ¿Cómo ganas dinero? ¿Cómo puedes hacer productos tan geniales gratis? Es una pregunta clásica que recibo mucho. Y la respuesta es realmente difícil. Y probablemente no soy yo quien debería hablar de esto. Creo que deberías preguntarle a Fred, no a mí.

El producto es gratis. Depende de qué producto estés hablando. Si estás hablando de Astra, por supuesto, es gratis. Es de código abierto. Puedes usarlo cuando quieras. Si estamos hablando de Astra Studio, será de pago, pero hay un generoso nivel gratuito que ya está en el sitio web. Puedes comprobarlo. La empresa de tecnología Astra en sí misma actualmente no genera dinero. Si estás hablando de los 100,000 que regalamos, eso es en realidad todo nuestro dinero de patrocinadores. Todo nuestro dinero de patrocinadores vuelve a la community. Esa es una línea realmente dura que tomamos. Y eso es lo que pasa. Estás ayudando a los patrocinadores, ayudándoles a construir las herramientas, a construir sus sitios web. Y te ven como una gran inversión. Y esa inversión llega a nosotros y a todos los pequeños sitios de blogs que estamos creando. Sí.

Eso también es bastante fácil para nosotros. Y tocaste esto en esa respuesta justo entonces, porque hablaste sobre Astra Studio. Entiendo que hay cosas que sabes que no puedes hablar. Definitivamente. ¿Hay alguna pista que puedas darnos? No. Gran respuesta. Sigamos adelante. No.

13. Seguimiento del Viaje de Astra y Creación de Imágenes

Short description:

Astra puede ser seguido en varias plataformas como Masterdome, X y GitHub. La característica de Astra que crea automáticamente múltiples imágenes a partir de una única fuente es impresionante. Solo necesitas especificar los formatos que deseas, como avif y webp.

Y tal vez si lo haces, ¿dónde pueden las personas seguir el viaje de Astra para que cuando hagas esos anuncios, puedan ser los primeros en saberlo? Bueno, en realidad, intentamos estar en todas partes. Estamos en Masterdome. Estamos en X. Estamos en GitHub. Y creo que si eliges tu plataforma, recibirás notificaciones. O me sigues a mí. Twitteo mucho sobre Astra. Puedo confirmarlo. Puedo confirmarlo. Lo siento. No.

Y una de las características de Astra que admitiré que no he probado, pero creo que es bastante genial, especialmente ahora que Astra tiene código para ello, es la imagen y la imagen. Y esta pregunta es algo así, creo, relacionada con eso. Entonces Astra, dijeron, Astra crea múltiples imágenes a partir de una única fuente automáticamente. Sí. Sí. Y eso se encarga de muchas cosas. Sí. Lo único que tienes que hacer es especificar en qué formatos quieres que sea. Así que solo le das un array como avif y webp y se encargará del resto. Impresionante. Sí. Lo es. Estoy impresionado. Y me molesta no haberlo probado. Te dije que tenemos desarrolladores realmente geniales. Eso es todo. Absolutamente. Absolutamente. La siguiente pregunta ya la has tocado un poco.

14. Preparación de Astra para la Producción

Short description:

Astra es relativamente nuevo, pero ya se está utilizando para sitios web de producción, incluyendo los de Google, IDX y nodeVPN. Es difícil definir qué significa estar más preparado para la producción, pero el uso de Astra en proyectos a nivel empresarial habla por sí mismo.

Entonces, continuaremos después de eso. Y hay algunas personas que, por ejemplo, Astra es bastante nuevo en el mundo, aunque nuevo en JavaScript es como seis meses. Pero Astra todavía es relativamente nuevo. ¿Qué pasa con las personas que tal vez no están seguras de si Astra está listo para un mundo de producción enterprise? Depende. No, en realidad es como, ¿qué más preparado para la producción quieres que sea? Tenemos sitios web funcionando en Google. Tenemos sitios web. Creo que el nuevo sitio web de IDX, la cosa del IDE en el navegador está construido con Astra. El sitio web de nodeVPN está construido con Astra. ¿Entonces está listo para la producción? Creo que esa es tu respuesta. Sí. Sí. Entonces estás defendiendo que todo está listo para enterprise si el zapato encaja. ¿Verdad? Sí, exactamente. Eso es lo que quiero decir. Es un poco difícil decir, sí, listo para la producción. Sí, por supuesto. No, seguro. Seguro.

15. Islas, IntelliJ y Starlight

Short description:

Las Islas en Astro te permiten compartir el estado a través de diferentes frameworks. Para este propósito se utiliza la biblioteca Nanostores. El plugin de IntelliJ para Astro actualmente no es compatible con React, pero el plugin de VS Code funciona bien. Los componentes de Starlight no se pueden utilizar en otros proyectos de Astro sin una integración completa.

Y el siguiente es sobre islas. Nunca he usado ninguna isla fuera de React. Solo uso React. Pero, ¿puedes compartir el estado a través de las islas? ¿Puedes? Por supuesto. Incluso puedes compartir un estado a través de diferentes frameworks a través de las islas. Así que si tienes una isla en Vue y tienes una isla en React, todavía puedes usar el mismo valor del contador. Interesante. Eso es muy factible.

Sí. Y también en Astra.new, hay un ejemplo. Usamos una biblioteca llamada Nanostores para eso, que en realidad también es agnóstica al framework, que somos en el núcleo también, por lo que necesitábamos algo. Y es realmente utilizable y realmente parece que estás haciendo el tipo de uso del estado de React. Realmente me emociono cuando llego a. Espero que sí. A veces estoy respondiendo preguntas y ya conozco la respuesta y sé que vas a dármela. Pero es muy divertido quienquiera que haya hecho estas preguntas. Gracias porque estoy aprendiendo muchas cosas nuevas también.

Y el siguiente es más o menos sobre la herramienta de desarrollo, específicamente IntelliJ. ¿Hay planes para actualizar el plugin de IntelliJ para que pueda trabajar con React? Recibimos muchos comentarios sobre eso. La cosa es que en realidad el plugin de IntelliJ es desarrollado por JetBrains ellos mismos. Así que todavía no aceptan nuestro LSP. Tienen la intención de cambiar eso, pero no en este momento. Así que ahora diría que en realidad el mejor IDE para usar Astro sería VS Code con nuestro LSP. Sé que en realidad puedes usar o puedes hacer que el LSP funcione en Vim también. Pero sí, el plugin de IntelliJ, mientras no abran su sistema, no podemos hacer nada al respecto. Sí, eso no es algo que puedas controlar.

Y el siguiente es sobre Starlight, que me emociona mucho. He conocido al creador ahora y realmente voy a sumergirme y averiguar más también. Así que esta persona ha preguntado, ¿pueden usar los componentes de Starlight en otros proyectos de Astro sin usar la integración completa de Starlight? Respuesta corta, no. La respuesta larga sería que depende.

16. Integración, Astro Studio y Comunidad

Short description:

Se podría integrar JS stock con Starlight, pero el orador no está seguro sobre los detalles. Astro Studio está generando mucha emoción, con un anuncio de adelanto en Twitter. La comunidad de Astro es muy apreciada, y las personas pueden unirse a través de Discord para las llamadas semanales de la comunidad.

Se podría. Yo no lo haría. Depende a qué te refieres. Por ejemplo, los bloques de código, usamos una diferente component library llamada, bueno, no realmente una component library, una biblioteca para eso llamada Expressive Code, que también es un framework agnóstico y puedes usarlo por tu cuenta. Pero no puedes, por ejemplo, portar la barra lateral sin usar Starlight.

Bien, bien. Y la siguiente es sobre JS stock. ¿Hay alguna forma de integrar JS stock con Starlight? Realmente no lo sé. Rápidamente, sí, hay. Y si quieren encontrarlo, ¿te importaría levantarte y saludar? Si tienes preguntas sobre Starlight, no dudes en ir a buscarlo después de la charla y hacerle las preguntas que tengas y la siguiente.

Entonces, un poco más sobre Astro Studio. La gente está realmente emocionada. Hay mucho revuelo. Adelante. Sí, iba a decir, es bueno escuchar que hay mucha emoción acerca de Astro Studio y vamos a lanzar algo en Twitter esta noche. No puedo dar más información sobre a qué hora, es solo un adelanto, nada más. Pero no puedo tocar más que eso en este momento. Pero es bueno ver tanta emoción. Se siente como el equivalente al tráiler de GTA 6. Para Astro, así que estoy realmente emocionado. Sí, pero no nos adelantamos. No, spoilers. No spoilers. Muy bien.

Y la siguiente es sobre la community y el tipo de modelo de negocio de fondo para Astro. ¿Cómo es eso? En realidad, diría que una de las grandes cosas que realmente me atrajo a Astro es la Astro community. La Astro community es increíble. Y puedes unirte a ella yendo a Discord. Es realmente fácil. Hacemos llamadas semanales de la community donde exploramos lo nuevo en el Astro ecosystem.

17. Astro: Migración de Legado e Integración con CMS

Short description:

Astro es una buena opción para migrar sitios web heredados. Ofrece una guía llamada SPAs Integradas, que facilita el proceso de migración. Al importar el componente de la aplicación en Astro, puedes convertirlo en una isla de Astro y comenzar a portar componentes. Astro también admite la integración con CMS sin cabeza como Storybook y Sanity, con guías disponibles para varios CMS. El orador expresa su gratitud y concluye la charla con entusiasmo sobre el próximo anuncio de Astro Studio.

Hablamos mucho sobre todas las cosas allí, nuevas características, características antiguas, personas portando sitios web desde algo. El soporte también está allí. Así que diría, sí, es una community muy estable. Es una community muy amigable. Y amo a cada uno de ellos.

Genial. Y la siguiente pregunta, que será nuestra última pregunta porque nos estamos quedando sin tiempo, pero ¿es Astro una buena opción para migrar legado? Sí, en realidad es la perfecta. De hecho, tenemos una guía sobre eso. Y se llama SPAs Integradas. Y en realidad es muy fácil porque si quieres migrar una SPA, piensa en Create React app. Y lo que estás haciendo es envolver todo en el componente de la aplicación, ¿verdad? Pero el componente de la aplicación puedes importarlo en Astro y de repente es una isla de Astro. Y luego puedes comenzar a portar componentes y tomar esos componentes en tus islas o sin islas y simplemente compilarlos a HTML. Tenemos una guía completa sobre eso en los documentos si estás interesado. Pero creo que es algo muy bueno para migrar SPAs. Definitivamente. Bonito.

Y respondiste eso tan sucintamente, tenemos tiempo para una pregunta más. ¿Es posible usar Astro con CMS sin cabeza como Storybook y Sanity? Sí. Alexandra está allí. Deberías hablar de eso con ella. Sí, como Storyblok funciona muy bien con Astro. Hay guías sobre eso. Tenemos, creo, una guía para siete CMS diferentes. Así que definitivamente es posible. Funciona muy bien. Y si estás interesado, solo ve a los documentos. Hay una guía completa con CMS. Solo échale un vistazo. Muchas gracias. Genuinamente, estoy realmente impresionado. Realmente disfruté esta charla. Espero que hayas aprendido algo porque yo también lo hice. No puedo esperar para ver este anuncio sobre Astro Studio. Y gracias por unirte a nosotros en el escenario. Apláudanles. Gracias.

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.