Novedades de JavaScript Frameworks (mayo de 2024)

Katie Hempenius
Katie Hempenius
X
Addy Osmani
Addy Osmani
X GitHub

Puede ser difícil mantenerse al día con todo lo que sucede con los frameworks de JavaScript. En este documento, se destacan los sucesos recientes en el ecosistema de frameworks de JavaScript durante el último año. Para obtener un análisis más detallado de algunos de estos temas, consulta la charla Cómo navegar por el ecosistema de frameworks de JavaScript correspondiente al evento Google I/O de este año.

Gráfico que compara las funciones del framework

Como se muestra en el gráfico, los frameworks de JavaScript convergen en una serie de características y arquitecturas similares. Estos incluyen arquitectura basada en componentes, enrutamiento basado en archivos y compatibilidad moderna con SSR. Esta convergencia demuestra la madurez y la evolución del ecosistema a medida que los frameworks aprenden unos de otros y adoptan las prácticas recomendadas.

Al mismo tiempo, una serie de tendencias recientes (como los componentes del servidor y los diferentes enfoques de reactividad detallada) continúan separando los frameworks individuales. Para comprender mejor estas tendencias, las analizamos en detalle un framework a la vez.

Angular

Las versiones recientes de Angular incluyeron una variedad de cambios significativos, como señales, vistas diferibles, NgOptimziedImage, hidratación no destructiva e hidratación parcial. Estos son algunos aspectos destacados:

  • Indicadores: Los indicadores son un enfoque que usan varios frameworks (incluido Angular) para realizar un seguimiento del estado en una aplicación. Los indicadores de Angular pueden mejorar el rendimiento del entorno de ejecución, incluida la Interacción a la siguiente pintura (INP), ya que reducen la cantidad de cálculos que deben ocurrir durante la detección de cambios.
  • Vistas diferibles: Las vistas diferibles permiten diferir la carga de componentes, directivas y canalizaciones específicas. Por ejemplo, puedes diferir la carga de una dependencia hasta que el contenido ingrese al viewport o hasta que el subproceso principal esté inactivo.
  • NgOptimizedImage: NgOptimizedImage es un componente de imagen para Angular que automatiza la adopción de las prácticas recomendadas de carga de imágenes.
  • Hidratación no destructiva: La hidratación no destructiva corrige el parpadeo que ocurría cuando se reconstruía el DOM de las apps de Angular renderizadas del servidor del cliente.
  • Hidratación parcial: El equipo de Angular pronto lanzará la versión preliminar para desarrolladores de la hidratación parcial. Con la hidratación parcial, de forma predeterminada, el navegador no carga nada de JavaScript de la página cuando se la procesa. En cambio, se hidratan partes específicas de la página a medida que el usuario interactúa con ella.

Astrofotografía

Astro, un creador moderno de sitios estáticos, generó una gran popularidad con su enfoque innovador en el desarrollo web. Con un enfoque en el rendimiento y la experiencia de los desarrolladores, Astro lanzó varias funciones y actualizaciones interesantes:

  • Astro islas: Astro Island permite a los desarrolladores crear componentes de IU interactivos que están aislados del resto de la página. Esto permite actualizaciones eficientes y un rendimiento óptimo.
  • Renderización híbrida: Astro ahora admite el procesamiento híbrido, lo que combina los beneficios de la generación de sitios estáticos y la renderización del servidor para una mayor flexibilidad.
  • Componentes de Imagen y Imagen: Astro introdujo nuevos componentes de Imagen y imagen que simplifican el control de las imágenes y proporcionan optimización automática.
  • Compatibilidad con las transiciones de vistas: Astro ofrece compatibilidad integrada con la API de transiciones de vistas, lo que permite realizar transiciones de páginas sin problemas y sin interrupciones.
  • Barra de herramientas para desarrolladores de Astro: La barra de herramientas de desarrollo de Astro proporciona un conjunto potente de herramientas para depurar y optimizar aplicaciones de Astro.

React

