Questa pagina è stata tradotta dall'API Cloud Translation.

Scegli una libreria o un framework JavaScript

Umar Hansa

Questo articolo fornisce informazioni su come scegliere una libreria o un framework da utilizzare all'interno della tua applicazione web. Le discussioni qui descritte ti aiuteranno a valutare i pro e i contro della ricerca della libreria o del framework JavaScript più adatti al problema aziendale che stai cercando di risolvere. Capire quali pro e quali contro si applicano in diverse situazioni è fondamentale per esaminare l'elevato numero di scelte di libreria JavaScript disponibili.

Cosa sono le librerie e i framework JavaScript

Che cos'è una libreria JavaScript? Nella sua forma più semplice, una libreria JavaScript è un codice prescritto che puoi chiamare nel codice del tuo progetto per svolgere un'attività specifica.

Questo post menziona principalmente "librerie". Tuttavia, molte delle discussioni sono applicabili anche ai framework. In sostanza, la differenza tra i due aspetti può essere così riassunta:

Per una libreria, il codice dell'applicazione chiama il codice libreria.
Nel caso di un framework, il codice dell'applicazione viene chiamato dal framework.

I seguenti esempi pratici aiutano a illustrare le differenze.

Esempio di chiamata a una libreria JavaScript

Una libreria JavaScript esegue un'attività specifica, quindi restituisce il controllo all'applicazione. Quando usi una libreria, controlli il flusso dell'applicazione e scegli quando chiamare la libreria.

Nell'esempio seguente, il codice dell'applicazione importa un metodo dalla libreria lodash. Al termine della funzione, il controllo viene restituito all'applicazione.

import capitalize from 'lodash.capitalize';
capitalize('hello'); // Hello

Quando viene eseguito, il metodo lodash.capitalize richiama un codice JavaScript precompilato che utilizza l'iniziale maiuscola per il primo carattere di una stringa.

Esempio di utilizzo di un framework JavaScript

Un framework JavaScript è un modello di codice predefinito all'interno del quale puoi creare il comportamento della tua applicazione. In altre parole, quando utilizzi un framework, il framework controlla il flusso dell'applicazione. Per utilizzare un framework, devi scrivere il codice dell'applicazione personalizzato, quindi il framework chiama il codice dell'applicazione.

Nell'esempio seguente viene mostrato uno snippet di codice che utilizza il framework JavaScript Preact:

import { createElement } from 'preact';

export default function App() {
  return (
    <p class="big">Hello World!</p>
  )
}

Nell'esempio, puoi notare che il framework ha un controllo molto maggiore sul codice che scrivi e, in alcuni casi, ha anche il controllo su quando eseguire il codice.

Perché utilizzare una libreria?

L'utilizzo di una libreria JavaScript può aiutare a evitare ripetizioni inutili del codice. Le librerie possono astraersi dalla logica complessa, come la manipolazione delle date o i calcoli finanziari. Una libreria può anche aiutarti a distribuire il tuo prodotto iniziale, anziché dover scrivere tutto il codice da zero, operazione che può richiedere del tempo.

Alcune librerie JavaScript lato client aiutano ad abbattere le peculiarità della piattaforma web. Una libreria può anche essere usata come strumento di apprendimento. Ad esempio, se non hai dimestichezza con le funzioni di easing dell'animazione, il codice sorgente di una libreria può insegnarti come funzionano.

Alcune librerie sono supportate da grandi aziende che investono tempo e denaro per mantenere le raccolte aggiornate e sicure. Molte librerie sono accompagnate da un'ampia documentazione che offre a te e al tuo team un modo rapido per acquisire familiarità con l'utilizzo della libreria.

Essenzialmente, l'utilizzo di una libreria JavaScript consente di risparmiare tempo.

Perché è importante utilizzare la biblioteca?

Tecnicamente, puoi sviluppare la tua applicazione web da zero, ma perché rischi di creare un problema se puoi utilizzare un software senza costi (open source) o acquistare una soluzione che, a lungo termine, possa far risparmiare tempo e denaro? Sono disponibili numerosi framework e librerie JavaScript, ognuno dei quali offre un approccio unico alla risoluzione dei problemi e ognuno con caratteristiche differenti. Ad esempio:

