Bienvenido a la 7ª edición de JavaScript Risings Stars!

Como cada año, hemos intentado traeros una visión general de los proyectos más populares del mundo JavaScript de los últimos 12 meses.

El campeón de este año ha sido un delicioso panecillo con un logo muy sonriente, siempre es bueno empezar el año con una sonrisa!


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 2022
    BunTauriReactNext.jsVitetRPCAstroVS CodeTabbyPlaywright
  2. Frameworks Front-end
    ReactQwikSolidSvelteVue.js 2
  3. Ecosistema React
    Next.jstRPCMantineExcalidrawZustand
  4. Ecosistema Vue
    SlidevNuxt 3Vue Element AdminAutoAnimateHeadless UI
  5. Frameworks Node.js
    Next.jstRPCAstrocreate-t3-appRemix
  6. Build
    ViteTurboreposwcNxRome
  7. Móvil
    React NativeExpoReact Native SkiaIonicQuasar
  8. CSS en JavaScript
    UnoCSSvanilla-extractStyled ComponentsStitchesEmotion
  9. Testing
    PlaywrightStorybookCypressPuppeteerVitest
  10. Escritorio
    TauriElectronNativefierNeutralinoelectron-builder
  11. SSG
    Next.jsAstroDocusaurusNuxt 3Nextra
  12. Estado de la aplicación
    ZustandPiniaJotaiXStateRecoil
  13. GraphQL
    TanStack QueryDirectusRedwoodHasura GraphQL EngineGatsby
  14. Conclusión

Proyectos más populares del 2022

1
Bun

Bun

Incredibly fast JavaScript runtime, bundler, transpiler and package manager – all in one.
+36.6k☆

Tendencias en 2022

80
40
116
104
99
6.9k
21.7k
3.7k
1.3k
1.2k
697
716
E
F
M
A
M
J
J
A
S
O
N
D

Datos de GitHub

Creado
2021-04
Total estrellas
37.4k☆

Links

2
Tauri

Tauri

Build smaller, faster, and more secure desktop applications with a web frontend.
+30.5k☆
3
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+19.8k☆
4
Next.js

Next.js

The React Framework
+19.4k☆
5
Vite

Vite

Next generation frontend tooling. It's fast!
+15.5k☆
6
tRPC

tRPC

Move Fast and Break Nothing. End-to-end typesafe APIs made easy.
+15.2k☆
7
Astro

Astro

A website build tool for the modern web — powerful developer experience meets lightweight output.
+15.0k☆
8
VS Code

VS Code

Visual Studio Code
+15.0k☆
9
Tabby

Tabby

A terminal for a more modern age
+14.4k☆
10
Playwright

Playwright

A framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
+14.3k☆

Ganador: Bun 🏆

El proyecto más popular del año es Bun, un nuevo runtime de JavaScript que pone el foco en el rendimiento y la experiencia de desarrollo. Su popularidad aumentó durante el verano con su primera versión Beta: con más de 20,000 estrellas en GitHub en un solo mes, nunca hemos visto un crecimiento tan grande en tan poco tiempo desde que empezamos a analizar proyectos en Best of JS.

Pero, ¿qué tiene Bun de especial? Al igual que Deno, el ganador de hace dos años, provee soporte nativo de TypeScript.

Bun no solo es un runtime, sino también:

  • Un gestor de paquetes (como Yarn, NPM, PNPM)
  • Una herramienta para el build (Webpack, ESBuild, Parcel)
  • Un motor para ejecutar nuestros tests
  • ... y muchas otras cosas!

Bun puede instalar tus dependencias leyendo el package.json, ejecutar tus scripts y de una forma tan rápida como nunca antes se ha visto.

Bun toma un nuevo enfoque en muchos aspectos del ecosistema JavaScript centrándose en conseguir un buen rendimiento.

