Aggiornato a giugno 2018.
Tra tutti i linguaggi che puoi usare per creare applicazioni web, JavaScript ha forse la più robusta selezione di librerie e framework veramente utili. In effetti, ce ne sono così tanti che può essere difficile capire quali usare, specialmente quando si è appena agli inizi.
La differenza chiave tra le librerie JavaScript e i framework è che le librerie consistono in funzioni che un’applicazione può chiamare per eseguire un compito, mentre un framework definisce come uno sviluppatore progetta un’applicazione. In altre parole, il framework chiama il codice dell’applicazione, piuttosto che il contrario. Naturalmente, gli sviluppatori hanno ancora bisogno di librerie per eseguire compiti di base sul web utilizzando JavaScript.
La natura di questi strumenti è cambiata negli ultimi anni. Nel 2015, per esempio, jQuery era la principale libreria JavaScript. Oggi, secondo JavaScript Scene, le librerie JavaScript tradizionali rimangono importanti, ma affrontano una crescente concorrenza da framework JavaScript come React, Angular, Node.js e Ember.js.
Quando si considera qualsiasi libreria o framework JavaScript, si possono porre alcune domande chiave:
- La libreria o il framework è abbastanza flessibile da soddisfare le vostre esigenze?
- Quanto spesso viene aggiornata la libreria o il framework per soddisfare i requisiti delle nuove applicazioni e per garantire la compatibilità con i nuovi standard?
- La libreria o il framework è sicuro? Può essere molto difficile risolvere i problemi di sicurezza in seguito.
- La libreria o il framework gode di un forte supporto da parte della comunità? Potreste essere sorpresi di quanto spesso ne avrete bisogno.
- Ci sono semplici applicazioni di esempio? Vuoi essere sicuro che la libreria o il framework sia ben scritto e fornisca una documentazione utilizzabile.
Con questo in mente, stiamo aggiornando la nostra lista, originariamente pubblicata nel 2015, per coprire librerie e framework ben noti impiegati da quasi tutti i siti sul web, così come opzioni più specializzate progettate per supportare funzionalità specifiche del sito. Per aiutarvi a capire le scelte, abbiamo elencato le librerie e i framework separatamente (in ordine alfabetico):
Biblioteche JavaScript
D3.js
Molti siti moderni sono guidati dai dati. I siti di notizie, per esempio, devono costantemente aggiornare il loro contenuto, rendendo impossibile riconfigurare la configurazione ogni pochi secondi per supportare questi cambiamenti. La libreria Data Driven Documents, o D3.js, è unica in quanto mette i dati al primo posto. La schermata qui sotto mostra solo alcune delle molte presentazioni di dati che troverete in D3.js:
Facendo clic su una voce nell’indice visivo si accede a una pagina di dettaglio dove è possibile vedere una vista completa della presentazione dei dati (mostrata qui sotto), così come il codice sottostante e i dati utilizzati per creare la presentazione:
Il sito fornisce esempi completi progettati per aiutarvi a capire la potenza della libreria.
Il vantaggio principale di questa libreria è la sua gestione estremamente flessibile del contenuto. Il rovescio della medaglia, tuttavia, è che D3.js non offre un sacco di pizzazzoni. Se state lavorando su un sito di e-commerce, per esempio, piuttosto che presentare semplicemente delle informazioni, questa libreria potrebbe non essere la scelta migliore. Oltre all’estrema flessibilità, la presentazione relativamente snella di D3.js aiuta a migliorare la velocità evitando un sacco di bagaglio che altre librerie usano per creare presentazioni brillanti. E se trovi che D3.js è ancora un po’ troppo per i tuoi bisogni, considera Chart.js, una libreria più piccola dedicata a fornire grafici.
jQuery
jQuery ha guadagnato il suo status di lunga durata come il sovrano regnante della pagina web. Molti siti usano ancora jQuery per la manipolazione di base del Document Object Model (DOM) per tre ragioni essenziali:
- jQuery è incredibilmente facile da imparare. Fornisce più esempi della maggior parte delle librerie, quindi c’è una buona possibilità di trovare un esempio che dimostri esattamente come realizzare il tuo compito specifico.
- jQuery è incredibilmente veloce. Poiché si concentra sull’eseguire bene compiti specifici, jQuery rende possibile eseguire quei compiti velocemente.
- jQuery ha un’enorme base installata. Ha anche una quantità significativa di supporto della comunità e di collaboratori al progetto.
Ti puoi aspettare che questa libreria sia in giro per un lungo periodo. Il tempo di sviluppo aggiuntivo significa anche che la documentazione è abbastanza rifinita. Come potete vedere qui sotto, la documentazione suddivide gli argomenti in pezzi facilmente comprensibili e potete poi approfondire i dettagli se necessario:
Naturalmente, niente è perfetto. Per esempio, ci sono momenti in cui jQuery non funziona allo stesso modo su più browser. JQuery è in anticipo su queste preoccupazioni, e si possono trovare informazioni sul supporto dei browser sul sito.
Infine, a differenza di altre librerie, jQuery non è una soluzione completa. Avete bisogno di un altro prodotto, come jQuery UI (vedi la prossima voce) per costruire un’applicazione completa. E’ importante capire che il tuo sito sarà più modulare e dipendente da più librerie quando lavori con jQuery (che non è necessariamente una cosa negativa).
jQuery UI
jQuery UI è solo uno dei tanti add-on per jQuery, ma è quello che si vede più spesso, ed è il motivo per cui lo abbiamo incluso qui. Si usa jQuery UI per aggiungere elementi grafici di base alla propria applicazione dopo aver incorporato jQuery. La libreria jQuery UI viene fornita con tutti i tipi di widget interessanti, come fisarmoniche, cursori, tooltips e selezionatori di date, che rendono possibile configurare la vostra applicazione per fornire servizi utili.
Potrete analizzare particolari widget o altri controlli per vedere come funzionano. Una pagina contiene tipicamente il controllo in cima, seguito da istruzioni per l’uso e codice di esempio. Come con jQuery, si inizia con un semplice esempio, ma si può approfondire come necessario per vedere le aggiunte che si possono fare.
Questa libreria si distingue per diverse ragioni. La più importante è che JQuery UI funziona con quasi tutti i browser, quindi gli utenti hanno meno probabilità di lamentarsi che la vostra applicazione non funzioni come previsto. jQuery UI offre anche un vasto numero di add-on. Per esempio, mentre jQuery UI manca di un selezionatore di tempi, è possibile ottenere componenti aggiuntivi per eseguire quel compito da posti come trentrichardson.com/examples/timepicker.
L’unico problema con il gruppo di librerie jQuery è che sono diventate grandi… davvero grandi. A volte una libreria diventa semplicemente troppo ricca di funzionalità. La dimensione delle librerie JQuery può renderle lente da caricare sui dispositivi più piccoli. Librerie alternative di terze parti come Granim.js e Multiple.js sono nate per fornire un sottoinsieme delle caratteristiche di jQuery, a volte con un insieme mirato di caratteristiche aggiuntive, con tempi di caricamento significativamente più veloci.
Parsley
La validazione dei moduli è un compito essenziale. Poiché i dati sono ora così spesso analizzati dalle macchine, la pulizia dei dati è più essenziale che mai. Pulire i dati dopo il fatto è dispendioso in termini di tempo e non è mai accurato come far sì che l’utente fornisca informazioni corrette in primo luogo.
Parsley fornisce più tecniche di validazione dei form di qualsiasi altra libreria JavaScript. Si sceglie il livello di validazione di cui si ha bisogno, ma può diventare abbastanza complesso:
Anche la validazione apparentemente semplice mostrata qui sotto contiene molti tipi diversi di validazione, insieme al codice richiesto per eseguire il compito. È sorprendente quanto sia facile realizzare la maggior parte delle convalide comuni. (Non avrete bisogno di codice pesante a meno che non stiate cercando di validare dati complessi.)
QUnit
La funzionalità di test fornita da molte librerie lascia molto a desiderare. Anche se si usa uno script, il test manuale di applicazioni complesse è destinato ad essere ingombrante e dispendioso in termini di tempo – se riesce a trovare tutti gli errori.
QUnit è una delle numerose librerie di test delle unità disponibili per JavaScript. Anche se alcuni potrebbero considerarla un po’ datata, è relativamente completa e si distingue per il grande supporto della comunità e una breve curva di apprendimento. Il sito di QUnit fornisce un sacco di informazioni per iniziare, incluso un tutorial completo sui test unitari.
Si può anche usare QUnit per testare QUnit (supponendo che si voglia farlo)!
React
Si considera solitamente una libreria, React è talvolta indicato come un framework. Nel contesto dell’approccio Model-View-Controller (MVC) per creare applicazioni su larga scala, React fornisce la parte della vista. Non presuppone nulla dello stack tecnologico sottostante che si sta utilizzando per modellare o controllare i dati. Tutto ciò che interessa a React è la visualizzazione dei dati sullo schermo. Con questo in mente, non si basa sul Document Object Model (DOM) del browser, ma utilizza invece un leggero DOM virtuale che visualizza le informazioni rapidamente. Una delle cose migliori di React è che è dichiarativo, il che significa che si dice al framework cosa si vuole fare, non come farlo.
Il prezzo da pagare per la velocità e la capacità di usare MVC è un certo grado di complessità aggiunta. Anche un piccolo componente richiede un bel po’ di codice (come dimostrato dagli esempi sul sito di React). Quello che si guadagna è la flessibilità e la velocità quando si lavora con progetti veramente grandi.
JavaScript Frameworks
Angular
Il framework Angular rende possibile estendere l’HTML agendo come la parte controller di MVC. I controllori sono il comportamento dietro i componenti DOM. Angular rende possibile creare nuovi comportamenti in un modo che è sia naturale che diretto. Le estensioni finiscono per apparire come aggiunte all’HTML, piuttosto che qualcosa di imbullonato sul posto. Il sito di Angular chiarisce le due ragioni essenziali per utilizzare questo prodotto: “velocità & prestazioni” e “strumenti incredibili.”
Tuttavia, la codifica può diventare complessa, e questo framework può essere più adatto alle imprese che alle piccole startup. Anche i semplici esempi sul sito di Angular si basano su più file che creano rapidamente complessità. È importante notare che l’ultima versione di Angular si basa anche su TypeScript invece di JavaScript puro, che aumenta la curva di apprendimento ma fornisce scalabilità.
Fortunatamente, Angular viene fornito con un ampio tutorial, mostrato qui, che dovrebbe rendere più facile per gli sviluppatori esperti iniziare a produrre risultati rapidamente.
Un potenziale problema: l’ultima versione di Angular non supporta una vasta gamma di browser come le versioni precedenti. Assicuratevi che sia compatibile con i browser che il vostro sito supporta.
Ember.js
C’è qualcosa di serio in un framework che si riferisce a se stesso come un “framework per sviluppatori web ambiziosi”. Aziende famose come Microsoft, Netflix e LinkedIn usano Ember.js perché impiega il pattern Model-View-View-Model (MVVM) e incorpora le migliori pratiche come parte del framework. La cosa migliore è che è scalabile molto bene. È interessante notare che mentre Ember.js si concentra sullo sviluppo web, è possibile utilizzarlo anche per costruire applicazioni mobili e desktop – è stato utilizzato per costruire Apple Music.
A differenza di molti altri framework, è possibile utilizzare la suite completa di strumenti basati su Ember per creare un ambiente di sviluppo altamente compatibile. L’Ember CLI (interfaccia a riga di comando) fornisce l’accesso a una ricchezza di strumenti che è possibile automatizzare tramite script. Ember Data, per esempio, fornisce un accesso ai dati orientato al web utilizzando Object-Relational Mapping (ORM). Ember Inspector, nel frattempo, è un plugin per i browser Firefox e Chrome progettato per rendere il debug più facile.
Anche con tutta la sua potenza, però, il tutorial rapido di Ember.js richiede solo cinque minuti per essere completato. Naturalmente, il tutorial standard richiede molto più tempo, ma produce risultati più rispettabili, come mostrato qui:
La documentazione di questo framework include tutti gli argomenti necessari, comprese le discussioni sul modello a oggetti, i modelli, i componenti, i controller e i modelli. C’è anche un blog e la comunità di Ember.js può fornire ulteriore aiuto.
Node.js
Node.js è un runtime JavaScript asincrono e guidato dagli eventi con alcune caratteristiche uniche. Per prima cosa, se non ha lavoro da fare, semplicemente “va a dormire”. Questo potrebbe non sembrare un grosso problema, ma se stai ospitando il tuo sito nel cloud pubblico, “metterlo a dormire” potrebbe farti risparmiare soldi, forse molti soldi. Inoltre, poiché Node.js non richiede serrature per fare il suo lavoro, non tende a bloccarsi come possono fare altri framework. Questo prodotto è più simile a jQuery piuttosto che a jQueryUI, nel senso che non lo si usa per creare un’interfaccia utente. Invece, si crea codice che reagisce agli eventi: un client genera eventi e il server risponde a questi eventi. L’interfaccia utente è un elemento separato che visualizza qualsiasi risultato.
Perché Node.js è così semplice e veloce, con un supporto della comunità secondo a nessuno, puoi trovarlo nei posti più improbabili. Anche se non pensi di avere il pacchetto completo installato, probabilmente ne hai almeno una parte installata come parte del Node.js Package Manager (NPM). Secondo la fondazione Node.js, ci sono 9 milioni di istanze di esso in esecuzione su più di 50.000 mila pacchetti. In altre parole, Node.js è alla base di molti dei pacchetti che usate. Con Node.js, gli sviluppatori possono costruire:
- Applicazioni backend
- Blogs
- Sistemi di gestione clienti
- Servizi in tempo reale, come app di chat e giochi
- Apipe REST
- Applicazioni per social network
- Utility e strumenti
Vue.js
Un versatile framework JavaScript open-source, Vue è “progressivo”, il che significa che a differenza dei “framework monolitici, Vue è progettato da zero per essere adottabile in modo incrementale”. Scalabile tra una libreria e un framework completo, Vue utilizza un “modello di sviluppo basato sui componenti” che vi permette di mescolare e abbinare i componenti Vue nei vostri progetti.
Le caratteristiche chiave di Vue includono componenti, modelli, transizioni, e binding dei dati a due vie, ma forse la sua caratteristica più distintiva è il suo sistema di “reattività”. Fondamentalmente, la reattività significa che l’aggiornamento di un oggetto JavaScript in Vue aggiorna automaticamente e discretamente i template di Vue.
Vue è stato costruito per essere utilizzabile da chiunque abbia una conoscenza pratica di HTML, CSS e JavaScript. Per avere un’idea di come funziona, guarda il video qui sotto:
Per maggiori informazioni, puoi vedere come Vue si confronta con altri Framework qui.
Altre scelte
Non dimenticare che ci sono molte altre librerie JavaScript, comunità, collezioni e framework disponibili, spesso con aree specifiche di interesse.
Per esempio, CodePen è una comunità online gratuita per testare e mostrare mix di HTML, CSS e JavaScript. Pensatelo come un ambiente sociale per designer e sviluppatori frontend, una comunità di sviluppo online e un editor con un’interfaccia uniforme. Ogni voce di CodePen si chiama Pen e puoi vederla in azione come parte di una collezione. Alcune collezioni sono abbastanza fantasiose, come anime.js, mentre altre, come Funny JS, hanno widget interessanti che potresti non vedere altrove. Funziona anche direttamente con React.
Similmente, Jest è una soluzione di test JavaScript “zero-configurazione” progettata per funzionare out-of-the-box con React.
BIDEO.JS, nel frattempo, fornisce un metodo per visualizzare video a schermo intero, utile se si sta costruendo un sito per un’agenzia di viaggi, per esempio.
La linea di fondo
Come dovrebbe essere chiaro ormai, il problema non è trovare una libreria o un framework JavaScript che possa aiutarvi a fare qualcosa di interessante – è trovare la libreria che vi aiuterà a fare l’unico compito che avete bisogno di compiere.
Inoltre, volete essere sicuri di fare affidamento su librerie che saranno ancora in giro domani. Nessuno vuole dover rielaborare la propria applicazione perché la libreria JavaScript che usa non è più disponibile. E anche se la maggior parte delle moderne librerie e framework JavaScript sono ora estremamente affidabili, dovete comunque assicurarvi che funzionino con tutti i dispositivi e i browser su cui si basano i vostri utenti.