I framework Node.js più popolari nel 2022

Express.js è vecchio quanto Node.js e, sebbene Express sia ancora un framework back-end fenomenale, una nuova generazione di strumenti e kit sta lasciando il segno.

In particolare, la tendenza si è spostata verso i meta framework, dove un framework popolare come React viene riproposto per supportare lo sviluppo full-stack. Il vantaggio di questo approccio è che puoi mantenere la tua esperienza in un framework specifico e lavorare contemporaneamente su cose di back-end. In altre parole, esegui lo sviluppo full-stack.

Come sono stati ottenuti questi dati?

Tutti i dati provengono da sondaggi come lo stato di JavaScript, Stack Overflow Developer Survey e l'esperienza personale di lavoro con vari progetti. Questa non è una recensione basata su quale framework Node.js ha il maggior numero di stelle GitHub.

Invece, ho confrontato il numero di stelle guadagnate nell'ultimo anno. Questo è un solido indicatore di quanto sia attivo un determinato progetto e di come gli sviluppatori rispondono ad esso.

 Se vuoi provare uno di questi framework in un ambiente in tempo reale, dai un'occhiata al mio articolo sulle piattaforme di hosting per sviluppatori. Ogni piattaforma ha un piano gratuito e quasi tutte ti consentono di importare un repository GitHub e ospitarlo direttamente. 

Ad esempio, puoi prendere qualsiasi repo e averlo attivo in pochi minuti.

Le tendenze attuali di Node.js

Noterai in tutto questo post che molti dei framework menzionati in questo articolo si basano su un framework front-end. Questo è anche indicato come meta-framework . Allora, qual è il problema con questo, e perché questo approccio?

Se osserviamo qualcosa come React, il modo in cui esegue il rendering di una pagina viene eseguito tramite CSR - Client-Side Rendering. Una volta effettuata una richiesta, al browser viene fornito un file HTML barebone senza il contenuto effettivo della pagina. Quindi, il browser effettua un secondo viaggio di andata e ritorno per ottenere il documento JavaScript che contiene il contenuto della pagina, quindi lo distribuisce ed esegue il rendering della pagina effettiva.

E questo continuerà ad accadere ogni volta che l'utente interagisce con la pagina. Anche se l'HTML rimane così com'è, diverse richieste di instradamento significano che il browser deve continuare ad andare avanti e indietro per visualizzare il contenuto desiderato.

Questo è anche spesso indicato come SPA o un'applicazione a pagina singola.

Ed ecco gli aspetti negativi di questo approccio – CSR –:

• Memorizzazione nella cache : poiché tutto il contenuto della pagina viene visualizzato tramite JavaScript, non è presente alcun contenuto HTML effettivo nella pagina che può essere memorizzato nella cache.
• SEO - Mentre i crawler stanno diventando "più intelligenti", ci sono problemi definitivi con l'indicizzazione dei contenuti dei robot che dipende esclusivamente da JavaScript.
• Rendering : il rendering iniziale è spesso lento e non risponde fino al termine del caricamento di tutto il JavaScript.

Quindi, in questo contesto, l'idea alla base di framework come Next e Nuxt è quella di prendere il framework front-end, ma dargli SSR (Server-Side Rendering) tramite Node.js.

A proposito di SSR – Nick Johnstone ha pubblicato un'interessante sintesi dal titolo “L'assurda complessità del rendering lato server”. E c'è anche un corrispondente thread di Hacker News con molte discussioni sull'argomento. Anche se non cambierà molto nel prossimo futuro, credo che alcuni di questi concetti determineranno un cambiamento significativo nel modo in cui funzionano alcuni framework.

#1 – Next.js

Più che essere un React Framework, Next.js continua a crescere in popolarità grazie a un ritmo di sviluppo assurdamente alto. Next.js 10 a Next.js 12 ha richiesto solo un anno.

Il concetto fondamentale alla base di Next.js è che utilizza React come base, ma esegue tutta la struttura di rendering lato server attraverso le proprie specifiche. Poiché il rendering viene eseguito lato server, non è necessario eseguire il rendering delle pagine sul lato client, offrendo enormi vantaggi in termini di prestazioni e SEO per quanto riguarda.