Prioriza Web APIs estándar como Fetch. Soporta muchas APIs de Node.js lo que lo hace compatible con la mayoría de paquetes NPM. Puede que por el momento no esté preparado para producción (debido a la falta de soporte en Windows) pero es una herramienta muy prometedora. Comparándolo con Deno, su ecosistema es muy reciente sin embargo ya tiene un web framework llamado Elysia que afirma ser el framework HTTP más rápido.

Una de las cosas más sorprendentes sobre Bun es que su creador Jarred Sumner implementó todas estas funcionalidades desde cero, usando un lenguaje de bajo nivel llamado Zig.

Echa un ojo a A Complete Overhaul of the JavaScript Ecosystem para conocer más detalles.

Tauri

Llegando a ocupar la quinta posición en el 2021, Tauri ha llegado a ser aún más popular este año, consiguiendo 30,000 nuevas estrellas. Es un proyecto escrito en Rust para crear aplicaciones de escritorio multi plataforma usando tecnologías web.

La versión 1.0 fue lanzada en junio.

Ha sido creado teniendo muy en cuenta la seguridad y el rendimiento. Comparado con Electron, este se centra en reducir la huella ecológica utilizando los menores recursos del sistema posibles, ofreciendo funcionalidades compiladas que no necesitan evaluación runtime y facilitando guías a los desarrolladores para optimizar al máximo sus apps.

React y Next.js

En tercer y cuarto puesto, React y Next.js tienen cifras similares, con casi 20,000 estrellas nuevas.

Next.js 13 apareció en octubre, proporcionando los React Server Components introducidos por React 17 en el 2020.

Andrew Clark, uno de los responsables del mantenimiento de React, hizo una declaración sobre su futura adopción en este hilo:

Los Server Components son el futuro de React y nuestro objetivo es propagar esta arquitectura por todo el ecosistema de React, sin importar el framework

Vite

Ocupando la quinta posición, Vite es la herramienta más popular para crear aplicaciones basadas en tecnologías web, que a la vez proporciona una estupenda experiencia de desarrollo.

Ha tenido dos lanzamientos importantes este año (v3 en julio y v4 en diciembre).

Vite potencia cada vez más proyectos, incluyendo los frameworks SvelteKit, Qwik y Vitest.

Frameworks Front-end

1
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+19.8k☆
2
Qwik

Qwik

The HTML-first framework. Instant apps of any size with ~ 1kb JS
+12.8k☆
3
Solid

Solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+11.1k☆
4
Svelte

Svelte

Cybernetically enhanced web apps
+10.0k☆
5
Vue.js 2

Vue.js 2

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

React continúa siendo el rey en 2022, pero Vue.js le sigue muy de cerca en términos de popularidad si consideremos que la estrellas de Vue.js están divididas entre dos repositorios: v2 y v3.

El cambio principal de este año es el crecimiento de Qwik, llegando hasta la segunda posición. Qwik se parece a React, también usa componentes escritos en JSX sin embargo, la principal diferencia es su énfasis en intentar incluir la menor cantidad de código JavaScript en el navegador.

Forma parte de la tendencia "Zero baseline JavaScript". Sitios y aplicaciones web están muchas veces cargados de ficheros JavaScript pesados que afectan al rendimiento en el navegador: incluso si la página se renderiza en el servidor los usuarios tienen que esperar hasta que el código JavaScript se cargue, procese y ejecute para poder interactuar con la página.

En vez de depender en hydration para proporcionar interactividad a las páginas generadas en el servidor, Qwik usa una técnica llamada "resumability" que provee HTML que es instantáneamente interactivo. Funciona serializando el estado de la aplicación en el propio HTML.

El proyecto está dirigido por Miško Hevery, creador de AngularJS, que tenía el eslogan "HTML enhanced for web apps", mientras que el de Qwik es "the HTML-first framework"...una intención similar de crear apps encima de nuestro viejo conocido HTML.

Ecosistema React

1
Next.js

Next.js

The React Framework
+19.4k☆
2
tRPC

tRPC

Move Fast and Break Nothing. End-to-end typesafe APIs made easy.
+15.2k☆
3
Mantine

Mantine

