Os frameworks Node.js mais populares em 2022

O Express.js é tão antigo quanto o Node.js e, embora o Express ainda seja uma estrutura de back-end fenomenal, uma nova geração de ferramentas e kits está deixando sua marca.

Mais notavelmente, a tendência mudou para meta frameworks, onde um framework popular como o React é reaproveitado para dar suporte ao desenvolvimento full-stack. A vantagem dessa abordagem é que você pode manter sua experiência em uma estrutura específica e trabalhar simultaneamente em coisas de back-end. Em outras palavras, faça o desenvolvimento full-stack.

Como esses dados foram obtidos?

Todos os dados foram obtidos de pesquisas como State of JavaScript, Stack Overflow Developer Survey e experiência pessoal de trabalho com vários projetos. Esta não é uma revisão baseada em qual framework Node.js tem mais estrelas no GitHub.

Em vez disso, comparei o número de estrelas conquistadas no ano passado. Este é um indicador sólido de quão ativo é um determinado projeto e quão bem os desenvolvedores respondem a ele.

 Se você quiser experimentar qualquer um desses frameworks em um ambiente de tempo real, confira meu artigo sobre plataformas de hospedagem para desenvolvedores. Cada plataforma tem um plano gratuito e quase todas permitem importar um repositório do GitHub e hospedá-lo diretamente. 

Por exemplo, você pode pegar qualquer repo e colocá-lo no ar em questão de minutos.

As tendências atuais do Node.js

Você notará ao longo deste post que muitos dos frameworks mencionados neste artigo são baseados em um framework front-end. Isso também é chamado de meta-framework . Então, qual é o problema com isso e por que essa abordagem?

Se olharmos para algo como o React, a forma como ele renderiza uma página é feita através do CSR – Client-Side Rendering. Depois que uma solicitação é feita, o navegador recebe um arquivo HTML básico sem o conteúdo real da página. Assim, o navegador faz uma segunda viagem para obter o documento JavaScript que contém o conteúdo da página, depois o entrega e renderiza a página real.

E isso continuará acontecendo toda vez que o usuário interagir com a página. Mesmo que o HTML permaneça como está, diferentes solicitações de rota significam que o navegador deve continuar indo e voltando para renderizar o conteúdo que o usuário deseja.

Isso também é frequentemente chamado de SPA ou Aplicativo de página única.

E aqui estão as desvantagens dessa abordagem – CSR –:

• Cache – Como todo o conteúdo da página é renderizado por meio de JavaScript, não há conteúdo HTML real na página que possa ser armazenado em cache.
• SEO – Enquanto os rastreadores estão ficando “mais inteligentes”, há problemas definitivos em ter conteúdo de índice de robôs dependente apenas de JavaScript.
• Renderização – A renderização inicial geralmente é lenta e não responde até que todo o JavaScript termine de carregar.

Então, nesse contexto, a ideia por trás de frameworks como Next e Nuxt é pegar o framework front-end, mas dar a ele SSR (Server-Side Rendering) por meio do Node.js.

Falando em SSR – Nick Johnstone publicou um resumo interessante intitulado “A complexidade absurda da renderização do lado do servidor“. E há também um tópico correspondente do Hacker News com bastante discussão sobre o assunto. Embora não mude muito no futuro próximo, acredito que alguns desses conceitos irão conduzir uma mudança significativa na forma como alguns frameworks operam.

#1 – Próximo.js

Mais do que ser um React Framework – Next.js continua crescendo em popularidade graças a um ritmo de desenvolvimento absurdamente alto. Next.js 10 para Next.js 12 levou apenas um ano.

O conceito central por trás do Next.js é que ele usa React como base, mas executa toda a estrutura de renderização do lado do servidor por meio de sua própria especificação. Como a renderização é feita no lado do servidor, você não precisa renderizar as páginas no lado do cliente, oferecendo enormes benefícios de desempenho e SEO no que diz respeito.