Uno dei motivi per cui Next ha visto una tale adozione di massa è che elimina la necessità di creare il proprio back-end. Per tutto il tempo, fornendo modi significativi per ottimizzare le prestazioni delle tue app fuori dagli schemi. Vercel lo mantiene.

#2 – Nido

NestJS è riuscito tranquillamente ad ottenere una significativa approvazione dalla community di back-end. Una delle principali filosofie alla base di Nest è che mentre framework come React accelerano lo sviluppo front-end, molti di questi framework faticano a risolvere il problema dell'architettura dell'applicazione. Nest risolve questo problema attraverso un approccio incentrato sull'architettura.

Che è specifico per il back-end, ovviamente.

Nest si basa su tre componenti principali (ispirati ad Angular): controller , provider e moduli . L'uso dei moduli è il modo in cui Nest cerca di risolvere il problema della complessa gerarchia delle applicazioni. Ciascun componente può essere classificato in un modulo separato, all'interno del quale è possibile configurare i propri controller, dipendenze e provider specifici.

#3 – Strapi

Headless è di gran moda nell'attuale narrativa front-end. E Strapi ha fatto un ottimo lavoro nel posizionarsi come uno dei principali framework Headless CMS.

Allora, cos'è Strapi? In termini più pratici, Strapi è il back-end della tua applicazione front-end. In un certo senso, Strapi elimina la necessità di apprendere un framework come Express perché può fare la maggior parte del lavoro attraverso la sua API.

Ciò include la gestione dei tuoi contenuti tramite un'interfaccia utente personalizzata, endpoint in tempo reale per GraphQL e REST, gestione degli utenti (ruoli, ecc.) e un'interfaccia plug-in separata su cui puoi basarti. Strapi è completamente indipendente dal framework e si integra praticamente con qualsiasi linguaggio, framework o libreria front-end.

#4 – Remixa

Remix è un framework completo creato dalle persone che hanno creato React Router.

Credo che Remix sia anche uno dei framework full-stack in più rapida crescita che abbiamo visto negli ultimi anni. Allora, come mai? Per uno, Remix cerca di integrarsi il più possibile con gli standard Web fornendo API concise per codici di stato comuni e interazioni dell'utente.