El año pasado, en el lanzamiento de los componentes del servidor de React, se presentó un nuevo enfoque para los componentes de React. Desde entonces, el equipo de React ha estado trabajando en una variedad de funciones nuevas, incluidas las funciones del compilador de React y Acciones del servidor, además de las siguientes:

  • Componentes del servidor: Los componentes del servidor de reacciones son aquellos que recuperan datos y se renderizan en el servidor antes de transmitirlos al cliente. Esto traslada el trabajo de renderización al servidor y reduce la cantidad de código que se debe enviar al cliente.
  • React Compiler: Es un compilador que puede memorizar componentes automáticamente. Esto mejora el rendimiento, ya que reduce las repeticiones innecesarias de renderizaciones. El equipo de React comentó que los desarrolladores podrán adoptar el compilador de React sin hacer cambios en el código.
  • Acciones del servidor: Las acciones del servidor habilitan la comunicación de cliente a servidor. Con las acciones del servidor, puedes definir funciones del servidor que se pueden invocar directamente desde los componentes de React, lo que elimina la necesidad de realizar llamadas manuales a la API y de administrar estados complejos. Esto puede ser particularmente útil para cosas como mutaciones de datos y envíos de formularios.
  • Carga de recursos: React trabaja en las APIs declarativas para precargar y cargar recursos, como secuencias de comandos, estilos, imágenes y fuentes.
  • Renderización fuera de pantalla: React también ha estado trabajando en la renderización fuera de pantalla. La renderización fuera de pantalla es “una función futura de React para renderizar pantallas en segundo plano sin sobrecarga adicional de rendimiento. Puedes pensar en ella como una versión de la propiedad de CSS de visibilidad del contenido que funciona no solo con los elementos del DOM, sino también con los componentes de React".

Remix

Remix, un framework web de pila completa, está ganando terreno en la comunidad de desarrolladores. Con su enfoque en los aspectos básicos de la Web y la experiencia mejorada para los desarrolladores, Remix introdujo varias actualizaciones destacadas:

  • Lanzamiento de Remix 2.0: El Remix 2.0, que se lanzó en septiembre de 2023, incorporó mejoras significativas y funciones nuevas para el framework.
  • Compatibilidad estable con Vite: Remix ahora ofrece compatibilidad estable con Vite, una herramienta de compilación rápida y ligera, que proporciona compilaciones de desarrollo más rápidas y un mejor rendimiento.
  • Modo SPA: Remix presentó el modo SPA, que permite compilar sitios puramente estáticos sin requerir un servidor de JavaScript en producción. Esto permite que los desarrolladores usen las potentes funciones de Remix, como el enrutamiento basado en archivos, la división automática de código y mucho más, sin perder la simplicidad de la implementación de sitios estáticos.

Next.js

El lanzamiento de Next.js 13.4 en mayo de 2023 fue notable, ya que dio paso a la compatibilidad estable con los componentes del servidor de React, la transmisión y el suspenso. Desde entonces, Next.js sigue compilando compatibilidad con las nuevas APIs de React (por ejemplo, Server Actions) y iterando en la experiencia del desarrollador a través de iniciativas como Turbopack. Entre otros aspectos destacados, se incluyen los siguientes:

  • Router de la aplicación: El router de la aplicación, que se volvió estable en Next.js 13.4, es una nueva forma de estructurar y administrar el enrutamiento en las aplicaciones Next.js. App Router es un requisito previo para usar las nuevas funciones de Next.js, como los diseños compartidos y el enrutamiento anidado, además de las nuevas APIs de React, como los componentes del servidor de React, Suspense y las acciones del servidor en la app de Next.js.

  • Turbopack: enfoque actual experimental) para la renderización de páginas que se basa en la API de Suspense de React. La renderización previa parcial procesa una página con una shell de carga estática. Sin embargo, la shell deja "agujeros" para el contenido dinámico dentro de la página, y este contenido se carga de forma asíncrona. Esto proporciona los beneficios de rendimiento de una página estática que se puede almacenar en caché y, al mismo tiempo, puede incorporar datos dinámicos al contenido de la página.

Vue

