Los Frameworks de Node.js más populares en 2022

Express.js es tan antiguo como Node.js, y si bien Express sigue siendo un marco de back-end fenomenal, una nueva generación de herramientas y kits está dejando su huella.

En particular, la tendencia se ha desplazado hacia los marcos meta , donde un marco popular como React se reutiliza para admitir el desarrollo completo. La ventaja de este enfoque es que puede mantener su experiencia en un marco específico y trabajar simultáneamente en cosas de back-end. En otras palabras, haz un desarrollo full-stack.

¿Cómo se obtuvieron estos datos?

Todos los datos provienen de encuestas como State of JavaScript, Stack Overflow Developer Survey y experiencia personal trabajando con varios proyectos. Esta no es una revisión basada en qué marco Node.js tiene la mayor cantidad de estrellas de GitHub.

En cambio, comparé la cantidad de estrellas ganadas el año pasado. Este es un indicador sólido de qué tan activo es un determinado proyecto y qué tan bien responden los desarrolladores.

 Si desea probar cualquiera de estos marcos en un entorno en tiempo real, consulte mi artículo sobre plataformas de alojamiento para desarrolladores. Cada plataforma tiene un plan gratuito y casi todas te permiten importar un repositorio de GitHub y alojarlo directamente. 

Por ejemplo, puede tomar cualquier repositorio y ponerlo en marcha en cuestión de minutos.

Las tendencias actuales de Node.js

Notará a lo largo de esta publicación que muchos de los marcos mencionados en este artículo se basan en la parte superior de un marco frontal. Esto también se conoce como meta-marco . Entonces, ¿cuál es el problema con esto y por qué este enfoque?

Si observamos algo como React, la forma en que representa una página se realiza a través de CSR: Representación del lado del cliente. Una vez que se realiza una solicitud, el navegador recibe un archivo HTML básico sin el contenido real de la página. Entonces, el navegador realiza un segundo viaje de ida y vuelta para obtener el documento JavaScript que contiene el contenido de la página, luego lo entrega y representa la página real.

Y esto seguirá ocurriendo cada vez que el usuario interactúe con la página. Aunque el HTML permanece como está, las diferentes solicitudes de ruta significan que el navegador debe seguir yendo y viniendo para mostrar el contenido que el usuario desea.

Esto también se conoce como SPA o una aplicación de una sola página.

Y aquí están las desventajas de este enfoque de RSE:

• Almacenamiento en caché : dado que todo el contenido de la página se procesa a través de JavaScript, no hay contenido HTML real en la página que se pueda almacenar en caché.
• SEO : si bien los rastreadores se están volviendo más "inteligentes", existen problemas definitivos con el hecho de que los robots indexen el contenido que depende únicamente de JavaScript.
• Representación : la representación inicial suele ser lenta y no responde hasta que todo el JavaScript ha terminado de cargarse.

Entonces, en este contexto, la idea detrás de marcos como Next y Nuxt es tomar el marco frontal, pero darle SSR (Server-Side Rendering) a través de Node.js.

Hablando de SSR, Nick Johnstone publicó una esencia interesante titulada "La absurda complejidad del renderizado del lado del servidor". Y también hay un hilo correspondiente de Hacker News con bastante discusión sobre el tema. Si bien no cambiará mucho en el futuro cercano, creo que algunos de estos conceptos impulsarán un cambio significativo en la forma en que operan algunos marcos.

#1 – Siguiente.js

Más que ser un React Framework, Next.js sigue creciendo en popularidad gracias a un ritmo de desarrollo absurdamente alto. Next.js 10 a Next.js 12 tomó solo un año.

El concepto central detrás de Next.js es que utiliza React como base, pero realiza toda la estructura de representación del lado del servidor a través de su propia especificación. Debido a que el renderizado se realiza en el lado del servidor, no es necesario que renderice las páginas en el lado del cliente, lo que brinda enormes beneficios de rendimiento y SEO en lo que respecta.

