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!


Los siguientes gráficos comparan el número de estrellas añadidas en GitHub durante los últimos 12 meses. Hemos analizado proyectos procedentes de Best of JS, una lista de los proyectos más destacados del mundo web cuidadosamente seleccionados. Si lo deseas, puedes hacer click en cualquier proyecto para conseguir más información.

Categorías

  1. Proyectos más populares del 2023
    shadcn/uiBunExcalidrawtldrawNext.jsSupabaseReactTauriDrizzle ORMhtmx
  2. Frameworks Front-end
    ReacthtmxSvelteMillionVue.js
  3. Ecosistema React
    shadcn/uiExcalidrawNext.jsZustandRefine
  4. Ecosistema Vue
    NuxtSlidevVue Element AdminVueUseElement Plus
  5. Back-end/Full-stack
    Next.jsAstrotRPCcreate-t3-appNest
  6. Build
    BunViteBiomeOxcRspack
  7. Móvil
    ExpoReact NativeTamaguiQuasarCapacitor
  8. Estilo / CSS en JS
    Tailwind CSSStylexUnoCSSTamaguiPanda
  9. categories.csslib
    DaisyUIBootstrapPico.cssBulmaPrimer
  10. Testing
    PlaywrightStorybookPuppeteerVitestCypress
  11. Escritorio
    TauriWailsElectronNativefierGluon
  12. Static Sites
    Next.jsAstroDocusaurusNuxtNextra
  13. Estado de la aplicación
    ZustandJotaiXStatePiniaNano stores
  14. GraphQL
    TanStack QueryDirectusAmplicationNhostHasura GraphQL Engine
  15. categories.ml
    LangChain.jsTypeChatVercel AI SDKTransformers.jsTesseract.js
  16. Conclusión

Proyectos más populares del 2023

1
shadcn/ui

shadcn/ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
+39.5k☆

Tendencias en 2023

6.8k
1.5k
1.7k
3.5k
4.4k
4.9k
3.2k
3.4k
2.8k
2.1k
1.8k
3.4k
E
F
M
A
M
J
J
A
S
O
N
D

Datos de GitHub

Creado
2023-01
Total estrellas
48.4k☆
2
Bun

Bun

Incredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one
+29.3k☆
3
Excalidraw

Excalidraw

Virtual whiteboard for sketching hand-drawn like diagrams
+23.2k☆
4
tldraw

tldraw

Infinite canvas.
+17.9k☆
5
Next.js

Next.js

The React Framework
+17.8k☆
6
Supabase

Supabase

The open source Firebase alternative
+17.7k☆
7
React

React

The library for web and native user interfaces.
+16.9k☆
8
Tauri

Tauri

Build smaller, faster, and more secure desktop applications with a web frontend.
+15.7k☆
9
Drizzle ORM

Drizzle ORM

Headless TypeScript ORM with a head. Runs on Node, Bun and Deno. Lives on the Edge and yes, it's a JavaScript ORM too
+15.6k☆
10
htmx

htmx

Access AJAX, WebSockets and Server Sent Events directly in HTML
+15.6k☆

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:

Tenemos un objetivo para 2024. Reemplazar Node.js por Bun como runtime por defecto del backend JavaScript.

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!

Frameworks Front-end

1
React

React

The library for web and native user interfaces.
+16.9k☆
2
htmx

htmx

Access AJAX, WebSockets and Server Sent Events directly in HTML
+15.6k☆
3
Svelte

Svelte

Cybernetically enhanced web apps
+10.3k☆
4
Million

Million

<1KB Virtual DOM Implementation
+8.2k☆
5
Vue.js

Vue.js

A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+7.9k☆

React

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.

htmx

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).

Svelte

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.

Otras actualizaciones de frameworks

  • Million v3 es una librería liviana que permite que "los componentes de React se ejecuten a la velocidad de JavaScript puro."
  • Angular 17 introdujo mejoras significativas en rendimiento, documentación actualizada y un nuevo branding (incluyendo bonitos colores para el logo).
  • Quik llegó a la versión 1 en abril. El framework para construir aplicaciones "resumable" que envían cero JS (inicialmente) mientras entregan HTML que se vuelve instantáneamente interactivo.