Una libreria può essere scritta e gestita internamente anziché da terze parti.
Una libreria può avere licenze legali specifiche che la rendono adatta o non adatta alla tua applicazione web.
Una libreria potrebbe essere obsoleta o non gestita.
Una libreria può semplificare una serie di attività complesse e farti risparmiare molto tempo e denaro.
Una libreria può essere ampiamente utilizzata nella comunità e può essere ben nota tra gli sviluppatori.

Come puoi immaginare, caratteristiche diverse possono influire sulla tua applicazione web in modi diversi. A volte la decisione non è così profonda e puoi tranquillamente sostituire una raccolta se non ti piace. Tuttavia, a volte una libreria può avere un effetto significativo sul tuo lavoro e sulla tua applicazione web, il che suggerisce che potrebbe essere necessario un approccio più consapevole.

Esistono alcuni ambienti JavaScript non lato client, ad esempio sul server (eseguito in un ambiente cloud) o su un Raspber Pi, dove potrebbe essere necessario regolare i criteri utilizzati per verificare le librerie e i framework.

Esibizione

L'effetto delle prestazioni di una libreria JavaScript su un'applicazione web lato client non deve essere ignorato. Una libreria JavaScript di grandi dimensioni può compromettere le prestazioni di caricamento della pagina. Ricorda che i millisecondi fanno milioni.

Considera uno scenario in cui utilizzi una libreria JavaScript per l'animazione. Alcune librerie possono aggiungere facilmente decine di kilobyte e, in alcuni casi, anche centinaia di kilobyte. Risorse JavaScript come questa possono causare un ritardo significativo nel caricamento della pagina perché il browser deve scaricare, analizzare, compilare ed eseguire il codice.

Più grande è la libreria JavaScript, maggiore sarà l'effetto sulle prestazioni per gli utenti.

Quando valuti o utilizzi una libreria o un framework JavaScript, prendi in considerazione i seguenti suggerimenti per migliorare le prestazioni:

Data una libreria JavaScript di grandi dimensioni, valuta la possibilità di utilizzare un'alternativa più piccola. Ad esempio, date-fns offre molte funzionalità a dimensioni più ragionevoli rispetto ad altre opzioni.
Dopo l'esempio precedente di date-fns, importa solo le funzioni necessarie, ad esempio import { format } from 'date-fns'. Assicurati di combinare questo approccio con lo scuotimento degli alberi, in modo da creare e inviare agli utenti un payload JavaScript minimo.
Utilizza strumenti di test delle prestazioni come Lighthouse per osservare l'effetto delle prestazioni derivante dall'uso di una determinata libreria JavaScript. Se una libreria aggiunge un secondo di ritardo al tempo di caricamento della pagina (non dimenticare di limitare la rete e la CPU durante il test), potrebbe essere necessario rivalutare la libreria che preferisci. Oltre a controllare il caricamento della pagina, assicurati di profilare qualsiasi comportamento della pagina web che richiami il codice dalla libreria in questione: le prestazioni di caricamento della pagina non forniscono la storia completa.
Se l'autore della biblioteca ha apprezzato i commenti, invia le tue osservazioni sulla performance, i suggerimenti e persino i contributi al progetto. È qui che brilla la community open source. Se decidi di dare un contributo, potresti dover prima verificare con il tuo datore di lavoro.
Utilizza uno strumento per il monitoraggio automatico dei gruppi, come bundlesize, per verificare la presenza di aggiornamenti imprevisti di una libreria. È normale che una libreria JavaScript cresca nel tempo. L'aggiunta di funzionalità, correzioni di bug, casi limite e altro ancora possono incrementare le dimensioni dei file di una libreria. Una volta che tu o il tuo team avete accettato di utilizzare una raccolta, aggiornarla potrebbe essere meno problematico e sollevare pochi o nessun dubbio. È qui che è utile fare affidamento sull'automazione.
Osserva i tuoi requisiti per una libreria e valuta se la piattaforma web offre o meno le stesse funzionalità in modo nativo. Ad esempio, la piattaforma web offre già un selettore dei colori, che elimina la necessità di utilizzare una libreria JavaScript di terze parti per implementare la stessa funzionalità.

Sicurezza

L'utilizzo di un modulo di terze parti comporta alcuni rischi per la sicurezza intrinseci. Un pacchetto dannoso all'interno del codebase dell'applicazione web può compromettere la sicurezza sia del team di sviluppo sia degli utenti.