Una de las razones por las que Next ha visto una adopción tan masiva es que elimina la necesidad de construir su propio back-end. Al mismo tiempo, proporciona formas significativas de optimizar el rendimiento de sus aplicaciones desde el primer momento. Vercel lo mantiene.

#2 – Nido

NestJS ha logrado en silencio atraer una aprobación significativa de la comunidad de back-end. Una de las principales filosofías detrás de Nest es que, si bien los marcos como React aceleran el desarrollo front-end, muchos de estos marcos luchan por resolver el problema de la arquitectura de la aplicación. Nest resuelve esto a través de un enfoque de arquitectura primero.

Lo cual es específico del back-end, por supuesto.

Nest se basa en tres componentes principales (inspirados en Angular): controladores , proveedores y módulos . El uso de módulos es la forma en que Nest intenta resolver el problema de la jerarquía de aplicaciones complejas. Cada componente se puede categorizar en un módulo separado, dentro del cual configura sus propios controladores, dependencias y proveedores específicos.

#3 – Correa

Headless está de moda en la narrativa front-end actual. Y Strapi ha hecho un gran trabajo al posicionarse como uno de los principales marcos de CMS sin cabeza.

Entonces, ¿qué es Strapi? En términos más prácticos, Strapi es el back-end de su aplicación front-end. En cierto sentido, Strapi elimina la necesidad de aprender un marco como Express porque puede hacer la mayor parte del trabajo preliminar a través de su API.

Eso incluye administrar su contenido a través de una interfaz de usuario personalizada, puntos finales sobre la marcha para GraphQL y REST, administración de usuarios (roles, etc.) y una interfaz de complemento separada que puede aprovechar. Strapi es completamente independiente del marco y se integra con prácticamente cualquier lenguaje, marco o biblioteca frontal.

#4 – Remezcla

Remix es un marco de trabajo de pila completa creado por las personas que crearon React Router.

Creo que Remix es también uno de los frameworks full-stack de más rápido crecimiento que hemos visto en los últimos años. Entonces, ¿cómo es que? Por un lado, Remix intenta integrarse tanto como sea posible con los estándares web proporcionando API concisas para códigos de estado comunes e interacciones de usuarios.

A diferencia de un marco tradicional, Remix no crea estructuras basadas en cascada (componentes). En cambio, los datos se cargan en paralelo en el lado del servidor y luego se sirven como una página HTML. Esto también significa que las funciones basadas en JavaScript (como el envío de formularios) no dañarán el sitio si el usuario tiene JavaScript deshabilitado.

# 5 - Siguiente

Nuxt 3 (para Vue 3) está en beta abierta: esté atento.

Nuxt se basa en Vue como un marco completo para crear aplicaciones robustas. También es un meta-marco, creado para mejorar drásticamente la experiencia de desarrollo de Vue de pila completa. Nuxt admite SSR, SPA y páginas generadas estáticas.

La principal ventaja para los desarrolladores de Vue es que Nuxt puede renderizar previamente las vistas y servirlas como archivos estáticos. Naturalmente, esto tiene excelentes resultados para la optimización SEO y proporciona un impulso significativo en la interactividad. Pero también hay algunas desventajas.

Mientras que Vue tiene un canal del lado del cliente persistente, Nuxt no lo tiene. Por lo tanto, interactuar con el DOM después de que Nuxt ya haya renderizado la página puede resultar difícil.

#6 – Kit esbelto

Svelte tiene el estatus de niño genial en la era actual del front-end, y el equipo está trabajando en SvelteKit, un marco completo que se basa en la parte superior (lo reemplaza) de Sapper. SvelteKit se destaca con un intrincado sistema de enrutamiento basado en archivos.

El objetivo principal de SvelteKit es acelerar el desarrollo web eliminando algunos de los cuellos de botella más comunes. Al implementar Snowpack, Vite y otras herramientas externas, SvelteKit puede proporcionar una experiencia de desarrollo rica en funciones.

Por último, SvelteKit implementa el proceso de Hidratación. La capacidad de conservar el estado activo de los elementos DOM que se han renderizado en el lado del servidor.

