2024 JavaScript Rising Stars

Ganador: shadcn/ui lo hizo de nuevo 🏆

Como en 2023, shadcn-ui es el proyecto más destacado del año. Encontró un equilibrio perfecto teniendo unos sólidos cimientos (proporcionados por librerías de componentes como radix) y a la vez ofreciendo posibilidades de personalización.

La idea de permitir a los desarrolladores poseer el código de sus componentes, en lugar de proporcionar componentes que debes importar, fue realmente revelador.

En 2024 se añadieron muchas funcionalidades:

• Charts impulsados por la librería Recharts
• Themes para generar conjuntos de variables CSS personalizables en tu código
• Blocks: una colección de layouts para abordar las necesidades de aplicaciones web típicas
• Nuevos componentes como una barra lateral extensible y responsive

El nuevo CLI es mucho más potente y flexible:

• shadcn add ahora puede instalar componentes, temas, hooks, utilidades, dependencias, etc.
• Soporta múltiples frameworks: Next.js, Remix, Vite, Laravel, etc.
• Puede actualizar tu configuración de Tailwind en lugar de sobrescribirla
• Soporte para monorepos

Otra razón para su éxito es la estrecha integración con el servicio v0, que puede generar componentes basados en shadcn/ui.

También es un gran recurso de aprendizaje para mostrar cómo crear componentes y que sean fáciles de extender, ya que estos están directamente en tu carpeta de código fuente.

Número 2: Excalidraw

Excalidraw es una herramienta online de código abierto diseñada para crear dibujos digitales y visualizaciones con un estilo a mano alzada distintivo, lo que la convierte en la herramienta perfecta para plasmar ideas o explicar conceptos y flujos de trabajo.

Las funciones de IA incluyen: De Texto a Diagrama, Mermaid a Excalidraw y Wireframe a Código.

Número 3: AFFiNE

AFFiNE es una base de conocimiento y herramienta de gestión de proyectos de código abierto que combina las capacidades de herramientas como Notion (con documentos compuestos por bloques) y Miro (lienzo infinito para dibujar).

Al ser "offline-first", es una excelente herramienta para construir tu propia Base de Conocimientos Personal.

Menciones especiales

Si quieres explorar lo que un navegador es capaz de hacer, échale un vistazo a:

• PGlite: una base de datos Postgres utilizando WebAssembly
• WebVM: una máquina virtual que funciona directamente en el navegador

En el número dos en 2023, htmx alcanzó la cima de la categoría de frameworks frontend en 2024.

Se puede considerar como una extensión del lenguaje HTML (de ahí su nombre) y a menudo se lo considera más una librería que un framework. Sin embargo, los límites son difusos. Consulta este artículo que explica por qué htmx es otro framework.

Es una gran opción si necesitas mejorar un sitio estático con interactividad o si el estado de tu aplicación es "controlado por el servidor." Usando solo una combinación de atributos HTML hx-*, puedes implementar funciones como la obtención de datos sin escribir una sola línea de JavaScript.

¿Quieres verlo en acción? Este mismo sitio web "Rising Stars" está construido con Astro, y htmx impulsa funciones como la carga diferida de categorías adicionales al desplazarte hacia abajo.

El número 2, React, sigue reinventándose, lo que es parte de su éxito. Tomó más de tres años lanzar la versión 19, pero finalmente fue lanzada en diciembre tras cambios relacionados con el drama de Suspense. Consulta el cheatsheet de React 19 para más detalles.

Entre las nuevas características, el soporte para web components ("Custom Elements") es una gran noticia. Hablando de web components, Ryan Carnato, el creador de Solid (número 8) escribió por qué los web components no son el futuro, creando cierta controversia. Una respuesta interesante vino de Lea Vera en este post concluyendo que deberíamos usar "las herramientas que consideremos más productivas."

En el puesto 3, Svelte también tuvo un lanzamiento importante con la versión 5. El cambio más destacado es la introducción de "runes," un mecanismo explícito para declarar estado reactivo. Vale la pena mencionar que Svelte tiene la opinión más positiva en los resultados de State of JS.

2024 ha visto cómo React ha tomado paradójicamente fuertes posicionamientos y a la vez ha sido también flexible con estos.