Uma das razões pelas quais o Next viu essa adoção em massa é que ele elimina a necessidade de criar seu próprio back-end. O tempo todo, fornecendo maneiras significativas de otimizar o desempenho de seus aplicativos imediatamente. Vercel mantém.

#2 – Ninho

O NestJS conseguiu discretamente atrair uma aprovação significativa da comunidade de back-end. Uma das principais filosofias por trás do Nest é que, embora frameworks como o React acelerem o desenvolvimento de front-end, muitos desses frameworks lutam para resolver o problema da arquitetura do aplicativo. O Nest resolve isso por meio de uma abordagem que prioriza a arquitetura.

O que é específico para o back-end, é claro.

O Nest é baseado em três componentes principais (inspirados no Angular) – Controladores , Provedores e Módulos . O uso de Módulos é como o Nest tenta resolver o problema da hierarquia complexa de aplicativos. Cada componente pode ser categorizado em um módulo separado, no qual você configura seus próprios controladores, dependências e provedores específicos.

#3 – Cinta

Headless é toda a raiva na narrativa atual de front-end. E o Strapi fez um ótimo trabalho ao se posicionar como uma das principais estruturas de CMS sem cabeça.

Então, o que é Strapi? Em termos mais práticos, o Strapi é o back-end do seu aplicativo de front-end. De certa forma, o Strapi elimina a necessidade de você aprender um framework como o Express porque ele pode fazer a maior parte do trabalho braçal por meio de sua API.

Isso inclui o gerenciamento de seu conteúdo por meio de uma interface do usuário personalizada, endpoints dinâmicos para GraphQL e REST, gerenciamento de usuários (funções, etc.) e uma interface de plug-in separada na qual você pode criar. O Strapi é completamente independente de framework e se integra a praticamente qualquer linguagem, framework ou biblioteca de front-end.

#4 – Remixar

O Remix é um framework full-stack construído pelas pessoas que criaram o React Router.

Acredito que o Remix também é um dos frameworks full-stack de mais rápido crescimento que vimos nos últimos anos. Então, como assim? Por um lado, o Remix tenta integrar o máximo possível com Web Standards, fornecendo APIs concisas para códigos de status comuns e interações do usuário.

Ao contrário de uma estrutura tradicional, o Remix não cria estruturas baseadas em cascata (componentes). Em vez disso, os dados são carregados em paralelo no lado do servidor e servidos como uma página HTML. Isso também significa que os recursos baseados em JavaScript (como envios de formulários) não interromperão o site se o usuário tiver o JavaScript desabilitado.

#5 – Nuxt

Nuxt 3 (para Vue 3) está em beta aberto: fique de olho.

O Nuxt se baseia no Vue como uma estrutura de pilha completa para criar aplicativos robustos. É também um meta-framework, criado para melhorar drasticamente a experiência de desenvolvimento full-stack em Vue. O Nuxt oferece suporte a SSR, SPA e páginas geradas estáticas.

A principal vantagem para os desenvolvedores Vue é que o Nuxt pode pré-renderizar as visualizações e servi-las como arquivos estáticos. Isso naturalmente traz ótimos resultados para otimização de SEO e proporciona um aumento significativo na interatividade. Mas há algumas desvantagens também.

Enquanto o Vue tem um canal persistente do lado do cliente, o Nuxt não. Portanto, interagir com o DOM depois que o Nuxt já renderizou a página pode ser difícil.

#6 – SvelteKit

Svelte tem o status de garoto legal na era atual do front-end, e a equipe está trabalhando no SvelteKit – uma estrutura de pilha completa que se baseia (substitui) no Sapper. O SvelteKit se destaca com um intrincado sistema de roteamento baseado em arquivos.

O objetivo principal do SvelteKit é acelerar o desenvolvimento web removendo alguns dos gargalos mais comuns. Ao implementar Snowpack, Vite e outras ferramentas externas – o SvelteKit pode fornecer uma experiência de desenvolvimento rica em recursos.

Por fim, SvelteKit implementa o processo de Hidratação. A capacidade de reter o estado ativo para elementos DOM que foram renderizados no lado do servidor.