#7 – Ayunar

El marco Fastify tiene que ver con el rendimiento, y los puntos de referencia individuales han demostrado que puede manejar hasta 60,000 solicitudes por segundo. Puede ampliar Fastify (además de las ya excelentes herramientas) a través de Hooks y Plugins. Y, a pesar de no ser un primer marco de TypeScript, Fastify admite TypeScript.

Hablando de complementos, gran parte del desarrollo de Fastify ocurre a través de ellos. Tanto es así que Fastify tiene un repositorio oficial tanto para los complementos creados por la comunidad como para los creados por el equipo de Fastify. La idea detrás de los complementos es que proporciona una arquitectura de sistema limpia y elimina la necesidad de saltar a marcos alternativos. Esto hace que Fastify sea particularmente útil para crear API de bajo costo con un sólido rendimiento en tiempo real.

#8 – Secoya

¿Te encantan las API? ¿Te gusta JAMStack? Si la respuesta es sí, te encantará RedwoodJS. Es un marco de aplicación web de pila completa que utiliza muchas tecnologías modernas. Y esas tecnologías incluyen GraphQL, Prisma, Storybook y Jest. El front-end en Redwood está construido sobre React, y también obtiene soporte completo de TypeScript.

#9 – Expreso

¿Express ha caído en desgracia? No exactamente. El marco sigue siendo extremadamente popular y amado, solo que no tanto como los otros grandes jugadores. Para un equipo que ha estado trabajando con Express durante años, no tiene sentido cambiar a otra cosa ya que no hay problemas fundamentales. Muchos marcos todavía se basan en Express.

#10 - Adonis

Adonis es un framework MVC back-end de TypeScript creado para Node.js. Tenga en cuenta que, a pesar de que Adonis se describe a sí mismo como un marco de back-end, es igual de bueno hacer un desarrollo de pila completa con él.

Una de las principales razones por las que a los desarrolladores les encanta Adonis es su soporte nativo para TypeScript.

Pero también, soporte para ORM (Mapeo relacional de objetos), sólidas prácticas de seguridad y documentación fácil de seguir.

Por último, pero no menos importante, Adonis se integra con el ecosistema Node.js en un nivel fundamental, por lo que es imprescindible tener experiencia previa en el desarrollo de Node.

#11 – Piedra angular

El último marco Node.js en esta lista es Keystone. Y al igual que Express, ha existido casi desde el primer día. Esto convierte a Keystone en un marco maduro que proporciona herramientas e integraciones concretas para crear una experiencia amigable para los desarrolladores.

Algunas características notables (muchas de las cuales se han refinado a lo largo de los años) en Keystone incluyen CRUD automatizado a través de la API de GraphQL, que puede ampliar aún más. Además, puede crear e implementar sus propios componentes React.js.

Keystone se utiliza en varios campos de desarrollo y funciona bien con aplicaciones móviles, sitios web prácticos, tiendas de comercio electrónico y mucho más.

Meta, nativo y una pizca de Headless

Ha pasado bastante tiempo desde la última vez que hice una descripción general como esta. Las cosas eran mucho más simples en ese entonces, y aunque Compound y Locomotive no se encuentran por ninguna parte, es bueno ver a Keystone y Express abrirse camino a través de la prueba del tiempo.

También puedo decir que hay bastante revuelo en torno a Node.js. Creo que algunas personas son infelices y se sienten atascadas con eso. Y la idea de los administradores de paquetes (npm) también está comenzando a envejecer a medida que los paquetes siguen agregando montones y montones de tamaños de paquetes innecesarios a un proyecto de pequeña escala.

Pero, sea cual sea el caso, la popularidad de cada marco habla por sí sola. En general, los desarrolladores están contentos de trabajar con meta frameworks, y podría tener que ver con el hecho de que también agiliza el desarrollo completo. Esto elimina en su mayoría la necesidad de volver a aprender un nuevo marco favorito desde cero.