Por un lado, React ha adoptado una postura firme respecto a la introducción de Componentes y Funciones de Servidor, guiando a los desarrolladores hacia arquitecturas que operan a través de la red. Sin embargo, ha mostrado un posicionamiento más flexible a medida que estos nuevos conceptos están siendo adoptados y abstraídos por varios frameworks, cada uno con su propio enfoque.

React ya no es solo una librería. Está evolucionando hacia una especificación para frameworks, lo que representa un cambio significativo en el ecosistema hacia una mentalidad centrada en frameworks. Sin embargo, aún permite a los desarrolladores no adoptar esta mentalidad y permanecer más cerca del cliente si lo prefieren.

Durante toda esta transformación, React sigue comprometido con perfeccionar su núcleo. El desarrollo continuo del React Compiler se centra en mejorar tanto el rendimiento como la experiencia del desarrollador. Con el lanzamiento de React 19, se ha introducido soporte para custom elements, junto con nuevos hooks y acciones de formularios que redefinen la gestión de formularios en React.

Estoy muy emocionado por las posibilidades que React 19 desbloquea. React se está convirtiendo en un framework full-stack, y es fascinante ver cómo esto dará forma al futuro del desarrollo web con todos los actores del ecosistema React.

Este año ha sido excelente para el ecosistema Vue. Vue en sí mismo ha tenido un ciclo de lanzamientos mucho más activo por parte del equipo central, con nuevas versiones menores que traen mejoras en el rendimiento. Por ejemplo, el sistema de reactividad fue reformado en la versión 3.5, y otro cambio para usar el nuevo enfoque más ligero de alien-signals ya está en la rama principal.

Un buen indicativo del gran avance de su ecosistema se puede ver en sus librerías de UI, que están floreciendo. Parte de lo que está permitiendo esto es Tailwind CSS. Su enfoque basado en convenciones para escribir CSS y su capacidad multiplataforma significa que librerías de UI como shadcn-vue o Radix Vue (próximamente Reka UI) podrían portarse directamente desde sus equivalentes en React. Del mismo modo, las librerías nativas de Vue como Element Plus y Naive UI siguen prosperando, con usuarios fieles y un crecimiento constante.

Sin embargo, el mejor resultado entre todas las librerías de UI proviene de PrimeVue, que puede integrarse con Tailwind CSS pero no lo requiere. PrimeVue logró el segundo lugar con asombrosas 5.4k estrellas. Han visto un desarrollo sostenido este año y tienen ambiciones en los ecosistemas de React y Angular también, lo cual es una buena noticia para el ecosistema Primefaces en general.

También vemos un número de frameworks como Nuxt, Slidev, VitePress y Vue Element Admin que están funcionando muy bien.

Slidev ofrece una experiencia increíble e interactiva para desarrollar presentaciones, con mejoras significativas este año, como mejoras en Twoslash y soporte para Magic Move.

VitePress sigue siendo un caso de estudio en la generación de sitios estáticos construidos con Vue, ofreciendo un rendimiento sólido y una excelente experiencia para desarrolladores. Es la opción preferida para sitios de documentación en el ecosistema Vue y más allá, pero también puede usarse en aplicaciones más generales.

Nuxt encabeza la lista. Como el meta-framework más utilizado en el espacio Vue, una gran parte del trabajo de este año se ha centrado en solidificar los cambios realizados en Nuxt 3 y preparar una transición fluida hacia la próxima versión mayor en Nuxt v4. También hemos visto el lanzamiento de nuevos módulos principales como Nuxt Fonts (fuentes web optimizadas sin configuración) y Nuxt Scripts (carga eficiente de scripts de terceros), además del desarrollo de nuxt-auth-utils, que se está convirtiendo en una solución de autenticación central para Nuxt.

Para todas las librerías que vemos en la lista, la experiencia del desarrollador sigue siendo una prioridad, y el próximo año promete cosas emocionantes para los desarrolladores de Vue, como el Vapor mode (¡por fin!), la estabilización de Suspense en Vue 3.6, una próxima versión mayor de Nuxt, ¡y más!