#7 – Fixar

A estrutura Fastify tem tudo a ver com desempenho, e benchmarks individuais mostraram que ela pode lidar com até 60.000 solicitações por segundo. Você pode estender o Fastify (além de ferramentas já excelentes) por meio de Hooks e Plugins. E, apesar de não ser um framework para TypeScript, Fastify suporta TypeScript.

Falando em Plugins, muito do desenvolvimento do Fastify acontece através deles. Tanto que o Fastify possui um repositório oficial tanto para plugins feitos pela comunidade quanto para plugins feitos pela equipe do Fastify. A ideia por trás dos plugins é que ele fornece uma arquitetura de sistema limpa e elimina a necessidade de saltar para estruturas alternativas. Isso torna o Fastify particularmente útil para criar APIs de baixa sobrecarga com forte desempenho em tempo real.

#8 – Sequoia

Você ama APIs? Gostou do JAMstack? Se a resposta for sim, você vai adorar o RedwoodJS. É uma estrutura de aplicativo da Web de pilha completa que utiliza muitas tecnologias modernas. E essas tecnologias incluem GraphQL, Prisma, Storybook e Jest. O front-end no Redwood é construído em cima do React, e você também obtém suporte completo ao TypeScript.

#9 – Expresso

O Express caiu em desgraça? Não exatamente. O framework ainda é extremamente popular e amado, mas não tanto quanto os outros grandes players. Para uma equipe que trabalha com o Express há anos, não faz sentido mudar para outra coisa, pois não há problemas fundamentais. Muitos frameworks ainda se baseiam no Express.

#10 – Adônis

Adonis é uma estrutura MVC de back-end pioneira em TypeScript criada para Node.js. Lembre-se de que, apesar do Adonis se descrever como uma estrutura de back-end, é bom fazer desenvolvimento full-stack com ele.

Uma das principais razões pelas quais os desenvolvedores amam o Adonis é seu suporte nativo ao TypeScript.

Mas também suporte para ORM (Object Relational-Mapping), práticas de segurança robustas e documentação fácil de seguir.

Por último, mas não menos importante, o Adonis se integra ao ecossistema Node.js em um nível fundamental, portanto, ter experiência prévia no desenvolvimento do Node é praticamente obrigatório.

#11 - Pedra angular

O último framework Node.js nesta lista é o Keystone. E muito parecido com o Express, existe quase desde o primeiro dia. Isso torna o Keystone uma estrutura madura, fornecendo ferramentas e integrações concretas para criar uma experiência amigável ao desenvolvedor.

Alguns recursos notáveis ​​(muitos dos quais foram refinados ao longo dos anos) no Keystone incluem CRUD automatizado por meio da API GraphQL, que você pode estender ainda mais. Além disso, você pode criar e implementar seus próprios componentes React.js.

O Keystone é usado em vários campos de desenvolvimento e funciona bem com aplicativos móveis, sites práticos, vitrines de comércio eletrônico e muito mais.

Meta, nativo e uma pitada de Headless

Já faz um bom tempo desde a última vez que fiz uma visão geral como esta. As coisas eram muito mais simples naquela época e, embora o Composto e a Locomotiva não estejam em lugar algum, é bom ver a Keystone e a Express passarem pelo teste do tempo.

Também posso dizer que há um pouco de burburinho em torno do Node.js. Eu acredito que algumas pessoas são infelizes e se sentem presas a isso. E a ideia de gerenciadores de pacotes (npm) também está começando a envelhecer à medida que os pacotes continuam adicionando pilhas e pilhas de tamanhos de pacotes desnecessários a um projeto de pequena escala.

Mas, seja qual for o caso, a popularidade de cada framework fala por si. No geral, os desenvolvedores ficam felizes em trabalhar com meta frameworks, e isso pode ter a ver com o fato de que também simplifica o desenvolvimento full-stack. Isso elimina principalmente a necessidade de reaprender uma nova estrutura favorita do zero.