React components library with native dark theme support
+12.8k☆
4
Excalidraw

Excalidraw

Virtual whiteboard for sketching hand-drawn like diagrams
+12.8k☆
5
Zustand

Zustand

Bear necessities for state management in React
+12.5k☆

Escritor invitado: Lee Robinson

Lee Robinson es desarrollador, escritor, y creador que trabaja en Vercel como VP de Developer Experience.

Guest Writer leerob

2022 ha visto como React ha tomado un posicionamiento más definido en sus formas de usarlo.

React continúa siendo una librería que permite gran flexibilidad para crear cualquier tipo de sitio web, pero también ha evolucionado llegando a convertirse en una arquitectura que los frameworks pueden seguir para crear patrones frontend interactivos, robustos y con buen rendimiento.

El lanzamiento de React 18 (en marzo) incluía funcionalidades concurrentes y APIs que proporcionan patrones de arquitectura para frameworks. Introduce los React Server Components, diseñados para usar en conjunción con estos nuevos patrones de arquitectura. Algunas de las convenciones ya han sido estandarizadas entre los frameworks React (ej. use client) y otros están en proceso (ej. async/await in Server Components) durante sus fases beta.

En 2023, continuaremos viendo usos de las nuevas primitivas de React, además de su aplicación en su amplio ecosistema. El crecimiento de librerías para mejorar un tipado seguro y nuevos componentes UI continuará creciendo.

Ecosistema Vue

1
Slidev

Slidev

Presentation Slides for Developers
+7.2k☆
2
Nuxt 3

Nuxt 3

The Intuitive Web Framework, based on Vue 3.
+7.0k☆
3
Vue Element Admin

Vue Element Admin

A magical vue admin
+6.8k☆
4
AutoAnimate

AutoAnimate

A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
+6.4k☆
5
Headless UI

Headless UI

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
+5.9k☆

Escritor invitado: Anthony Fu

Miembro del equipo Core de vuejs, Vite y Nuxt. Creador de VueUse y Slidev.

Guest Writer antfu

Este año hemos tenido muchas actualizaciones importantes de Vue. Vue 2.7 incluye soporte de la Composition API y de la sintaxis <script setup> para Vue 2.

La transición a Vue 3 ha sido más sencilla. <script setup> se ha vuelto estable y mayormente disponible, y la nueva funcionalidad experimental "Reactivity Transform" está cerca de consolidarse para mejorar la experiencia de desarrollo aún más. El equipo también está trabajando en una estrategia de rendering llamada "Vapor mode", inspirado por Solid.js, que puede proporcionar a Vue mejor rendimiento en partes críticas.

Las versiones estables de Nuxt 3 y Vuetify 3 indican que el ecosistema de Vue está maduro. Vite ha crecido mucho a lo largo del año y se puede apreciar una buena acogida entre los usuarios de Vue, desde create-vue, Nuxt, Quasar, Astro y muchos otros nuevos frameworks. Con el poder de Vite, los usuarios de Vue también consiguen una mejor experiencia de testing/desarrollo con Vitest y Histoire. También hemos visto un uso creativo de Vue, como crear apps de línea de comandos con vue-termui.

¡Menudo año para las mejoras en la experiencia de desarrollo! Esperamos que la comunidad encuentre estas herramientas útiles para mejorar su forma de trabajo. ¡Estamos expectantes de que vendrá a continuación!

Frameworks Node.js

1
Next.js

Next.js

The React Framework
+19.4k☆
2
tRPC

tRPC

Move Fast and Break Nothing. End-to-end typesafe APIs made easy.
+15.2k☆
3
Astro

Astro

A website build tool for the modern web — powerful developer experience meets lightweight output.
+15.0k☆
4
create-t3-app

create-t3-app

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

Remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
+11.4k☆

El límite que separa a un framework de ser frontend o backend es fino en muchas ocasiones, ya que hay una tendencia a hacer cada vez más cosas en el lado servidor (incluyendo rendering y routing) comparado con el enfoque SPA, donde el backend es el único responsable de la API. Por esta razón, la sección incluye full-stack, meta y backend frameworks.