En el puesto número uno, Payload es un CMS de código abierto y versátil que se instala directamente en cualquier aplicación Next.js. La estrecha integración con Next.js App Router facilita configurar un panel de administración directamente dentro de una aplicación existente, sin necesidad de crear una nueva aplicación para los usuarios administradores.

Originalmente diseñado para MongoDB, ahora admite Postgres y SQLite gracias a la integración de Drizzle ORM. Proporciona su propio ORM para configurar la estructura de datos y las reglas de control de acceso a un nivel superior, e incluye potentes características como la carga masiva de archivos multimedia. Consulta el anuncio sobre Payload 3 para más detalles.

En el segundo lugar, Next.js sigue siendo el framework full-stack más popular. La versión 15 incluye soporte para React 19 y mejoras en el rendimiento, aprovechando la nueva API de caché, así como una experiencia mejorada para desarrolladores (DX) gracias a la adopción completa de Turbopack como herramienta de compilación.

El recién llegado en esta categoría es el servidor web Hono, ocupando el tercer lugar. Se presenta como un reemplazo moderno para Express (en el puesto 13 a pesar de tener 15 años) y es capaz de ejecutarse en múltiples entornos JavaScript: Node.js, Deno, Bun y entornos serverless como Lambda o Cloudflare Workers. Destaca por su tamaño extremadamente pequeño. Lee la historia de su creador.

En el cuarto lugar, Astro se ha convertido en una solución versátil para construir aplicaciones enfocadas en contenido. La versión 5 introdujo una nueva Capa de Contenido, que permite la obtención de datos con tipado seguro desde cualquier fuente, ya sea del sistema de archivos o APIs externas.

He usado Astro para construir este sitio, y estoy impresionado por la DX (¡el CLI que te llama astronauta es adorable!) y el excepcional rendimiento web que ofrece.

2024 ha sido otro gran año para las herramientas de JS, con un trabajo constante para innovar y mejorar el rendimiento. Muchos proyectos han madurado y ganado impulso, mientras que otros proyectos emocionantes aún están en desarrollo.

Vite ha sido nuevamente el gran ganador este año, renovando por segunda vez su premio State of JS como la tecnología más adoptada y amada. Es raro lograr un alto uso y retención a la vez, y mucho menos mantenerlo. ¡Estamos ansiosos por ver cómo la nueva empresa void(0) impactará el ecosistema de Vite el próximo año!

Vale la pena mencionar que las herramientas más exitosas están facilitando su adopción:

• Rspack es una alternativa casi directa a webpack que comenzó a ganar tracción, siendo adoptada con éxito por Docusaurus y Nuxt. Debería explotar en 2025, dado lo fácil que es adoptarla y la cantidad de proyectos existentes en webpack que podrían compilar más rápido.
• Bun es una herramienta todo en uno de JS, también diseñada para facilitar su adopción gracias a su compatibilidad con Node.js, npm o Jest. Continuó su trabajo de compatibilidad en 2024, destacando el soporte para Windows y el lockfile basado en texto.
• Rolldown es un bundler rápido con una API compatible con Rollup y paridad de características con esbuild. Todavía está en desarrollo activo, pero progresa rápidamente y recientemente publicó la primera beta v1.0. Es uno de los proyectos más esperados, y está previsto que impulse Vite en 2025.
• Turbopack es un bundler incremental que se centra en ser un detalle de implementación de Next.js, que puedes activar con un simple flag del CLI --turbo. Turbopack Dev se considera estable, y Turbopack Prod está en desarrollo activo. Se planea una versión independiente de Turbopack en el futuro.
• Biome, una alternativa más rápida a Prettier (con un 97 % de compatibilidad) y ESLint, ha sido ampliamente adoptada con opiniones positivas por la comunidad.

En el ámbito de TypeScript, también vale la pena mencionar:

• TypeScript 5.5 introdujo Isolated Declarations, desbloqueando una mejor paralelización de builds
• Node.js ahora soporta TypeScript por defecto y puede ejecutar archivos .ts directamente. Llegará en la próxima versión v23.6 y debería ser incorporado en la v22. Tanto Bun como Deno ya tenían soporte.