Ecosistema React

1
shadcn/ui

shadcn/ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
+39.5k☆
2
Excalidraw

Excalidraw

Virtual whiteboard for sketching hand-drawn like diagrams
+23.2k☆
3
Next.js

Next.js

The React Framework
+17.8k☆
4
Zustand

Zustand

Bear necessities for state management in React
+13.2k☆
5
Refine

Refine

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
+11.0k☆

Escritor invitado: Sébastien Lorber

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

Guest Writer slorber

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.

Ecosistema Vue

1
Nuxt

Nuxt

The Intuitive Vue Framework.
+7.6k☆
2
Slidev

Slidev

Presentation Slides for Developers
+5.3k☆
3
Vue Element Admin

Vue Element Admin

A magical vue admin
+4.9k☆
4
VueUse

VueUse

Collection of essential Vue Composition Utilities for Vue 2 and 3
+4.6k☆
5
Element Plus

Element Plus

A Vue.js 3 UI Library made by Element team
+4.0k☆

Escritora invitada: Lucie Haberer

Miembro del equipo principal de Nuxt, ponente, amante del código abierto y Developer Experience Engineer en Prismic.

Guest Writer lihbr

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.

Back-end/Full-stack

1
Next.js

Next.js

The React Framework
+17.8k☆
2
Astro

Astro

A website build tool for the modern web — powerful developer experience meets lightweight output.
+14.4k☆
3
tRPC

tRPC

Move Fast and Break Nothing. End-to-end typesafe APIs made easy.
+12.8k☆
4
create-t3-app

create-t3-app

The best way to start a full-stack, typesafe Next.js app
+9.2k☆
5
Nest

Nest

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript
+8.7k☆

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.

Build

1
Bun

Bun

Incredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one
+29.3k☆
2
Vite

Vite

Next generation frontend tooling. It's fast!
+11.1k☆
3
Biome

Biome

A toolchain for web projects, aimed to provide functionalities to maintain them. Biome offers formatter and linter, usable via CLI and LSP.
+7.0k☆
4
Oxc

Oxc

A collection of JavaScript tools written in Rust.
+6.5k☆
5
Rspack

Rspack

A fast Rust-based web bundler
+6.5k☆

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!

Móvil

1
Expo

Expo

An open-source platform for making universal native apps with React. Expo runs on Android, iOS, and the web.
+6.8k☆
2
React Native

React Native

A framework for building native applications using React
+6.8k☆
3
Tamagui

Tamagui

Universal UI kit and style system for React Native + Web - with an optimizing compiler
+5.0k☆
4
Quasar

Quasar

Responsive Single Page Apps, Server-side Render Apps, Progressive Web Apps, Hybrid Mobile Apps (that look native!) & Electron Apps, all using the same codebase.
+2.1k☆
5
Capacitor

Capacitor

Build cross-platform Native Progressive Web Apps for iOS, Android, and the Web
+2.0k☆

Escritor invitado: Evan Bacon

Lead de Desarrollo de Herramientas en Expo. Desarrollador de sistemas nativos iOS y Android. Autor de Config Plugins y Expo CLI.

Guest Writer evanbacon

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.

Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading

Conclusión

Recapitulemos algunas de las historias y dramas de 2023:

  • Svelte abandonando TypeScript (aunque conserve el tipado seguro).
  • Controversias en torno a React (ya sea por ser demasiado antiguo, complicado o parecido a PHP).
  • La caída de "Rome" y el surgimiento de Biome.
  • Angular rejuvenecido.
  • El lanzamiento de Bun v1.
  • Astro 4.0 publicado.
  • ¡Stylex por fin liberado como código abierto por Meta!

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

Authors

Available Translations

English

中文

日本語

한국어