2022 JavaScript Rising Stars

El proyecto más popular del año es Bun, un nuevo run time 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 2 años, provee soporte nativo de TypeScript.

Bun no solo es un run time, 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.

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.

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.

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

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.

Escritor invitado: Lee Robinson

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

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.

Escritor invitado: Anthony Fu

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

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!

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.

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

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:

• Lightning CSS (formalmente Parcel CSS): herramientas más rápidas para CSS
• Speedy TypeScript type checker: una alternativa más rápida a tsc
• mdxjs-rs: implementación que mejora la velocidad de MDX