En 2024, React Native continúa dominando el espacio de desarrollo de aplicaciones móviles, manteniéndose como el framework más popular para construir aplicaciones multiplataforma. Expo, por segundo año consecutivo, sigue siendo el proyecto mejor valorado, con un crecimiento significativo desde 2023.

Una de las mayores tendencias este año es el creciente énfasis en el soporte web/universal en React Native. Expo Router ha avanzado considerablemente en cerrar la brecha entre web y nativo, introduciendo componentes DOM de Expo ('use dom') para permitir una migración incremental entre React web y React universal. Esto también se puede observar en el cambio de Meta, alejándose de React Native for Web hacia soluciones más enfocadas en la web como React Strict DOM y Stylex, que están utilizando internamente. Además, la mayoría de los proyectos más destacados se centran en la unificación web/nativo.

El estilo sigue siendo un enfoque clave en el ecosistema. Esto se observa especialmente con Yoga v3 (el motor de estilos de React Native), que ha traído una serie de mejoras a los estilos integrados en React Native, impulsadas principalmente por el trabajo de Meta en aplicaciones como Instagram y Facebook para Quest (desarrolladas con React Android). Mientras tanto, las soluciones impulsadas por la comunidad continúan prosperando, trayendo las mejores partes de la web al entorno nativo.

De cara al futuro, espero que la IA desempeñe un papel aún mayor en las herramientas de desarrollo nativo y aplicaciones. La primicia de Expo Router sobre como usar Componentes de Servidor universales de React probablemente inspire la aparición de nuevas librerías de servidor. Además, las interfaces nativas probablemente evolucionarán aún más, con más integraciones con SwiftUI y Jetpack Compose, ampliando el 'camino al éxito'.

También predigo que la comunidad nativa crecerá aún más con la introducción de componentes DOM de Expo y las continuas mejoras en las herramientas de implementación de aplicaciones con un solo comando como (EAS Build), haciendo que sea un espacio mucho más familiar y emocionante para todos los desarrolladores.

¡2025 definitivamente será un año emocionante!

Zustand continúa su meteórico ascenso como la librería de gestión de estado preferida para React, así como para React Native y más allá. Zustand es la librería de gestión de estado con el "mínimo esencial" y está claro que los desarrolladores buscan precisamente eso.

Si analizamos los resultados según el estilo de gestión de estado, surgen patrones interesantes. Zustand, Pinia, Redux y Boardgame son unidireccionales: defines tu estado y las acciones que lo modifican. Con Jotai, Nano stores y Legend-State, defines tu estado como átomos y creas átomos computados que dependen de otros átomos. Valtio es una librería bidireccional para la gestión de estado. Y XState es una librería de máquinas de estados.

Una conclusión que podemos sacar de estos resultados es que el estilo formal de gestión de estado tipo Redux (aunque no necesariamente la librería Redux en sí) sigue siendo el más popular. Mientras tanto, el modelo atómico está avanzando significativamente (Recoil, la librería atómica original, está justo fuera del top diez).

Sin embargo, XState no puede pasarse por alto. Para aplicaciones complejas, las máquinas de estados son una elección fantástica porque modelan tu aplicación en una serie estricta de estados y transiciones entre ellos. Si aún no la has probado, el editor interactivo y el simulador para X-State son imprescindibles.

Boardgame y TinyBase son adiciones muy interesantes en el top diez. Boardgame está específicamente orientada al desarrollo de juegos. Tinybase, por su parte, se centra en el almacenamiento de datos local-first y la sincronización de esos datos con servicios backend. Ambas librerías están altamente especializadas, lo que podría indicar una tendencia. Problemas como sincronizar datos local-first con servicios backend son complejos, por lo que tener librerías (como Tinybase y Legend State) que se enfoquen específicamente en eso es algo positivo.

Algo que no aparece en esta lista son las "señales". No estoy seguro de si esto se debe a que los desarrolladores están esperando que se finalice y adopte ampliamente la propuesta de TC39, o porque está integrado en frameworks como Solid, Svelte y Qwik. Aunque las señales no hayan llegado al top diez, siguen siendo una forma destacada de modelar el estado de manera eficiente.

Los próximos años prometen ser un período emocionante para la gestión de estado en React, Vue, JavaScript y más allá.