Los mejores proyectos JavaScript del 2021

TOP 3

El proyecto más popular del año es zx, Google nos ha traído una nueva herramienta para escribir fácilmente scripts de línea de comandos en JavaScript o TypeScript.

Básicamente, nos permite embeber expresiones de bash (ls, cat, git...¡cualquier cosa!) en nuestro código y esperar el resultado con await usando los template literals de JavaScript.

Este incluye funcionalidades proporcionadas por otros paquetes tan populares como:

• node-fetch para hacer llamadas HTTP usando la misma API como fetch en el navegador
• fs-extra para realizar operaciones con el sistema de ficheros
• globby para identificar nombres de ficheros dados sencillos patrones.

En segundo puesto, Vite una herramienta para nuestro build que usa esbuild como compilador, proporcionando un gran rendimiento. Inicialmente estaba asociado a la comunidad de Vue.js pero actualmente tiene opciones para los principales frameworks UI: React, Svelte, Lit.

Y en tercera posición, Next.js mantiene su liderazgo como "meta framework" en el panorama React.

Tauri

En quinto lugar, Tauri que nos permite crear aplicaciones de escritorio usando tecnologías web.

Comparándolo con Electron, está escrito en Rust y no incorpora el runtime de Node.js en cada aplicación. La versión 1.0 beta fue lanzada en mayo.

Mención especial

Aunque no aparezca en el TOP 10, Astro es una de los proyectos más notables del año. Astro es una herramienta para crear sitios web ligeros que cargan notablemente rápido debido a que incluye menos JavaScript.

El concepto es semejante al de "static site generation" (SSG) pero con la diferencia que Astro permite incluir partes dinámicas de interacción en las páginas llamadas "islands".

Para renderizar componentes dinámicos en el lado cliente se pueden usar diferentes estrategias cuando:

• la página carga
• la página no se modifica si es un componente de baja prioridad (por ejemplo tracking)
• el componente es visible usando la API Intersection Observer

Una de las principales características, es que las páginas de Astro pueden ser construidas como combinación de HTML y componentes escritos con cualquier framework/librería: React, Vue.js o Svelte...

Por primera vez en la historia de JavaScript Rising Stars, tenemos a React en primera posición como framework UI, sin embargo tenemos que tener en cuenta que Vue.js se ha dividido en dos repositorios (para las versiones 2 y 3), por lo que Vue.js sería realmente el líder.

El gran cambio de este año es el alzamiento de Svelte que toma la tercera posición, adelantando a Angular.

Cada vez hay más herramientas y componentes que incluyen Svelte entre sus frameworks objetivos (como hemos mencionado Vite es un ejemplo).

Uno de los mayores titulares del año es que Rich Harris, creador de Svelte, se une a Vercel, el equipo detrás de Next.js.

Al igual que Next.js, Svelte tiene su propio meta framework para crear aplicaciones manteniendo un buen rendimiento: SvelteKit.

En quinto puesto, Solid es una interesante alternativa a React. Sus componentes se escriben con JSX pero no dependen del Virtual DOM como hace React.

Ha inspirado a mitosis, una herramienta para crear y compilar componentes teniendo como objetivo cualquier framework: React, Vue.js, Angular, Svelte...

Los principales frameworks UI tienen su propio "meta framework" para crear aplicaciones escalables y modernas, proporcionando funcionalidades como routing, server-side rendering, generación estática de páginas, optimización de builds para producción...

• React tiene a Next.js, el ganador de esta categoría, que podemos considerar como pionero en este ámbito
• Vue.js tiene a Nuxt, ahora dividido en dos versiones para Vue.js v2 y v3
• Svelte tiene a SvelteKit

Remix, un framework full stack para crear aplicaciones React que debuta en esta categoría. Es una de la grandes historias del año. Fue creado por los autores de React Router y no estuvo disponible gratuitamente hasta Octubre.

El proyecto ha sido muy popular (recibió 3M$ en seed funding ¡algo que ayudó mucho!) desde que se hizo público. Su lema es claro: "Fundamentos Web, UX Moderno" ya que su API sigue tanto como puede los estándares web (respuestas HTTP, envíos de formularios...).

Aquí tenemos dos ejemplos que me fascinaron:

Para gestionar envíos de formularios, podemos simplemente...usar la forma normal para envíar formularios. Parece algo trivial sin embargo los desarrolladores estamos acostumbrados a usar event.preventDefault() para evitar el envío de un formulario por ejemplo. La mejor parte es que nos permite trabajar con formularios aunque JavaScript esté deshabilitado! Es realmente interesante ver como Remix revisa comportamientos que damos por hecho, "remixing" viejos principios con un nuevo enfoque que se centra tanto en el usuario como en el desarrollador.