Next.js

Al igual que el año pasado, Next.js lidera el ranking. La versión 13 ha traído grandes funcionalidades incluyendo React Server Components y la nueva estructura del sistema de ficheros usando la carpeta app, que permite a los desarrolladores ubicar su código en relación a sus funcionalidades y gestionar rutas anidadas de una forma muy potente.

tRPC

Uno de las novedades ha sido el crecimiento de tRPC, llegando hasta la segunda posición. Olvidémonos de REST contra GraphQL: ahora también aparece el protocolo JSON RPC 2.0 que potencia a tRPC. Una de sus funcionalidades más llamativas es la posibilidad de importar types definidos en el servidor desde el cliente, para proporcionar "end-to-end type safety".

Nos gustaría mencionar también el proyecto t3-stack, que combina tRPC, Next.js y Tailwind CSS en un boilerplate muy popular (dentro de los 20 proyectos más populares del año).

Astro

En tercera posición tenemos a Astro. En 2021 apareció como un static site generator e hizo popular el concepto de partial hydration.

La habilidad del equipo de Astro para crear una buena experiencia de desarrollo se resalta en el lanzamiento de Astro 1.0.

La integración del nuevo soporte para SSR con cualquier herramienta frontend (como React y SCSS) hace que el desarrollo web se sienta muy fresco!

Remix

En cuarto puesto, Remix continúa creciendo a mucha velocidad. Su código fue liberado en 2021 y justo un año después lo adquirió Shopify.

En el post The Web Next Transition Kent C. Dodds hizo un gran trabajo explicando los patrones que hacen Remix tan especial.

En vez de depender en la generación estática de páginas, Remix implementa computación distribuida y funcionalidades nativas del navegador para proporcionar buen rendimiento y experiencia de desarrollo.

Build

1
Vite

Vite

Next generation frontend tooling. It's fast!
+15.5k☆
2
Turborepo

Turborepo

Incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust – including Turbopack and Turborepo.
+13.9k☆
3
swc

swc

A super-fast compiler written in rust
+6.4k☆
4
Nx

Nx

Smart, Fast and Extensible Build System
+6.0k☆
5
Rome

Rome

Unified developer tools for JavaScript, TypeScript, and the web
+5.1k☆

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

Este año Vite continúa creciendo y se ha convertido en uno de las herramientas más populares en el mundo frontend. Su precursor, Snowpack, se ha dejado de mantener y recomiendan usar Vite en su lugar. Su uso no está limitado al ecosistema de Vue: Vite es usado en SvelteKit, Storybook, Vitest o incluso como alternativa moderna a Create-React-App.

También hemos visto un crecimiento de herramientas para monorepo como Nx y Turborepo. Nwrl (la compañía detrás de Nx) ha tomado el mantenimiento de Lerna y lanzado Lerna 6 que activa optimizaciones de Nx por defecto.

Aunque Babel continúa siendo popular, swc y esbuild han sido ampliamente acogidos por muchos proyectos y meta-frameworks. Estas herramientas han mejorado sustancialmente el rendimiento de los procesos de build y transpilación. swc es una opción más modular ofreciendo un sistema de plugins.

Vercel anunció la versión alpha de Turbopack, un nuevo bundler creado con Rust, en el que está trabajando Tobias Koppers (el creador original de Webpack).

El conjunto de herramientas Rome, ha publicado su primera versión estable, comenzando con un linter y formatter con unas opciones interesantes. Por el momento su recibimiento ha sido modesto pero puede que crezca a lo largo del año.

Algunas herramientas frontend creadas con Rust que podrían sorprendernos este año son:

Móvil

1
React Native

React Native

A framework for building native applications using React
+6.5k☆
2
Expo

Expo

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

React Native Skia

High-performance React Native Graphics using Skia
+2.8k☆
4
Ionic

