Bienvenido a la 8ª edición de JavaScript Rising Stars, el lugar para ver las tendencias sobre el ecosistema JS del 2023.
¡Veamos cómo un conjunto de componentes UI que puedes copiar y pegar conquistaron el mundo!
Bienvenido a la 8ª edición de JavaScript Rising Stars, el lugar para ver las tendencias sobre el ecosistema JS del 2023.
¡Veamos cómo un conjunto de componentes UI que puedes copiar y pegar conquistaron el mundo!
En 2023, React mantiene su posición como líder en el ecosistema de JavaScript, una tendencia que persiste desde 2021 y 2022, a pesar de críticas y controversias ocasionales.
Celebrando su décimo aniversario, React consiguió tener su propio documental (lo puedes ver aquí) ¡esto dice mucho sobre su popularidad!
Sin embargo, React no está exento de escépticos. Algunos lo ven como una reliquia del pasado, un sentimiento detallado en este artículo, que también explora soluciones alternativas. Por otro lado, los defensores elogian a React por su notable adaptabilidad y capacidad para reinventarse.
Un punto de controversia gira en torno a la ausencia de "señales" ("signals"), un mecanismo de manejo de reactividad utilizado por librerías como Solid o Preact, mientras que los entusiastas de React aprecian la previsibilidad que ofrece el flujo de datos de React.
Del tweet de Devon Govett, el creador de Parcel, sobre las señales:
La simplicidad de la UI como una función del estado se pierde cuando las actualizaciones fluyen de manera impredecible.
Para obtener más información sobre las señales, puedes leer La evolución de las señales, un análisis detallado de uno de los términos más destacados del año.
En segundo lugar, htmx es una librería que toma un enfoque diferente para proporcionar interactividad al HTML: en lugar de escribir varias líneas de código JavaScript, los desarrolladores nutren el HTML con atributos específicos y de esta forma habilitan la interactividad en tiempo real y actualizaciones dinámicas.
Fue elogiado por su poco peso y su perfecta integración con los frameworks del lado servidor existentes, ya que forma parte de la tendencia de "enviar HTML sobre el cable": pedir al servidor que envíe bloques parciales de HTML en lugar de manejar JSON en el cliente.
En el mismo ámbito de "tagging libraries", Alpine.js es una solución popular (número 13 este año).
En tercer lugar, la popularidad de Svelte sigue creciendo. A menudo se ve como una alternativa moderna a React. Un gran cambio llegará dentro de pronto con Svelte 5, "el lanzamiento más esperado en la historia del proyecto", que introduce runes para abordar algunos de los mayores problemas al manejar la reactividad del estado. Este breve video de Rich Harris hace un gran trabajo explicando los problemas resueltos por las runas.
Una de las historias del año está relacionada con Svelte y causó mucho debate (por ejemplo, Hacker News): el equipo de Svelte ha elegido usar JavaScript con anotaciones JSDoc en lugar de TypeScript, para evitar la complejidad adicional y las desventajas asociadas con TypeScript, al tiempo que sigue brindando los beneficios de la seguridad en el tipado.
Sébastien lleva usando React desde su aparición, trabaja con Facebook Open-Source en Docusaurus.
Creador de una newsletter semanal sobre React y React Native: This Week in React
En 2023, vimos a React adentrarse en su tercera era con la llegada de los React Server Components.
Los equipos principales de React y Vercel colaboraron para lanzar la primera implementación estable: Next.js 13.4 App Router. A pesar de liderar una innovación emocionante y desplegar los recursos necesarios, Vercel recibió críticas por su relación privilegiada con el equipo principal de React y el acceso temprano a funciones experimentales. A principios de 2023, era común ver nuevas características de React documentadas inicialmente en la documentación de Next.js. La comunidad no apreció ciertas decisiones de diseño, como la extensión de la API fetch()
, sobre la cual ahora están retrocediendo. También era común ver quejas sobre la estabilidad del App Router y el rendimiento de su servidor de desarrollo. Sin embargo, los primeros usuarios de React Server Components informaron muchos beneficios prometedores, como tamaños de paquete más pequeños y código considerablemente simplificado.
El equipo de React aclaró su postura y estrategia del lanzamiento de sus nuevas funciones experimentales. Siempre está bien que los frameworks adopten versiones canary, cuyos cambios que rompan compatibilidad con versiones anteriores se documenten. También se pusieron al día con la documentación, finalizando el año con una excelente Actualización de la Documentación de React, documentando exhaustivamente las API más recientes (useFormState, , ‘use server’ ...).
También presenciamos la llegada de Server Actions, una nueva funcionalidad troncal de React que fue implementada por primera vez de forma estable en Next.js 14, permitiendo llamadas RPC sin problemas para envíos de formularios y mutaciones. Muy parecida a la filosofía de Remix, Server Actions están diseñadas con mejora progresiva en mente.
En 2024, será emocionante ver cómo otros frameworks adoptan React Server Components, especialmente:
Estamos esperando con muchas ganas React 19, que debería llegar pronto.
Miembro del equipo principal de Nuxt, ponente, amante del código abierto y Developer Experience Engineer en Prismic.
Con Vue 2 anunciando su final para el último día del 2023, este año se consideró un punto de inflexión para Vue y su comunidad, con muchos de nosotros embarcándonos en el viaje de actualización a la versión 3.
En ese sentido, se realizaron esfuerzos para facilitar la migración, el ecosistema se puso al día y continuó desarrollándose: ¡mostró excelentes resultados! Nuxt 3 ahora tiene más descargas que Nuxt 2. Los frameworks de UI, como Vuetify y PrimeVue, están más listos que nunca para ayudar a construir aplicaciones grandes (¡y no tan grandes!). Librerías como VueUse, Pinia, o incluso TresJS continuaron creciendo y mejorándose para potenciarnos a todos de manera más efectiva.
Al igual que en 2022, la Experiencia del Desarrollador aún era una prioridad principal. Vue 3.3 introdujo un mejor soporte para TypeScript en <script setup>
. Nuxt lanzó 8 versiones menores y presentó Nuxt DevTools, una interfaz creativa e intuitiva para ayudarnos a comprender mejor nuestras aplicaciones y desarrollarlas más rápidamente.
Mirando hacia adelante, y como dijo Evan, 2024 promete ser un año emocionante para Vue. Vue 3.4 está a la vuelta de la esquina y el modo Vapor, ahora código abierto, está progresando bien. Todo ello sintonizando el nuevo año para obtener más mejoras de rendimiento e innovación comunitaria.
Este año Next.js continúa siendo el proyecto líder en la categoría de backend/fullstack.
La versión 14 se centra en mejorar las acciones del servidor e introduce un nuevo modo de renderización de Vista Previa Parcial.
Con React Server Components, los desarrolladores pueden construir aplicaciones web con nuevos paradigmas que pueden simplificar drásticamente el código: obtener datos directamente desde un componente async
y mutar datos vinculando formularios a acciones del servidor.
Mucho se ha hablado sobre esta presentación que muestra cómo hacer una solicitud SQL directamente desde un componente, pero la gente puede haber pasado por alto el punto clave: los React Server Components pueden comportarse como componentes autocontenidos que se pueden colocar en cualquier parte de su aplicación, sin necesidad de un tedioso cableado. El video hace un gran trabajo para ayudar a construir el nuevo modelo mental posible gracias a RSC, mostrando una mezcla de componentes del servidor y del cliente que funcionan perfectamente.
En segundo lugar, Astro sigue escalando en las clasificaciones. Además del concepto original (generar sitios estáticos ultrarrápidos que se ejecutan sin JavaScript y agregar interactividad con islas mediante el framework de UI de su elección), también se puede utilizar para generar páginas de forma dinámica.
Me impresionó la simplicidad del sistema de plantillas de archivos .astro
(muy similar a JSX) y la excelente experiencia de desarrollo (¡la interfaz de línea de comandos es una maravilla!).
La versión 4 introduce una nueva barra de herramientas para el desarrollo, enrutamiento automático de i18n y una nueva API de Transición de Vista para mejorar la experiencia del usuario.
Bun también es un bundler, por ello lo incluimos este año en la categoría "Build".
En segundo lugar, Vite sigue siendo el empaquetador más popular y versátil, impulsando meta-frameworks como Astro, Nuxt, Remix, SolidStart, SvelteKit...
La versión 5 lanzada en noviembre, se construye sobre rollup 4, brindando mejoras de rendimiento.
Evan You anunció que estaba trabajando en Rolldown, una reimplementación de Rollup en Rust que se integrará en Vite. ¡Así que el futuro de Vite es prometedor!
En tercer lugar, el ascenso de Biome es una de las historias del año. Está relacionado con la caída de "Rome", un proyecto ambicioso que buscaba unificar las herramientas (compilación, linting, formato, empaquetado, testing). La empresa detrás del proyecto fracasó y el proyecto se detuvo este año.
Afortunadamente, el proyecto fue bifurcado y renació bajo el nombre de Biome.
En noviembre, Biome ganó el Desafío Prettier: creando "un formateador de código implementado con Rust que podría superar el 95% de las pruebas de Prettier". Dado que Prettier se ha convertido en todo un estándar, podemos esperar una mayor adopción de Biome en 2024.
Hablando de Rust, Oxc y Rspack son los nuevos jugadores en este terreno, provenientes del equipo de ByteDance. Rspack proporciona compatibilidad con Webpack mientras ofrece un rendimiento inigualable. ¡Por primera vez desde que lanzamos Rising Stars, es extraño no ver a Webpack en las clasificaciones dada la cantidad de proyectos que lo utilizan!
Lead de Desarrollo de Herramientas en Expo. Desarrollador de sistemas nativos iOS y Android. Autor de Config Plugins y Expo CLI.
En 2023, el ecosistema móvil avanzó significativamente hacia la unificación entre las experiencias de desarrollo web y nativas. Esto lo podemos apreciar en los proyectos líderes Expo (#1), Tamagui (#3) y Nativewind (#6), los cuales comparten el objetivo de maximizar la reutilización de código y aumentar la accesibilidad para los desarrolladores web.
Existe una clara tendencia hacia mejores soluciones de estilo en React Native, con Tamagui (#3), Nativewind (#6) y React Native Paper (#7) liderando el camino. Esto se refleja en la comunidad web, donde shadcn-ui ocupó el puesto #1 en popularidad general. Dudo que este movimiento desacelere en 2024.
En 2022, la recomendación oficial del equipo de React cambió de soluciones boilerplate como Create React App a soluciones centradas en frameworks como Remix y Next.js. Un año después, podemos observar un cambio similar en el ecosistema de React Native. Herramientas como Expo, Tamagui e Ignite, que ofrecen muchas características centradas en frameworks, han ganado popularidad. Este cambio indica un alejamiento de React Native sin framework hacia soluciones más posicionadas en una arquitectura concreta por defecto, señalando la evolución de los paradigmas de desarrollo móvil. Preveo que esta tendencia continuará en 2024.
El dominio de React Native es evidente con siete de los diez proyectos principales basados en esta librería. Sin embargo, la presencia de tres proyectos basados en webview en esta lista sugiere un interés persistente en desplegar sitios web directamente en las stores de aplicaciones tal como están. Quizás 2024 sea el año en que veamos que estas dos aproximaciones comiencen a converger.
En general, fue un año fantástico para el desarrollo móvil. Creo que en 2024 continuará el interés en soluciones de estilo para React Native, habrá más patrones de renderizado para nativo (probablemente con React Server Components en nativo), una mejor integración de servidor para respaldar aplicaciones impulsadas por inteligencia artificial y posiblemente algunos proyectos interesantes de visionOS.
Recapitulemos algunas de las historias y dramas de 2023:
Vimos el auge de herramientas de inteligencia artificial que pueden generar interfaces de usuario a partir de prompts e incluso imágenes, lo que hace que la gente se pregunte si habrá desarrolladores frontend en unos años.
Mientras escribo este resumen por octava vez, uno no puede dejar de preguntarse: ¿Podrá una inteligencia artificial encargarse de esta tarea el próximo año?
Si disfrutaste de este resumen, comparte tu gratitud, ¡y quién sabe, podríamos volver en un año para los Rising Stars de 2024!
Spanish version
Creator of Pixel Art React
Authors
Creator of Best of JS
Ganador: shadcn/ui 🏆
El proyecto más destacado del año es shadcn/ui, una colección de componentes UI escritos en React que permiten la personalización del estilo a través de TailwindCSS.
Construido sobre Radix, un conjunto de componentes headless que proporcionan primitivas para aspectos como la accesibilidad y las interacciones con el teclado, shadcn/ui se distingue de otras librerías populares (como MUI, ChakraUI, React Spectrum) al no ser un paquete descargable de NPM. En su lugar, integramos los componentes shadcn/ui mediante un comando desde nuestra terminal que instala las dependencias subyacentes y copia el código fuente del componente directamente en el código de tu proyecto para su modificación posterior.
El éxito del proyecto está estrechamente relacionado con la popularidad de Tailwind CSS (que ocupa el puesto número 20 en la clasificación global), su compatibilidad con React Server Components y la existencia de una excelente documentación.
Parece que cada vez hay más proyectos React que adoptan shadcn/ui. Incluso fue elegido por Kent C. Dodds para su innovador Epic Stack.
Otro ejemplo, en este caso relacionado con la inteligencia artificial: a partir de un prompt que describe las características y la apariencia de una interfaz de usuario, la aplicación v0.dev genera el código JSX compuesto por componentes shadcn/ui. ¡Fascinante!
Por último, aunque no menos importante, Best of JS también los utiliza, después de la reescritura que hice para hacer la transición de SPA a una aplicación Next.js
Su enfoque ha inspirado otros proyectos como:
Para un análisis en profundidad, consulta el artículo The anatomy of shadcn/ui.
Segunda posición: Bun
Bun, el campeón de 2022, mantiene su tremendo éxito.
Bun tiene como objetivo ser un conjunto de herramientas rápido y completo para ejecutar, construir, testar y depurar aplicaciones JavaScript y TypeScript.
Su versión 1.0 se lanzó oficialmente en septiembre (¡fíjate en el pico de ese mes en el gráfico!), momento en el que Bun confirmó estar listo para producción.
La documentación proporciona unas recetas excelentes para comenzar lo más rápido posible con su API y tareas comunes como la manipulación de archivos y el manejo de interacciones con bases de datos.
Se hizo una declaración contundente al final del año:
La compatibilidad con la mayor parte del ecosistema de Node.js (incluidos los antiguos imports CommonJS mediante
require
) y el soporte de los principales frameworks full-stack (Next.js, Nuxt, Astro...) puede que lo hagan posible!