Prendiamo in considerazione una libreria pubblicata nell'ecosistema della Gestione dei partner di rete. Un pacchetto di questo tipo potrebbe essere legittimo. Tuttavia, nel tempo, il pacchetto potrebbe essere compromesso.

Ecco alcuni suggerimenti per la sicurezza da prendere in considerazione quando utilizzi o valuti codice di terze parti:

Se utilizzi GitHub, prendi in considerazione le offerte di sicurezza del codice, ad esempio Dependabot. In alternativa, puoi prendere in considerazione servizi alternativi che analizzano le vulnerabilità nel codice, come snyk.io.
Prendi in considerazione l'utilizzo di servizi di controllo del codice, un team di tecnici che può controllare manualmente il codice di terze parti che stai utilizzando.
Valuta se devi bloccare le dipendenze a una versione specifica o eseguire il commit del codice di terze parti all'interno del tuo controllo della versione. Questo può aiutarti a bloccare la dipendenza da una particolare versione, presumibilmente considerata sicura. Ironicamente, questo può avere un contraffatto all'interno della sicurezza, dato che potresti perderti aggiornamenti vitali alla libreria.
Esegui la scansione della home page del progetto o della pagina di GitHub, se esistente. Ricerca se esistono problemi di sicurezza in sospeso e se i precedenti problemi di sicurezza sono stati risolti entro un periodo di tempo ragionevole.
Il codice di terze parti che utilizza un altro codice di terze parti può comportare più rischi di una libreria con zero dipendenze. Fai attenzione a questo rischio.

Accessibilità

Forse ti starai chiedendo in che modo le librerie software sono correlate all'accessibilità web. Sebbene una libreria software possa essere utilizzata in diversi ambienti, l'accessibilità web è di fondamentale importanza nel contesto di una libreria basata su JavaScript lato client.

Una libreria basata su JavaScript lato client (o un framework, a tal fine) può aumentare o diminuire l'accessibilità del tuo sito web. Prendi in considerazione una libreria JavaScript di terze parti che aggiunge un dispositivo di scorrimento delle immagini a una pagina. Se il dispositivo di scorrimento delle immagini non tiene conto dell'accessibilità web, come sviluppatore web potresti trascurare una funzionalità così importante e lanciare un prodotto che non dispone di funzioni fondamentali, ad esempio che può essere spostato tramite tastiera.

Il plug-in tipografico adattabile supporta gli utenti che aumentano o diminuiscono lo zoom della pagina?
Il plug-in per il caricamento di file supporta il caricamento di file da dispositivi di assistenza?
La raccolta delle animazioni offre supporto per gli utenti che preferiscono un movimento ridotto?
Il plug-in delle mappe interattive supporta l'utilizzo della sola tastiera?
La raccolta del lettore audio offre un'esperienza appropriata sugli screen reader?

È ragionevole aspettarsi che sia necessario un certo livello di coinvolgimento da parte tua, in qualità di sviluppatore web, per soddisfare questi requisiti di accessibilità. Ad esempio:

Puoi implementare le funzionalità mancanti all'interno del codebase anche mentre continui a utilizzare la libreria in questione.
Con l'aiuto del tuo datore di lavoro, puoi contribuire alla biblioteca con una funzionalità di questo tipo mancante, se l'autore della biblioteca lo consente.
Puoi aprire una finestra di dialogo con l'autore della raccolta. Ad esempio, queste specifiche funzioni di accessibilità sono nella tua roadmap? Accetti che facciano parte della biblioteca?
Per i casi d'uso più diffusi, puoi esplorare opzioni di raccolta alternative che sono più accessibili; potrebbero esistere, ma sono più difficili da trovare.
Nel caso estremo, potrebbe essere necessario abbandonare completamente una libreria e implementare le tue funzionalità da zero. Questo può accadere quando una libreria o un framework hanno un'esperienza di accessibilità ridotta al momento dell'uso iniziale e devi annullare molto di ciò che la libreria o il framework dovrebbe offrirti senza costi.

Convenzioni

È più facile lavorare con una libreria software che utilizza convenzioni di codifica consolidate. Se una biblioteca utilizza una convenzione di programmazione sconosciuta, potrebbe essere difficile per te e il tuo team lavorare con una libreria di questo tipo.

