Los mejores proyectos JavaScript del 2020

2020 ha sido un año muy especial por muchas razones. La más importante: por primera vez en 5 años, el ganador de esta categoría en Rising Stars no se llama Vue.js sino Deno...¡menuda sorpresa!

Deno es un runtime de JavaScript gestado por el mismo creador de Node.js, Ryan Dahl.

Frecuentemente es considerado como la secuela de Node.js, ya que arregla o mejora muchas de sus características, sacando provecho de sus 10 años de experiencia e iteraciones con Node.js.

Entre sus principales características, destacan:

• El compilador de TypeScript viene incluido por defecto (aunque puedas trabajar con vanilla JavaScript).
• No usa un package manager centralizado, las dependencias puede ser cargadas desde cualquier URL.
• La "standard library" trae incorporadas soluciones que normalmente requieren paquetes externos en Node.js.
• Deno usa siempre que puede los standards de la web, como por ejemplo Fetch API.
• Permite importar ficheros usando ECMAScript modules.
• Viene con sistema de tests y debugger incluidos.

El ecosistema entorno a Deno es todavía joven pero se espera que evolucione rápido debido a su gran hype y popularidad.

El éxito de Deno confirma dos fuertes tendencias:

• El crecimiento de TypeScript, en ambos, frontend y backend.
• El uso de ES6 modules al vuelo por soluciones como Snowpack, echa un vistazo a las nuevas caras aparecidas este año en la sección "Build".

Vue.js y React continúan luchando por la primera posición de la categoría Front-end Frameworks.

Detrás tenemos a Angular que vuelve al tercer lugar, intercambiando posiciones con Svelte respecto al año pasado.

La nueva cara de este año en el top 5 es Alpine.js, un framework reactivo minimalista, del creador de Laravel LiveWire.

Este toma prestadas ideas de Vue.js y Angular como: directivas HTML personalizables, two-way binding...

Es muy sencillo usarlo en un clásico tag <script> añadido a una página HTML, sin necesidad de proceso de build, puedes hacer cualquier cosa desde la sintaxis HTML, siendo una perfecta solución para mejorar rápidamente una página existente sin necesidad de incorporar todo un pesado framework.

Siendo una solución muy ligera para añadir interactividad a la web, combina bien con frameworks modernos como Elixir Phoenix. Incluso se ha creado un nuevo set the herramientas llamado PETAL que incluye ambos Alpine.js y Tailwind CSS, hablaremos de ello más adelante...

Este año tenemos dos tipos proyectos que destacan en la categoría Node.js Frameworks.

Por un lado, frameworks full-stack como Next.js y Nuxt, ambos posicionados en la forma de crear tu aplicación, ya que traen React y Vue.js en el lado servidor.

Por otro lado tenemos opciones más clásicas que solo se ejecutan en el servidor como Nest (el número uno del año pasado) o Fastify.

Al igual que en 2018, la categoría es liderada por Next.js. En sus comienzos se hizo famoso como solución para renderizar aplicaciones React en el servidor. Ahora destaca por ser una solución más completa permitiendo construir aplicaciones web full-stack web con React.

Las últimas versiones traen funcionalidades como Incremental Static Regeneration que compone lo mejor de los mundos: dinámico y estático, teniendo gran flexibilidad para muchos casos de uso.

Los dos nuevos participantes como frameworks full-stack, Blitz y Redwood intentan proporcionar la mejor experiencia de desarrollo para crear aplicaciones web completas.

Cabe destacar que Express, nacido ya hace 11 años, continúa siendo relevante en el panorama JavaScript.

Escritor invitado: Lee Robinson

Lee Robinson es un desarrollador, escritor y creador que trabaja en Vercel como Solutions Architect.

La línea general que ha seguido el mundo React en 2020 ha sido estabilidad. Mientras que React 17 no introdujo ningún breaking change, allanó el camino para el futuro: React Server Components.