También maneja rutas anidadas de manera inteligente, siendo capaz de cargar solo los datos necesarios por los componentes que forman parte de una página de manera eficiente, en vez de generar una cascada de llamadas HTTP, que normalmente nos llevan a mostrar muchos indicadores de carga en la pantalla.

A diferencia de estos meta frameworks, en segunda posición, Nest es el líder de los frameworks server-side Node.js más convencionales, no anclado a una librería UI.

Y finalmente en tercera posición, Strapi lidera a los "headless CMS", aquellas aplicaciones que proporcionan un rico panel de administración que permite a los usuarios controlar datos y una API moderna. Su última versión (4) proporciona un design system basado en una librería de componentes React.

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

En 2021, las tendencias existentes se han fortalecido.

La adopción de módulos nativos ES continúa. Vite ha sido ampliamente aceptado (más rápido que snowpack), generando un nuevo ecosistema de herramientas (como Vitest, un moderno framework para testing). Los módulos ES también están siendo incorporados en el ecosistema de Node.js, aunque no está siendo sencillo. TypeScript incluso ha retrasado el soporte para módulos ES en Node.js.

Nunca antes se habían creado tantas herramientas frontend escritas en otros lenguajes (ver awesome-js-tooling-not-in-js), principalmente por razones de rendimiento.

Lee Robinson dijo que Rust Es El Futuro en la Infraestructura de JavaScript. Rust es particularmente interesante por su gran rendimiento e interoperabilidad con JavaScript. NAPI-RS permite comunicar JavaScript con Rust sin ningún coste de serialización. Next.js está apostando por SWC, un compilador extensible de Rust que les permite portar los plugins más populares de Babel a Rust.

Parcel 2 has sido lanzado con un nuevo compilador Rust. Las herramientas de Rome también están siendo reescritas en Rust, aunque uno de sus fundadores Jamie Kyle acaba de abandonar la compañía sin dar mucha información al respecto.

Rust es claramente el lenguaje no-JS líder actual, pero no es el único que proporciona gran rendimiento: Bun está escrito en Zig. Turborepo y esbuild están construidos con Go. También destacar que Evan Wallace dejó Figma: quizás ahora pueda dedicar más tiempo para trabajar en esbuild.

En el mundo monorepo, Lerna continúa siendo ampliamente usado aunque no tenga tanto soporte de mantenimiento. Nx, una herramienta monorepo que ayuda a reducir el tiempo de build considerablemente, ha ido creciendo muy rápidamente. Su nuevo competidor Turborepo se ha beneficiado de un gran marketing después de haber sido adquirido por Vercel.

Escritor invitado: Anthony Fu

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

Un año después del lanzamiento de Vue 3, vemos que su ecosistema ha crecido rápidamente e innovando con grandes funcionalidades.

La nueva sintaxis como <script setup> en Vue 3, lleva la experiencia de autoría de componentes a un nivel más allá. La nueva extensión de VS Code Volar, trae soporte TypeScript para Vue. Una nueva librería para el manejo del estado Pinia, que está desarrollado con la nueva Composition API, se está convirtiendo en el sucesor de Vuex.

Con Vite llegando a ser la nueva herramienta por defecto de Vue, meta-frameworks como Nuxt 3, Quasar y VitePress usan ahora Vite como su motor principal. Mejorando la experiencia de desarrollo y abriendo nuevas puertas a futuras innovaciones.

La comunidad ha hecho un gran esfuerzo para alinear Vue 2 DX a Vue 3 y hacer que el proceso de migración sea lo más sencillo posible. Ha sido un gran año para los desarrolladores de Vue aprovechando las enormes mejoras tanto de DX como rendimiento de sus aplicaciones. ¡Con muchas ganas de ver que llega en 2022!

Escritor invitado: Manuel Vila

Manuel es un ingeniero JS/TS independiente y colaborador open source. Creador de Layr y CodebaseShow.

React 18 será publicado dentro de poco, pero ya podemos jugar con la versión RC que se beneficia de algunas mejoras como Automatic batching for fewer renders o soporte SSR para Suspense.

React 18 incluye el tan esperado renderer concurrente y actualiza Suspense sin ningún "breaking change". Algunas de las funcionalidades concurrentes como startTransition estarán disponibles en la versión 18.0 inicial, aunque tendremos que esperar un poco más para tener Server Components, mencionados en nuestra edición anterior of JavaScript Rising Stars.

React continúa progresando tanto en el lado del navegador como en el del servidor, y junto a la visión many-platform de React Native, está llegando a ser cada vez más omnipresente.