Se una libreria non segue convenzioni di codifica comuni (ad esempio, una guida di stile comune), non c'è molto che tu possa fare come rimedio immediato. Tuttavia, hai ancora alcune opzioni a disposizione:

Assicurati di distinguere tra il codice sorgente della libreria e l'API esposta a te, utente della libreria. Anche se il codice sorgente interno può utilizzare convenzioni sconosciute, se l'API (la parte della libreria con cui interagisci) utilizza convenzioni familiari, potrebbe non esserci nulla di cui preoccuparsi.
Se l'API Library non segue convenzioni di codifica comuni, puoi utilizzare un pattern di progettazione JavaScript, come il pattern proxy, per eseguire il wrapping e contenere tutte le interazioni con la libreria in un singolo file nel codebase. Il proxy può quindi offrire un'API più intuitiva ad altre parti del codice all'interno del codebase.

Le convenzioni hanno un ruolo importante nella facilità d'uso. Una libreria che include un'API intuitiva può far risparmiare molte ore, o persino giorni, di ore alle persone, rispetto a un'API controintuitiva che richiede molte sperimentazioni per capirla.

Aggiornamenti

Ad esempio, una libreria completamente funzionante che esegue alcuni calcoli matematici può raramente richiedere aggiornamenti. In effetti, una libreria completa di funzionalità è una scoperta rara nel mondo in continua evoluzione dello sviluppo web. Tuttavia, in alcuni casi è consigliabile che l'autore della raccolta sia reattivo e disponibile ad apportare aggiornamenti. Nuove ricerche e scoperte possono rivelare modi migliori per agire, pertanto le tecniche utilizzate nelle librerie e nei framework sono sempre soggette a cambiamenti.

Quando scegli una libreria o un framework, fai attenzione a come vengono gestiti gli aggiornamenti e tieni presente che queste decisioni possono interessarti:

La raccolta ha un programma di pubblicazione ragionevole? Ad esempio, gli aggiornamenti del repository di codice sorgente possono avvenire di frequente, ma se tali aggiornamenti non vengono "pubblicati" o "rilasciati" di conseguenza, noterai che può essere difficile scaricarli.
La libreria rilascia aggiornamenti tramite uno schema di controllo delle versioni del software adeguato? Una biblioteca ti fa risparmiare tempo. Se devi modificare inaspettatamente il codice ogni volta che aggiorni la versione della libreria, ciò potrebbe eliminare lo scopo di utilizzare quella libreria. I cambiamenti radicali a volte sono inevitabili, ma in un mondo ideale i cambiamenti non sono frequenti e non sono forzati ai consumatori delle biblioteche.
La raccolta si impegna a fondo per la compatibilità con le versioni precedenti? A volte gli aggiornamenti del software possono comportare modifiche che provocano un errore, ma anche fornire un livello di compatibilità con le versioni precedenti. Ciò consente al consumer della libreria di utilizzare la versione più recente della libreria con modifiche minime al codice.

Licenze

Le licenze software sono un aspetto importante dell'utilizzo delle librerie software di terze parti. L'autore di una biblioteca può assegnare una licenza alla sua biblioteca. Se stai prendendo in considerazione l'utilizzo della raccolta, la scelta della licenza potrebbe interessarti.

Ad esempio, una libreria JavaScript potrebbe avere una licenza software che consente all'utente di utilizzarla in un ambiente non commerciale. Potrebbe essere un'ottima scelta per un progetto hobby personale. Se il tuo progetto ha un elemento commerciale, potrebbe essere necessario prendere in considerazione una licenza enterprise.

In caso di dubbi, rivolgiti al team legale della tua azienda per rivolgerti a un consulente legale.

Community

Una libreria o un framework con una vasta community di utenti/collaboratori possono essere utili, ma non si tratta di una garanzia. In generale, maggiore è il numero di utenti di una libreria o un framework, più è probabile che ne trarrà beneficio. Considera i seguenti pro e contro della partecipazione a una community di sviluppo:

Vantaggi:

Un'ampia base di utenti potrebbe comportare una maggiore probabilità che i bug vengano rilevati presto e spesso.
Una grande community attiva potrebbe significare un numero maggiore di tutorial, guide, video e persino corsi per la raccolta o il framework in questione.
Una grande community attiva può richiedere più supporto sui forum e sui siti web con domande e risposte, aumentando le probabilità che le domande di assistenza ricevano una risposta.
Una community più coinvolta può comportare un maggior numero di collaboratori esterni alla raccolta o al framework. Possono contribuire a fornire funzionalità che altrimenti non saranno presenti nella roadmap dell'autore.
Quando una libreria o un framework sono popolari all'interno di una community, è maggiore la probabilità che i tuoi colleghi e colleghi ne abbiano sentito parlare o che conoscano tale libreria o framework.