Los React Server Components cambiarán la forma en que construimos aplicaciones React, reduciendo los bundles en el lado cliente y mejorando el tiempo de carga. Además, esto simplificará el data fetching y el acceso a recursos como bases de datos o sistemas de ficheros.

Next.js ha evolucionado siendo una de las soluciones más populares para crear aplicaciones React. Su enfoque híbrido será su primera aplicación en los React Server Components.

Librerías como React Query, Recoil y React Hook Form han madurado y evolucionado alrededor de hooks. Cada uno de ellos simplifica una pieza del desarrollo con React. Combinados junto a librerías de componentes, los desarrolladores React tienen más herramientas que nunca.

La mayor novedad de la comunidad Vue.js este año ha sido el lanzamiento de la version 3.

Viene con el nuevo Composition API que soluciona algunas limitaciones que tenía la versión 2 de Vue.js:

• Era difícil organizar el código por logical concerns dentro de los componentes.
• Hace más fácil reutilizar código en diferentes components (con Vue 2, mixins, mixing factory y scoped slots no eran óptimos).
• Tiene mejor soporte para TypeScript.

Echa un vistazo a la guía de migración para más detalles sobre que cambios ha introducido la versión 3.

También mencionar que Vite ha sido creada en 2020, una nueva herramienta para el build. Potenciada por ES modules, es el método más rapido para empezar con Vue.js desde la línea de comandos.

El top 5 de proyectos en la categoría de Angular se mantiene casi idéntico al año pasado, menos por un nuevo candidato en el número 3.

Scully es un generador de web estáticas que lleva a Angular al Jamstack. El proyecto fue lanzado en diciembre del 2019 y proveé una buena documentación para ayudarte a arrancar con ello.

Angular ha tenido tres major releases en 2020.

La versión 9 fue lanzada en febrero. El mayor cambio fue el uso del Ivy compiler, que ayudó a generar bundles más pequeños y muchas otras mejoras en el build. Las versiones 10 y 11 salieron a mediados y finales de año respectivamente.

En la segunda mitad del año, el equipo de Angular hizo especial hincapié en escuchar a la comunidad. El equipo hizo un gran esfuerzo en resolver issues y PRs para comprender e implementar las necesidades de la comunidad. Incluso anunciando un roadmap para compartir en que están trabajando y que planean para el futuro.

Escritor invitado: Sébastien Lorber

Sébastien lleva usando React desde su aparición, trabaja con Facebook Open-Source en Docusaurus.

2020 ha sido un gran año para las herramientas de build y nos hemos encontrado con nuevas tendencias.

Snowpack y Vite apuestan por un enfoque priorizando ES modules. Estas herramientas no hacen bundle de tu código en dev, se centran en conseguir un extremadamente rápido feedback y solo hacen bundle para producción (hasta que el soporte en navegadores mejore).

swc y esbuild aprovechan Rust y Go para ofrecer un gran rendimiento, ambos usando TypeScript.

Muchas veces se describe a Webpack como demasiado complejo y alternativas como Parcel y Rollup han madurado. Aún así Webpack continúa siendo la herramienta de build por defecto para muchos y su nueva caching layer puede mejorar significativamente tu rendimiento a la hora de crear el build.

La popularidad de Monorepos está creciendo: Yarn y Lerna son ampliamente utilizados, npm 7 también se unió a la fiesta de los Monorepos este año.

Selección personal para no perder de vista en 2021: Rome, Toast, Turborepo

Este año hemos añadido esta sección para enfatizar el éxito de Tailwind CSS y su enfoque "utility first".

Comparado con frameworks CSS más tradicionales como Bootstrap o Bulma, este proveé convenciones de nombres para permitir a los desarrolladores dar estilo a sus páginas y componentes a través de la composición de nombres de clases.

Según el estupendo informe State of CSS, Tailwind es el framework CSS con mayor ratio de satisfacción.

Su versión 2 fue lanzada recientemente y trae gran variedad de nuevas funcionalidades, incluido soporte para el querido "dark mode".