“The Sound of Music” potrebbe predicare: “Cominciamo dall’inizio, un ottimo posto per iniziare”. Ma quasi ogni sviluppatore sa che è un piano sciocco. Il posto giusto per iniziare è con una solida base costruita da un grande team di sviluppatori open source. Clonate il loro duro lavoro e poi aggiungete solo abbastanza codice per renderlo vostro. Non c’è bisogno di ripetere ciò che tutti hanno fatto prima.
È un piano facile – una volta che si sceglie. Sfortunatamente, scegliere quella base può essere difficile quasi quanto iniziare dall’inizio. Il mondo dei framework web è un’area di sviluppo molto attiva e ci possono essere dozzine di buoni progetti open source che sarebbero ottimi inizi per il tuo progetto.
Per peggiorare le cose, i diversi team che hanno creato questi diversi progetti sono partiti su una strada diversa perché avevano serie differenze filosofiche con le altre opzioni. Hanno guardato gli altri framework e hanno deciso che potevano fare meglio. In altre parole, l’hanno fatto per un motivo e si può essere d’accordo o meno con la loro decisione.
La lista dei buoni posti per iniziare qui sotto lascia intenzionalmente fuori i leader del mercato React, Angular e Vue solo per rendere le cose un po’ più semplici. Questo non significa che i tre grandi siano cattivi. Potrebbero ancora essere la cosa giusta per voi. È solo che se ne parla costantemente e queste discussioni lasciano fuori alcune altre opzioni piuttosto buone.
Ci sono un sacco di buone ragioni per scegliere le più popolari. Molte persone nei tuoi panni si sono guardate intorno e molte di loro hanno scelto React, Angular o Vue per una buona ragione. Ma questo era allora. Nel frattempo alcune persone intelligenti hanno creato nuovi framework che sono più veloci, più semplici, più forti, o uno qualsiasi di una grande serie di superlativi.
Nella maggior parte dei casi qui sotto, i team hanno creato qualcosa di intrigante e potente ripensando la natura del framework. Questo è un modo elegante per dire che hanno finito per eliminare una caratteristica rendendo il framework più efficiente e quindi riducendo la quantità di memoria di cui ha bisogno, velocizzando il tempo di avvio, o in generale rendendolo più agile. O in alcuni casi, hanno aggiunto nuove idee che potrebbero diventare standard in futuro.
Se avete il tempo di investire, ecco una lista di alcune delle altre scelte interessanti. Non sono necessariamente giuste per alcune persone e certamente non sono la scelta migliore per tutti, ma potrebbero essere una scelta migliore per voi. Il vostro compito, se scegliete di accettarlo, è quello di creare una solida descrizione della vostra applicazione web, scrivere una descrizione relativamente ferma dei diversi casi d’uso, e poi valutare questi strumenti con questo in mente.
Forse vi piace un particolare approccio alla progettazione del codice. Forse la vostra applicazione non ha bisogno di alcune delle caratteristiche dei framework più grassi e popolari. Ci sono dozzine di ragioni per investire in uno di questi altri percorsi. Potresti scoprire che uno di essi funziona a meraviglia per la tua applicazione.
Petit DOM
Se ami l’idea di un DOM virtuale, ma non vuoi tutti i vincoli che vengono dall’adottare la mentalità dei ragazzi di React, Vue, o di un altro framework di grande nome, allora il Petit DOM è la strada da seguire. Si ottiene una piccola quantità di codice che vi permetterà di manipolare una collezione virtuale di tag e poi di migrare verso il vero DOM. Tutto il resto della struttura dei componenti e del rendering dipende da voi. Se i tuoi componenti sono semplici, o se hai intenzione di creare una gerarchia di rendering super complessa che sarà solo tua, questa potrebbe essere la tua base perché tutto ciò che fornisce è uno strumento per virtualizzare il DOM.
Surplus
Il DOM virtuale potrebbe non essere per tutti. Occupa spazio, quindi se le vostre manipolazioni non sono troppo complesse, potreste anche mandare le vostre istruzioni direttamente al DOM ufficiale. La libreria Surplus fa proprio questo. Prende il markup JSX preferito da tutti e lo compila in un codice che manipolerà il vero DOM. Come si dice nel business della pubblicità, taglia fuori l’intermediario. Nessuna differenziazione. Nessun livello extra segreto. Solo pura manipolazione del DOM reale. Se il tuo codice è abbastanza semplice e diretto da fare solo poche cose al DOM, perché preoccuparsi della distrazione virtuale?
RE:DOM
Un’altra opzione per coloro che non vogliono investire alcuna memoria in un DOM virtuale è una piccola libreria (2KB) chiamata RE:DOM. RE:DOM contiene alcune routine di base che ti permettono di creare tutti i tuoi tag e componenti con poche semplici chiamate JavaScript. La sintassi è molto più vicina ai CSS, quindi puoi specificare tag abbastanza elaborati con ID e classi con poche battute di tasti. I vostri tasti “meno di” (<) e “maggiore di” (>) vi ringrazieranno.
Mithril
Non tutte le alternative sono piccole e minimaliste. Mithril potrebbe essere chiamato un framework “di medie dimensioni” in questo contesto, anche se pesa solo 8KB. Tutto questo codice costruisce un DOM virtuale con un efficiente meccanismo di aggiornamento come gli altri, ma viene anche fornito con un set standardizzato di strumenti per affrontare molte delle sfide standard come il routing e le chiamate XMLHttpRequest. I progettisti vogliono che i progetti Mithril siano relativamente standardizzati, e sentono che aggiungere questo codice alla libreria principale aumenta la standardizzazione. Se questo non è abbastanza, spingono anche alcune formattazioni standard e strutture idiomatiche.
Bobril
Se vi piace il DOM virtuale e i componenti statici di React e vi piace programmare in TypeScript, allora Bobril o il suo cugino Angular-friendly ngBobril potrebbero essere proprio il biglietto. Il framework è costantemente molto più veloce di React o Angular in alcuni dei benchmark, forse a causa degli algoritmi diff più veloci e la mancanza di supporto per il JavaScript isomorfo. Ci sono anche funzioni stenografiche per la manipolazione dei CSS e un completo strato di gestione dello stato, BobX, se ne avete bisogno.
Marko
Se avete passato del tempo a fare offerte su dispenser Pez o altri oggetti da collezione, avete sperimentato la potenza di Marko, un framework sottile e veloce che eBay sta condividendo attraverso una licenza open source. La parte più bella potrebbe essere una sintassi di template molto leggera che rimuove abilmente la maggior parte del grasso in eccesso dall’HTML in modo che la struttura sia definita dall’indentazione e non molto altro. E il motore di rendering è molto veloce, capace di guidare elaborate costellazioni di DIV danzanti che si aggiornano più velocemente di 60fps.
Svelte
Il tuo framework web standard viene fornito con un compilatore e una libreria scaricata che gestisce a runtime ciò che il compilatore produce. Il processo in due fasi permette un codice molto elaborato al prezzo di aspettare che la libreria runtime venga scaricata e analizzata ogni volta che la pagina viene aperta. Il compilatore Svelte si libera di questa complessità sputando fuori quasi puro JavaScript che è quasi pronto a funzionare da solo, anche se solo in alcuni dei browser più recenti (ad esempio Chrome, Firefox, Opera e IE10). È un gioco di architettura intelligente che produce siti web molto leggeri che occupano poca memoria.
Inferno
Inferno è un altro framework creato per fare molto di quello che fa React, ma con un download minore e un tempo di esecuzione più veloce. Raggiunge molto di questo gettando via l’elaborato meccanismo di eventi sintetici e concentrandosi solo su quelli più essenziali come onClick. Molte altre parti dell’API sono simili se non uguali, rendendo relativamente semplice spostare il vostro codice se non ha bisogno dello strato di ottimizzazione degli eventi.
Preact
Uno dei più piccoli discendenti di React è Preact, un omaggio che offre la maggior parte delle caratteristiche più importanti come un DOM virtuale e componenti sofisticati, ma elimina i gestori di eventi sintetici e alcune delle eredità degli oggetti di scena. Mentre Inferno cerca di implementare solo gli eventi più importanti come onClick, Preact non si preoccupa di provare a fare qualcosa con gli eventi, lasciandoti fare affidamento sul nativo addEventListener del browser. Tralasciando le caratteristiche che non aggiungono molto (secondo loro) è così che rendono il loro download ancora più piccolo. Questo è un po’ un compromesso perché i benchmark mostrano che Preact è un po’ più lento di Inferno. Naturalmente, la vostra applicazione può essere diversa e il vostro chilometraggio può variare. Se hai davvero bisogno di compatibilità pura con React, c’è anche una libreria (preact-compat) che risolve la maggior parte dei problemi durante la compilazione.
Hapi
Molti framework arrivano in un unico pezzo. Hapi è più una collezione di plug-in, una costellazione di dozzine di bit di codice che puoi mescolare nel tuo stack come meglio credi. L’autenticazione, l’autorizzazione e la registrazione sono faccende che possono essere risolte con qualsiasi numero di opzioni. Se state costruendo un’architettura di microservizi piena di API, il plug-in standardizzato Swagger genererà automaticamente la documentazione Swagger dal vostro codice di base.
Koa
A volte avete bisogno di una collezione abbastanza complessa di routine che si destreggiano tra le richieste in arrivo e le traducono in molteplici cambiamenti, alcuni dei quali elaborati. Koa è progettato per rendere l’organizzazione di tutto questo lavoro un po’ più semplice. Il suo segreto è che trasforma le funzioni di callback che normalmente dominano JavaScript in un insieme di funzioni asincrone che si attivano al momento giusto. Gli spaghetti annidati delle pile di callback vengono trasformati in qualcosa di un po’ più pulito.
Nest
Un’altra opzione per domare la complessità del server viene dal team Nest, che offre un’architettura piena di controller, pipe e provider con alcune guardie, intercettatori e filtri di eccezione per mantenere l’ordine. Il framework è moderno e pronto a gestire GraphQL e richieste di microservizi fin dall’inizio.
Drupal, WordPress e Rails
I framework che sono costruiti in JavaScript e che girano sopra Node.js riempiono il centro psicologico del mondo dello sviluppo web in questi giorni. Ma può essere un errore ignorare la generazione precedente costruita su PHP, una base che è più veloce che mai ora che ha anche un compilatore just-in-time come JavaScript. E Ruby e il suo framework Rails continuano a servire come pietre miliari di siti web solidi come la roccia.
L’ultima generazione è segnata dalla battaglia e ben collaudata da più di un decennio di sviluppo e lavoro continuo. Ci sono designer sofisticati che possono creare temi e skin per le applicazioni. C’è una buona probabilità che qualcuno abbia già costruito i moduli con le funzionalità di cui avete bisogno. Quindi, prima di esplorare un framework Node.js intelligente, considera se uno dei vecchi può già fare molto, se non tutto ciò di cui hai bisogno.
Vanilla JS
Potresti vederlo come una frecciatina o forse una satira al livello di “I vestiti nuovi dell’imperatore”, ma è difficile discutere del suo successo. Vanilla JS è un sito web che si vanta che il suo framework è usato su più siti web di “jQuery, Prototype JS, MooTools, YUI, e Google Web Toolkit-combinati”. Questo può essere vero o meno, data la proliferazione di jQuery, ma ridiamo al fuoco. Il sito è anche dotato di un piccolo selettore carino che ti permette di raggruppare un archivio personalizzato di diversi componenti come Math, DOM, chiusure o espressioni regolari. Non importa cosa scegliete, il risultato è uno sbalorditivo zero byte. Provate a battere questo!
Il punto della battuta è che a volte ha senso usare solo alcuni degli elementi standard in JavaScript e saltare gli extra. Biblioteche e framework come jQuery o React sono nati, in parte, a causa delle pazzesche differenze tra i browser. Molte di queste differenze sono scomparse grazie alla standardizzazione.
Ovviamente i sostenitori di Vanilla JS non affrontano il fatto che funzioni stenografiche come $() non sono solo convenienti, ma fanno anche risparmiare spazio nel nostro codice. Ma se userete document.getElementById solo occasionalmente, potrebbe non avere importanza. Se aggiungerete solo alcune funzioni alla vostra pagina web e queste funzioni faranno alcune cose basilari, il semplice JavaScript alla vaniglia potrebbe essere il framework più veloce per voi.