Astro 3. Novedades. 30% más rápido, soporte para View Transitions, Fast Refresh para React y Preact, Server Site Rendering mejorado y muchas cosas más.
Y he dicho, ¿hacemos un curso desde cero? A lo mejor no os interesa.
El tema Astro. Vamos a ver un poquito aquí con lo que han puesto en la página web. Tiene novedades importantes no solo por esto.
Primera novedad de Astro que es bastante, bastante destacable y es, amigos, está aquí abajo del todo.
Pero esta es la noticia estrella de Astro.
Bersel. Bersel. Y es que Bersel se convierte en el oficial hosting partner de Astro.
¿Qué quiere decir esto? Porque alguien dirá, bueno, qué tontería, ¿no?
Bueno, lo que quiere decir es que Bersel se convierte por delante de Netlify como la plataforma oficial para que tú hostes tus productos hechos con Astro.
O sea, la forma más recomendada que a partir de ahora Astro te va a decir de que hospede sus proyectos va a ser con Bersel.
De hecho, esto tiene algunas mejoras por algunos plugins, bibliotecas y tal que se están haciendo.
Y esta es una de las primeras noticias bastante importantes. Netlify pega un escalón para abajo, ¿vale?
Y Bersel se pone en primera posición.
Qué horrible que le pongan tanto empeño a relacionarlo con React.
No entiendo eso, Mario. No entiendo eso.
¿Por qué relacionarlo con React si no tiene relación con React?
Ya he escuchado, no sé si es la misma persona, pero ya he escuchado este comentario dos veces.
Hoy también me lo ha dicho alguien aquí.
Encima eres el mismo. Eres el mismo, Mario.
Todo siempre React. Cuando muera React, todo el resto de cosas van a caer como un costillo de cartas.
Me parece bien que seas hater de React, que lo odies y tal. No pasa nada.
Pero no tiene sentido que hables así sobre Astro.
No tiene nada que ver con React.
Tú puedes utilizar Astro al 180% sin tocar React.
¿Por qué? Porque con Astro, Astro es agnóstico al framework.
Tú puedes utilizar no solo React.
Puedes utilizar, mira, a ver si lo pones, mira.
Tienes Vue, Preac, Svelte, Lit, Solid.js.
Puedes no utilizar ninguna.
Igual no utilizas ni React, ni Vue, ni nada.
Puedes utilizar Astro.
Y ya está.
Con vanilla JavaScript.
Y eso es lo increíblemente bonito que tiene Astro.
Astro es un framework web que es totalmente agnóstico.
Si quieres o no quieres utilizar ninguna biblioteca.
Lo cual está genial, ¿vale?
El tema, novedades de Astro 3.
Uno, tenemos ya la optimización de imágenes totalmente estable.
Dos, mejoras en el rendimiento del renderizado de los componentes.
Ahora renderiza hasta un 75% más rápido.
Mejoras de serverless rendering en hosting de serverless.
Por ejemplo, cuando desplegas en Dino Deploy,
pues vas a tener mejoras de serverless rendering o en Cloudflare
o en diferentes soluciones que sean serverless.
Mejoras cuando trabajas con JSX, no solo en React, sino también en Preact.
Pero bueno, es una de las mejoras.
¿Qué le vamos a hacer?
Para la gente que utiliza React, pues mejor.
Mejoras a la hora de cómo se crea el HTML de salida.
Y ya podéis utilizar Astro.
O sea, ya la han sacado.
Podéis hacer MP and Create Astro Latest.
Astro View Transitions.
Esto, amigos, esto está muy chulo.
No sé si sabéis lo que es lo de Astro View Transitions,
pero os lo voy a comentar, ya es una cosa que hicimos en su día.
Pero ya sabéis que históricamente, cuando tenías Single Page Applications,
podíais hacer este tipo de cosas de entre una página y otra hacer animaciones.
Bueno, ya vimos aquí en un directo que estas animaciones ahora van a ser nativas
en el mundo de la programación web.
Y hasta ahora eran un poco complicadas de hacer.
Pero es que en esta nueva versión de Astro vamos a poder hacer View Transitions.
Y ahora os enseñaré un ejemplo, ¿vale?
Para que veáis una View Transition de forma súper fácil.
en la que vais a tener que importar como un componente de Astro
que lo utilizáis en vuestra página web y ya está.
Y podéis hacer cosas como esta.
¿Veis esta animación entre las diferentes páginas web?
Vas animando, vas entre las diferentes páginas.
Por ejemplo, aquí cuando vas filtrando,
cuando entras a una página, el título va hacia arriba,
se mueve la imagen y todo esto.
Estas animaciones están hechas gracias a este componente.
Y entonces la pregunta del millón es,
bueno, pero realmente esto cómo se anima?
¿Cómo se va?
Le dices, oye, esto para arriba, esto para abajo, esto no sé qué.
Pues esto es súper, súper fácil.
Y es que para hacerlo, lo único que tenéis que hacer,
View Transition Guides, a ver si os puedo enseñar por aquí.
Vale.
Lo único que tenéis que hacer es indicarle hacia dónde se tiene que mover esto.
Le tenéis que dar un nombre a la transición, ¿vale?
Para que entre las dos páginas, aquí tendrías la página antigua y la página nueva.
Y esto lo que hace es como crear un nexo
entre esos dos elementos de páginas distintas.
Y dice, vale, si en la página nueva el header está aquí
y en la página antigua el header está aquí,
lo que voy a hacer es animarlo de aquí a aquí entre las dos páginas.
Y eso lo consigues dándole el nombre a la transición aquí.
Y además también lo que puedes hacer es decirle cuál es la animación que tienes que hacer.
Por ejemplo, ¿ves?
Puedes decirle, oye, quiero que lo animes, que no lo animes.
Por ejemplo, pues el HTML no tiene sentido animarlo.
O aquí, pues quiero que lo animes como un slide, ¿vale?
Para hacer como si fuese un slider.
O que sea con una transición de un fade in, fade out.
O puedes crear la tuya propia, ¿veis?
Con un fade puedes hacer 10.000 millones de cosas.
Puedes hacer lo que quieras.
Hay demos muy chulas.
Aquí, por ejemplo, esta demo, para que lo veáis,
esta demo está hecha con esa tecnología.
Aquí, cuando entráis a un disco, ¿veis esa animación de esta imagen a la siguiente?
Esa animación no ha tenido ni siquiera, o sea, ha escrito cero CSS.
Mira, lo podéis ver aquí.
Si le damos al botón derecho, lo vais a ver.
Mira, aquí tiene el nombre de la transición.
¿Veis el nombre de la transición?
Aquí, el nombre de la transición.
Y entonces se crea esa persistencia en la que dice, vale,
esta transición que es 2177412, cuando vas a la otra página, ¿vale?
Veremos que aquí también debería tener el 217742, no sé qué.
Lo tenemos que ver aquí.
No sé dónde está la animación.
En algún sitio tiene que estar exactamente la misma animación, que no encuentro.
Pero bueno, así es como hace la animación entre las dos.
Que bueno, veo que cuando va para atrás no va muy fino, ¿eh?
Cuando va para atrás no va muy fino.
Bueno, igual es... Vale, sí que va fino.
El problema es que tengo las herramientas de desarrollo abiertas
y entonces, como no tengo la cachea activada,
por eso hace eso, porque vuelve a descargar todas las imágenes.
Pero esta transición que veis está hecha toda con el View Transitions API.
Y esto igual, o sea...
Es que además, fijaos que podéis tener persistir el estado.
Aquí tenéis el HTML, como que está la reproducción y está todo...
Uy, que me revienta los oídos.
Todo está hecho con la transición esa.
Bueno, esto, la verdad, va a ser espectacular.
Y que se pueda hacer tan fácil es que me vuelve a la cabeza.
Y esto, totalmente estable.
Pero Midu, ¿se a ti no gustan las animaciones?
Eso es mentira, Javi.
Yo jamás, jamás he dicho que no me gustan las animaciones.
Lo que no me gustan es que lo animéis todo.
Aquí tenéis un ejemplo bastante interesante de animaciones bien usadas.
¿Tú has visto que esto esté animado?
¿Que haya animado todos los textos?
¿Que haya animado todo lo que aparece en la página como si fuese un videojuego?
No.
Lo que digo es que las animaciones no hay que abusar.
Fíjate que aquí la animación es muy sutil.
Es simplemente la caja, la imagen y luego simplemente sale un disco.
Eso es una animación que no distrae, que realmente te ayuda a la experiencia del usuario.
Eso es lo interesante.
Faster rendering performance, mejora de rendimiento respecto a la última versión.
Tenemos la optimización de imágenes con el componente image, que esto estaba antes en beta.
Y ojo, ojo, porque aquí, ¿veis?
Aquí está una de las novedades.
Full support for Vercel built-in image service.
¿Qué significa esto?
Que si hospedáis vuestro proyecto en Vercel, lo que vamos a tener aquí es que vais a poder activar el image service para que utilice la CDN y el servicio de optimización de imágenes que tiene Vercel.
Lo malo, pues que es de pago pasado, no sé si mil imágenes.
Lo bueno, que funciona súper bien.
Así que, bueno, ahí tenéis una nueva posibilidad.
Mejoras de server-side rendering, ¿vale?
¿Veis?
Tenéis el oficial hosting partnership with Vercel.
Y esto lo que ha hecho es que, bueno, tenéis perruta code splitting por cada una de las rutas.
Middleware edge, host customization.
O sea, que mejoras en server-side rendering un montón.
No sé si eran mil imágenes.
No, mil imágenes no.
Mil transformaciones de imagen.
Y, bueno, las mejoras del Far Refresh, básicamente para que no tenga que refrescar todo mientras estás utilizando React o Preact, ¿vale?
Optimizaciones en el HTML que se devuelve.
Y esto es Astro 3.
La verdad, sinceramente, Astro cada vez tiene una...
Si le está poniendo una cara a Astro, yo me animo...
No sé, me pongo contento cada vez que veo cosas de Astro.
Pero, de verdad, Astro 3 tiene una pinta tremenda.
Ya, a mí, el tema este de las View Transitions...
Yo no pongo notas porque está mal poner notas, pero para mí es un 10.
O sea, para mí es un 10 y, de verdad, creo que hoy en día, si tuviese que crear una página web, una página web ya no las haría vanila.
Es que utilizaría directamente Astro porque ya tienes, pues, todo lo que sería el entorno de desarrollo, optimizaciones de rendimiento.
Os voy a decir una cosa polémica.
Voy a decir una cosa polémica.
Me sabe mal, ¿eh?
Pero voy a decir una cosa polémica.
¿Sabéis que durante mucho tiempo Next.js se vendió como el framework de la web?
The React framework for the web, ¿no?
Era como The React framework for the web.
Pero incluso llegó alguna charla a decir como que era el framework de la web.
Mi sentimiento es que Astro realmente es el framework de la web.
Uno, es agnóstico a lo que quieras utilizar.
¿Por qué?
Porque puedes utilizar lo que quieras.
Todavía no puedes utilizar Angular, todavía.
Pero sí que hay ya la posibilidad de forma no oficial de utilizarlo.
O sea, puedes utilizar Angular de forma no oficial, pero están trabajando en Angular para que pueda ser de forma oficial, ¿vale?
O sea, que yo creo que muy pronto se va a poder utilizar Angular.
Yo creo que es que Angular tiene que ponerle el foco justamente para hacerlo.
Lo segundo es que puedes utilizar lo que te dé la gana.
O sea, puedes utilizar lo que quieras.
Que odias React como Mario, que odiaba React.
Oye, pues puedes utilizar Vue.
Y ya tienes toda la potencia de hacer toda tu página estática y solo los trozos que tú quieras utilizar Vue.
Puedes utilizar más de uno, lo cual es genial para hacer una migración.
Imagínate que tienes una web hecha en React y la quieres migrar a Vue.
Puedes utilizar Astro para utilizar todos tus componentes de React e irlos migrando poco a poco a Vue.
Y pueden coexistir, lo cual me parece tremendo.
Me parece una idea muy, muy, muy buena, muy interesante.
Muy interesante.
Lo va a petar por esta apuesta de alejarse del framework y crearse de esa forma agnóstica a que, oye, usa lo que tú quieras.
Usa lo que tú quieras.
¿Qué beneficio te daría usar Astro con React?
Pues beneficio tendrías que, por defecto, Astro devuelve cero JavaScript.
Y eso es una de las cosas más interesantes.
Ahora no me da tiempo a explicaroslo porque seguramente mucha gente se va a volver loca.
Pero el tema es que Astro, las páginas que haces por defecto, no tiene JavaScript.
O sea, Astro se renderiza todo o en tiempo estático o en servidor.
Por lo tanto, todo, todo es estático a no ser que tú le digas, oye, este componente quiero que lo cargues en el cliente.
Y eso lo que hace es que las páginas como los porfolios, que tiene todo el sentido del mundo,
que casi todas son estáticas, pues es que no cargue, no cargue nada, casi nada de JavaScript.
O el poco JavaScript que cargues sea cosas muy concretas, muy, muy concretas.
Porque digas, bueno, ¿ves? En este caso, fíjate en este caso, solo carga el header, cosas pequeñas,
pre-act, no sé qué.
Pero el header, ¿por qué?
Pues porque el header este seguramente sí que es dinámico.
Como es dinámico, pues por lo que sea, pues dice, vale, pues esto sí que tiene que tener JavaScript.
Pero todo lo demás no necesita JavaScript y por lo tanto, pues ya no lo renderizas dos veces.
El problema que tienes en Next.js, a día de hoy, que esto ya veremos como la regla,
con los server components se intenta arreglar, pero el problema es que por defecto lo que pasa
es que casi todas las cosas se tienen que también descargar el JavaScript en el cliente
y se tiene que re-renderizar, se tiene que hidratar y todo esto.
Los server components vienen a solucionar esto, WIC lo soluciona de una forma mucho más avanzada,
pero Astro está en un camino ahí en medio bastante sencillo
que le va a servir a la inmensa mayoría de la gente.
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!