Ionic

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
+2.6k☆
5
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.5k☆

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 2022, el uso de JavaScript para crear apps nativas vio un progreso significativo, como pudimos comprobar con el éxito de proyectos como el nuevo Replit mobile app y la integración de React Native en la app de Shopify. De hecho, 7 de los 10 rising stars en la categoría móvil de este año están basados en React Native. Lo que ha llevado a React Native a ser, por séptimo año consecutivo, el número 1 en recibir más estrellas a lo largo del año.

Además del éxito de React Native, también hubo una tendencia muy emocionante de adoptar patrones populares del mundo web, como el uso de Tailwind CSS con NativeWind (#10) o los avances en Skia rendering (#3). La integración de funcionalidades clásicas de la web como el File System-based routing en Expo (#2), demostró que el desarrollo de apps nativas se está haciendo cada vez más accesible para desarrolladores web.

Es dificil predecir que futuro le espera al desarrollo móvil, pero si este año sirve de referencia, la división entre desarrollo web y nativo debería de continuar reduciéndose en 2023.

Loading
Loading
Loading
Loading
Loading
Loading

Conclusión

2022 empezó envuelto en el caos cuando dos paquetes muy populares fueron intencionalmente rotos por su creador: Faker.js and colors.js sabotaged.

La fragilidad de este gran ecosistema quedó demostrada de nuevo cuando Lerna, una herramienta muy conocida para mono-repos dejó de tener mantenimiento...hasta que Nrwl, la compañía detrás de Nx, anunció que se encargaría de ella.

JavaScript continúa arrasando, quizás hayas oído hablar de esta profecía del 2009:

Cualquier aplicación que pueda ser escrita en JavaScript, será escrita en algún momento en JavaScript

...o en TypeScript podríamos añadir 13 años después, ya que TypeScript se ha convertido en el estándar a la hora de escribir JavaScript (soporte por defecto en Deno, Bun, Next.js, Vite...).

El lugar tomado por JavaScript y sus herramientas también tiene sus problemas, tanto para desarrolladores como para los usuarios finales:

  • los tiempos de build se disparan en proyectos grandes.
  • el tamaño del código JavaScript continúa creciendo llevándonos a un deterioro de rendimiento.

En 2022, vimos grandes innovaciones para resolver estos dos tipos de problemas en diferentes capas del stack tecnológico.

Las herramientas mejoraron con las siguientes soluciones:

  • Bun, el campeón del año, toma un enfoque radical mejorando la velocidad de instalación y build.
  • Rome es ahora un linter y formatter que intenta ser una sola herramienta para manejar aplicaciones escritas en JS/TS.
  • La herramienta de build Vite.

Para mejorar el rendimiento en el navegador, hay diferentes patrones compitiendo:

  • Frameworks "Zero baseline JavaScript" que intentan proveer prácticamente nada de JS al navegador (Qwik lidera este frente)
  • Partial hydration proporcionando interactividad a páginas estáticas (Astro)
  • React Server Components (implementado en Next.js 13 y Gatsby) para delegar más peso en el lado servidor.
  • La arquitectura Progressively Enhanced Single Page Apps implementada por Remix proporciona tanto una gran experiencia de desarrollo como buen rendimiento en el navegador sin comprometer ningún comportamiento dinámico.

No hay una fórmula mágica para resolver estos problemas, ya que el espectro entre páginas estáticas y completamente dinámicas es amplio.

El panorama JavaScript ha estado muy fragmentado anteriormente: por un lado teníamos diferentes navegadores y por otro Node.js, con su sistema de módulos CommonJS además de sus propias APIs.

Con el surgimiento del edge computing, hay una tendencia de usar el mismo conjunto de APIs estándar en cualquier lugar (fetch, HTTP Request and Response...).

Nuestro escritor invitado Lee Robinson, hizo un gran resumen de estas tendencias en el artículo Why I'm Optimistic About JavaScript's Future.

Y compartimos totalmente el optimismo de su conclusión!

Que gran momento para ser desarrollador web.

Spanish version

Authors

Available Translations

English

中文

日本語