A differenza di un framework tradizionale, Remix non crea strutture basate su cascate (componenti). Al contrario, i dati vengono caricati in parallelo sul lato server e quindi serviti come pagina HTML. Ciò significa anche che le funzionalità basate su JavaScript (come l'invio di moduli) non interromperanno il sito se l'utente ha JavaScript disabilitato.

#5 – Avanti

Nuxt 3 (per Vue 3) è in open-beta: tieni gli occhi aperti.

Nuxt si basa su Vue come framework full-stack per la creazione di applicazioni robuste. È anche un meta-framework, creato per migliorare drasticamente l'esperienza di sviluppo di Vue full-stack. Nuxt supporta SSR, SPA e pagine generate statiche.

Il vantaggio principale per gli sviluppatori Vue è che Nuxt può pre-renderizzare le viste e servirle come file statici. Ciò ha naturalmente ottimi risultati per l'ottimizzazione SEO e fornisce un notevole aumento dell'interattività. Ma ci sono anche alcuni aspetti negativi.

Mentre Vue ha un canale lato client persistente, Nuxt no. Quindi, interagire con il DOM dopo che Nuxt ha già eseguito il rendering della pagina potrebbe rivelarsi difficile.

#6 – SvelteKit

Svelte ha lo status di bravo ragazzo nell'attuale era del front-end e il team sta lavorando su SvelteKit, un framework full-stack che si basa su Sapper (lo sostituisce). SvelteKit si distingue per un intricato sistema di routing basato su file.

L'obiettivo principale di SvelteKit è accelerare lo sviluppo web rimuovendo alcuni dei colli di bottiglia più comuni. Implementando Snowpack, Vite e altri strumenti esterni, SvelteKit può fornire un'esperienza di sviluppo ricca di funzionalità.

Infine, SvelteKit implementa il processo di Idratazione. La capacità di mantenere lo stato attivo per gli elementi DOM di cui è stato eseguito il rendering lato server.

#7 – Fastify

Il framework Fastify è incentrato sulle prestazioni e i singoli benchmark hanno dimostrato che può gestire fino a 60.000 richieste al secondo. Puoi estendere Fastify (oltre a strumenti già eccezionali) tramite Hook e Plugin. E, nonostante non sia un framework TypeScript, Fastify supporta TypeScript.

Parlando di plug-in, gran parte dello sviluppo di Fastify avviene attraverso di essi. Tanto che Fastify ha un repository ufficiale sia per la community che per i plugin realizzati dal team di Fastify. L'idea alla base dei plugin è che fornisce un'architettura di sistema pulita ed elimina la necessità di passare a framework alternativi. Ciò rende Fastify particolarmente utile per la creazione di API a basso sovraccarico con ottime prestazioni in tempo reale.

#8 – Sequoia

Ami le API? Ti piace JAMStack? Se la risposta è sì, adorerai RedwoodJS. È un framework di app Web completo che utilizza molte tecnologie moderne. E queste tecnologie includono GraphQL, Prisma, Storybook e Jest. Il front-end in Redwood è costruito su React e ottieni anche il supporto completo di TypeScript.

#9 – Espresso

Express è caduto in disgrazia? Non esattamente. Il framework è ancora estremamente popolare e amato, ma non tanto quanto gli altri grandi giocatori. Per un team che lavora con Express da anni, non ha senso passare a qualcos'altro poiché non ci sono problemi fondamentali. Molti framework si basano ancora su Express.

#10 – Adone

Adonis è un framework MVC back-end TypeScript creato per Node.js. Tieni presente che, nonostante Adonis si descriva come un framework di back-end, va bene anche fare uno sviluppo full-stack con esso.

Uno dei motivi principali per cui gli sviluppatori amano Adonis è il suo supporto nativo per TypeScript.

Ma anche supporto per ORM (Object Relational-Mapping), solide pratiche di sicurezza e documentazione facile da seguire.

Ultimo ma non meno importante, Adonis si integra con l'ecosistema Node.js a livello fondamentale, quindi avere una precedente esperienza nello sviluppo di Node è praticamente un must.

#11 – Chiave di volta

L'ultimo framework Node.js in questo elenco è Keystone. E proprio come Express, è in circolazione quasi dal primo giorno. Ciò rende Keystone un framework maturo, che fornisce strumenti e integrazioni concreti per creare un'esperienza a misura di sviluppatore.

Alcune caratteristiche degne di nota (molte delle quali sono state perfezionate nel corso degli anni) in Keystone includono CRUD automatizzato tramite l'API GraphQL, che puoi estendere ulteriormente. Inoltre, puoi creare e implementare i tuoi componenti React.js.

Keystone viene utilizzato in vari campi di sviluppo e funziona perfettamente con app mobili, siti Web pratici, vetrine di eCommerce e molto altro.

Meta, nativo e un pizzico di Headless

È passato un bel po' di tempo dall'ultima volta che ho fatto una panoramica come questa. Le cose erano molto più semplici all'epoca, e mentre Compound e Locomotive non si trovano da nessuna parte, è bello vedere Keystone ed Express farsi strada attraverso la prova del tempo.

Posso anche dire che c'è un bel po' di fermento intorno a Node.js. Credo che alcune persone siano infelici e si sentano bloccate . E anche l'idea dei gestori di pacchetti (npm) sta iniziando a invecchiare poiché i pacchetti continuano ad aggiungere pile su pile di dimensioni di pacchetti non necessarie a un progetto altrimenti su piccola scala.

Ma, qualunque sia il caso, la popolarità di ogni framework parla da sé. Nel complesso, gli sviluppatori sono felici di lavorare con meta framework e potrebbe avere a che fare con il fatto che semplifica anche lo sviluppo full-stack. Questo elimina per lo più la necessità di riapprendere da zero un nuovo framework preferito .