Contro:

Un progetto con una base di utenti ampia e diversificata può diventare enorme a causa dell'aggiunta costante di funzionalità. Le librerie voluminose possono compromettere le prestazioni sul web.
Un progetto con una community attiva e coinvolta può essere stressante per gli autori e i sostenitori e può richiedere un'elevata moderazione della community.
Un progetto che cresce rapidamente, ma che non dispone del supporto adeguato, può iniziare a mostrare segni di avere una comunità tossica. Ad esempio, a causa dei controlli, gli sviluppatori web alle prime armi o alle prime armi potrebbero sentirsi sgraditi in una determinata community.

Documentazione

Indipendentemente da quanto possano essere semplici o complessi un framework o una libreria JavaScript, la documentazione del software può sempre essere di aiuto. Anche gli sviluppatori più esperti utilizzano la documentazione, invece di dover capire il codice da soli. La documentazione chiarisce l'API da utilizzare e la relativa modalità di utilizzo.

La documentazione può anche fornire codice campione, rendendo più facile iniziare rapidamente. Quando valuti una libreria o un framework, puoi porre alcune di queste domande:

La biblioteca include documentazione? In caso contrario, dovrai essere a tuo agio nel capire le cose da solo.
La documentazione è chiara, facilmente comprensibile e priva di ambiguità? Molti sviluppatori dedicano molto tempo alla documentazione. Può sembrare poco, ma la chiarezza all'interno della documentazione testuale può avere un grande impatto sulla produttività.
La documentazione è generata completamente automaticamente? Tale documentazione può essere più difficile da assimilare e non sempre fornisce indicazioni chiare su come utilizzare un'API.
La documentazione è aggiornata? A volte la gestione della documentazione è considerata un pensiero in secondo piano. Se la libreria viene aggiornata ma la documentazione non lo è, ciò può portare a sprechi di tempo di sviluppo.
La documentazione è completa e disponibile in più formati? Le guide per l'utente, il codice di esempio, la documentazione di riferimento, le demo dal vivo e i tutorial sono tutti preziosi formati di documentazione che possono aiutarti a utilizzare con successo una libreria o un framework.

La documentazione non può essere sempre completa, e non c'è problema. Dovrai valutare le esigenze della tua organizzazione, i requisiti del progetto e la complessità del software e utilizzarle per determinare il livello di documentazione di cui hai bisogno.

Conclusione

È normale sentirsi soprattutto quando si sceglie una libreria o un framework per la prima volta. Esattamente come tutto il resto, più impari ed eserciti in un'attività, migliore sarà il tuo successo. Potrebbe essere utile fare riferimento a questo post la prossima volta che sceglierai una libreria o un framework da utilizzare. Puoi utilizzare le intestazioni all'interno di questo post come elenco di controllo. Ad esempio: il rendimento di questa libreria è migliore? Questa libreria soddisfa gli standard di accessibilità web della mia azienda?

Esistono altri aspetti relativi alle librerie e ai framework che potresti prendere in considerazione, di cui non abbiamo parlato molto in questo post:

Estendibilità: quanto è facile estendere la raccolta con logica e/o comportamento personalizzati?
Strumenti: se applicabile, la libreria dispone di strumenti come plug-in dell'editor di codice, strumenti di debug e plug-in di sistema per la creazione?
Architettura: la pulizia del codice è importante, ma l'architettura complessiva della libreria è sensata?
Test: il progetto ha una suite di test? Il sito web del progetto utilizza badge o indicatori che la suite di test supera rispetto all'ultimo commit?
Compatibilità: la libreria funziona bene con altre librerie e/o framework che stai attualmente utilizzando?
Costo: qual è il costo di un framework? È open source o disponibile per l'acquisto?
Metriche vanity: dovrebbero essere in basso nell'elenco dei criteri o addirittura essere ignorate del tutto, ma potresti considerare i "voti" del progetto, gli account di social media che lo rappresentano e/o il numero di bug/problemi aperti presenti nella pagina del progetto.