La versión más reciente de Vue, Vue 3.4, incluyó una variedad de mejoras en el rendimiento. Actualmente, Vue también trabaja en Vue Vapor, que también está orientado al rendimiento. Estos son algunos aspectos destacados de lo que sucede en este espacio:

  • Lanzamiento de Vue 3.4: Las funciones incluyen "un analizador completamente reescrito que tiene el doble de velocidad y que la compilación de SFC es más rápida, y un sistema de reactividad refactorizado que mejora la eficiencia de reprocesamiento".
  • Modo de vapor de Vue: Vue está trabajando en el Modo de vapor, una estrategia de compilación orientada al rendimiento y de aceptación que funciona con componentes de archivo único de Vue. El modo de vapor genera un código más eficaz que el que produce el compilador de Vue en la actualidad. Además, el uso del modo de vapor con todos los componentes elimina la necesidad de usar el DOM virtual de Vue (que reduce el tamaño del paquete).
  • Vue 2 llega al EOL: El final del ciclo de vida (EOL) del Vue 2 fue el 31 de diciembre de 2023. Sin embargo, Vue 2 sigue siendo bastante utilizado: alrededor del 50% de las descargas de paquetes de npm de Vue son para Vue 2.

Nuez

Nuxt se aproxima al lanzamiento de Nuxt 4. Además de los lanzamientos frecuentes del framework de Nuxt durante el año pasado, el ecosistema de módulos de Nuxt creció a casi 220 módulos. Algunos desarrollos recientes en este espacio incluyen:

Sólido

Solid ha estado trabajando para obtener la versión estable 1.0 de su metaframework SolidStart. SolidStart ofrece reactividad detallada, enrutamiento isomórfico y compatibilidad con varios modos de renderización. Los aspectos más destacados incluyen:

  • Reactividad detallada: El sistema de reactividad de Solid permite realizar actualizaciones precisas y un rendimiento óptimo, lo que permite una renderización y una administración del estado eficientes.
  • Enrutamiento isomórfico: SolidStart proporciona un enfoque unificado para el enrutamiento, lo que permite a los desarrolladores definir rutas que funcionen sin problemas tanto en el cliente como en el servidor.
  • Modos de renderización flexibles: SolidStart admite varios modos de renderización, incluidos el renderizado del servidor, la generación de sitios estáticos y el renderizado del cliente, lo que brinda a los desarrolladores la flexibilidad de elegir el mejor enfoque para su aplicación.

Sveldo

En el último año, el equipo de Svelte se centró en el próximo lanzamiento de Svelte 5, que será significativo. Entre otros aspectos destacados, se incluyen los siguientes:

  • Svelte 5 llegará: Además de incluir una "reescritura del compilador y el tiempo de ejecución de Svelte", Svelte 5 también introduce el concepto de ejecuciones.
  • Anuncio de las ejecuciones: Pronto se lanzarán las ejecuciones en Svelte 5. "Las ejecuciones desbloquean la reactividad universal y precisa... Con las runas, la reactividad se extiende más allá de los límites de tus archivos .svelte... La reactividad de Svelte 5 se basa en indicadores. Sin embargo, [a diferencia de otros frameworks], en Svelte 5, los indicadores son un detalle interno de la implementación en lugar de algo con lo que se interactúa directamente".
  • Lanzamiento de SvelteKit 2: SvelteKit es el metaframework de Svelte. Las funciones de esta versión incluyen el enrutamiento superficial y compatibilidad con Vite 5.

Chrome Aurora

Chrome Aurora es un equipo de Google que colabora con varios frameworks web de código abierto para mejorar la experiencia del usuario, en particular el rendimiento, en toda la Web. Estas son algunas de las iniciativas en las que contribuimos durante el último año:

Conclusión

El ecosistema del framework de JavaScript continúa evolucionando a un ritmo rápido, y cada framework trae su propio conjunto de innovaciones y mejoras. Ya sea que te interesen las funciones más recientes de frameworks establecidos, como Angular, React y Vue, o que explores opciones más nuevas, como Astro, Remix y Solid, encontrarás numerosos avances emocionantes.

Como desarrolladores, estar al tanto de estos avances nos ayuda a tomar decisiones fundamentadas al momento de elegir un framework para nuestros proyectos. Comprender las fortalezas y las características únicas de cada framework nos permite seleccionar el que mejor se adapte a los requisitos de nuestro proyecto y las preferencias de desarrollo.

Esperamos que esta descripción general te haya brindado una idea del estado actual de los frameworks de JavaScript. Para profundizar en los temas que se abordan en esta entrada de blog, asegúrate de ver la charla complementaria de Google I/O. ¡Feliz codificación!