Setup Menus in Admin Panel

School.Dataninja.it

Applicazioni web: gestire le librerie con Bower

Le librerie da cui dipende un'applicazione web sono collezioni di file che possono essere trattati come pacchetti da installare, aggiornare o disinstallare a comando. Bower è il package manager per il web.

Come ti ho mostrato nella precedente unità, una moderna applicazione web, per quanto semplice, richiede la scrittura e la gestione di diverse porzioni di codice in diversi linguaggi di programmazione: l’html per la struttura delle pagine, il css per il layout e le regole di stile, il javascript per la parte funzionale dell’applicazione e per la gestione dell’interazione dell’utente.

Partire da zero, da un file vuoto, non è mai una grande idea, perché ci sono innumerevoli comunità di persone molto più brave di te o me che hanno già soddisfatto il 99% delle esigenze che oggi sentiamo nostre.

Lo sviluppo web, come in generale lo sviluppo software, è fatto per lo più da piccole porzioni di codice personalizzato che mette insieme e fa dialogare porzioni molto più ampie di codice riutilizzabile, distribuito sotto forma di librerie. La libreria d3 di cui trattiamo in questo corso è per esempio una di queste: è una libreria javascript specializzata che affronta uno specifico macro-problema (la visualizzazione di dati) e tutta una serie di problematiche connesse (il caricamento di dati remoti, la manipolazione del formato SVG per la grafica vettoriale, ecc.). Ma come d3 ce ne sono infinite: questa pagina di Wikipedia ne elenca le più note, la maggior parte ha un repository su Github.

La forza dell’open-source a questo punto è evidente: se queste librerie non fossero riutilizzabili per questioni legali, o addirittura inaccessibili, sarebbero sostanzialmente inutili. Il loro riuso libero, invece, permette la nascita e l’evoluzione di un vasto ecosistema che affronta e risolve efficacemente problemi anche molto complessi.

Includere una libreria nel proprio progetto

Nella struttura di file e cartelle che ti ho suggerito per il tuo progetto, i file delle librerie esterne (che possiamo chiamare anche dipendenze) sono memorizzati nella cartella lib/. Al caricamento, la pagina principale della nostra applicazione deve quindi indicare al browser dell’utente dove trovarle: all’interno del tag head della pagina index.html devi quindi inserire un tag script di questo tipo: <script src="lib/d3/d3.min.js"></scrit>.

Nel caso la libreria preveda anche dei file css che definiscono alcune sue regole di stile, devi inserire anche un tag link, sempre all’interno del tag head, come questo:  <link rel="stylesheet" type="text/css" href="lib/fontawesome/css/font-awesome.min.css">.

Non serve altro. Quando l’utente caricherà il file index.html, il browser scaricherà ed eseguirà anche il codice della libreria d3 e applicherà gli stili definiti dalla libreria fontawesome.

Ma come ottenere i file delle librerie da includere?

Installare le dipendenze a mano

Se la tua applicazione dipende da un numero molto limitato di librerie e non avrai la necessità di gestirne l’aggiornamento sul lungo periodo, il metodo manuale è il più semplice. Devi però decidere se vuoi che i file delle librerie risiedano fisicamente sul tuo spazio web (insieme al file index.html e al tuo codice) oppure se usare uno dei tanti servizi di content delivery (erogato dalle Content Delivery Network, o CDN). Per esempio puoi includere il file d3.min.js direttamente dal sito ufficiale<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>.

Oppure usare una CDN specializzata molto più affidabile e performante come CDNJS (ma ce ne sono molte altre, inclusa quella di Google):  <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>.

Quando il browser dell’utente è pronto a caricare il file della libreria, non lo richiederà al tuo server, ma a quelli di d3js.org (primo caso) o a quelli di cdnjs.cloudflare.com (nel secondo). Attenzione che nel primo caso la versione caricata sarà sempre l’ultima disponibile, potenzialmente non testata con la tua applicazione. Nel secondo caso invece è possibile specificare la versione da utilizzare (la 3.5.5).

Usando una CDN probabilmente richiesta e caricamento saranno molto più veloci (in fondo sono servizi specializzati), ma la tua applicazione dipenderà dal funzionamento di un servizio esterno su cui non hai controllo, a maggior ragione quando gratuito.

Se opti invece per il self-hosting delle librerie devi solo scaricare manualmente il singolo file o l’archivio che contiene tutti i file della libreria. Tipicamente ogni progetto ha un pulsante download ben in vista nella homepage del proprio sito. Se si tratta di un archivio compresso, uno zip per esempio, devi naturalmente estrarre i file nella cartella lib/.

Bower: gestire le librerie come pacchetti (o app)

Il metodo manuale è comodo quando il tuo progetto prevede poche dipendenze, quando non ti devi curare della gestione del loro aggiornamento nel tempo, quando sono abbastanza leggere da poter essere incluse fisicamente all’interno del tuo progetto (quando lo distribuisci come un archivio compresso, per esempio, o quando lo pubblichi su un repository git).

Presto però anche una visualizzazione apparentemente semplice può crescere in complessità e richiedere molte librerie (anche decine). Questo è normale e giusto: le librerie migliori sono quelle specializzate che affrontano un singolo problema ben definito e lo risolvono al meglio, quindi non solo efficacemente, ma anche efficientemente. Una visualizzazione di dati pone molte sfide risolvibili di volta in volta da librerie diverse, ecco alcuni esempi:

Difficile dire quante librerie siano oggi disponibili per progetti scritti in javascript, basti pensare però che il repository di Bower, di cui ti parlerò a brevissimo, ne conta più di 26 mila al momento… :O

Un “app store” per le librerie open-source

Chiunque abbia uno smartphone o un tablet moderno, che sia Apple o Microsoft o basato su Android, è abituato al processo di ricerca e installazione di software mediante un’app speciale, quella dello store (rispettivamente AppStore, Windows Store, Google Play). Bower implementa la stessa filosofia per le dipendenze dei nostri progetti web: un repository centrale in cui sono pubblicate le librerie disponibili, la possibilità di ricercarle, scaricarle, includerle nei nostri progetti, gestirne l’aggiornamento in caso dell’uscita di nuove versioni: http://bower.io/.

Non solo: se una libreria che ti interessa ha a sua volta delle dipendenze (un esempio classico sono i plugin di jQuery), non te ne devi preoccupare. Bower pensa a tutto e si cura di installare tutto ciò che serve per farla funzionare senza problemi. E ancora: per quanto possa essere complesso l’albero delle dipendenze del tuo progetto, tutte le informazioni utili per ricostruirlo sono memorizzate in un semplice file (in formato JSON). Non è necessario così impacchettare tutti i file di tutte le librerie insieme al progetto, è sufficiente solo fornire insieme ai tuoi file anche il bower.json: un semplice comando ricostruirà in pochi secondi tutto l’albero delle dipendenze, installando tutto (e solo) ciò che serve.

Ma chi gestisce il repository centrale? In realtà sei libero di scegliere quello che vuoi, l’importante è che sia raggiungibile via Internet. Bower supporta il download delle librerie da pacchetto registrato (presente nella lista ufficiale), da repository pubblicati su GitHub, da endpoint Git di qualsiasi tipo (anche interni, privati, aziendali, locali, ecc.), persino da singoli file (specificando l’URL completo).

Comodo, veloce e sicuro, non è vero?

Installare Bower

Bower è un’applicazione di Nodejs, per cui devi prima installare quest’ultimo, insieme al gestore dei pacchetti npm. Devi anche avere un’installazione funzionante di Git. Se non lo hai già fatto, segui le istruzioni che trovi nelle relative unità dedicate a Nodejs e Git.

Se queste dipendenze di sistema sono soddisfatte, come tutti i pacchetti npm da un terminale devi solo eseguire il comando: npm install -g bower (probabilmente da super utente se sei su un sistema Linux).

Ora hai a disposizione il nuovo comando bower globalmente (grazie all’opzione -g), con cui puoi gestire le dipendenze di qualunque tuo progetto. Nota di nomenclatura: da qui in avanti useremo i termini libreria, dipendenza e componente come sinonimi. Bower infatti usa il termine components per indicare i pacchetti installati.

Inizializzare il progetto: il file bower.json

Posizionati all’interno della cartella del progetto a cui stai lavorando e se non hai ancora un file bower.json, inizializzalo eseguendo il comando: bower init.

Un semplice wizard ti chiederà alcune informazioni (tra parentesi ci saranno i suggerimenti di Bower di default) con cui compilare il file bower.json (un semplice file di testo in formato JSON, modificabile in seguito), eccole nel dettaglio:

  1. name – Nome del progetto;
  2. version – Versione del progetto (ti consiglio di usare sempre un versionamento semantico, per cui inizia pure con 0.0.0);
  3. description – Una breve descrizione del progetto;
  4. main file – Il file principale del progetto, nel tuo caso potrebbe essere main.js, anche se in realtà ha un significato particolare legato al concetto di modulo;
  5. what type of modules… – Non scegliere nulla e premi Invio, si tratta di opzioni utili quando si sta sviluppando una libreria, non una semplice applicazione web come nel tuo caso;
  6. keywords – Inserisci qualche tag che rappresenti il tuo progetto, separate da virgole;
  7. authors – Se hai settato correttamente la configurazione globale o locale di git, basta premere Invio, altrimenti scrivi pure una lista di autori con questo formato: NOME COGNOME <EMAIL>;
  8. license – Il nome della licenza con cui vuoi rilasciare il codice, la scelta predefinita (MIT License) va benissimo;
  9. homepage – L’eventuale sito di riferimento del progetto;
  10. set currently installed components… – Va bene la scelta predefinita (Y);
  11. add commonly ignored files… – Va bene la scelta predefinita (Y);
  12. would you like to mark this package as private… – A meno che tu non voglia successivamente pubblicare il tuo progetto nel repository centrale di Bower, digita “y” (attento, che non è la scelta predefinita).

A questo punto vedrai una preview del file bower.json che verrà creato. Ci sono tutte le informazioni inserite, se sono corrette conferma la scelta con Invio. Vedrai apparire nella cartella il nuovo file. Si tratta di semplice testo in formato JSON, quindi puoi modificarlo a piacere quando vuoi, mantenendone però la struttura.

Personalizzare Bower: il file .bowerrc

A parte le informazioni inserite nella fase di inizializzazione, tutte le opzioni di configurazione di Bower hanno dei valori di default, per esempio la directory in cui vengono salvate le dipendenze del tuo progetto si chiama bower_components/. Trovi tutte le opzioni e tutti i valori di default nella relativa pagina della documentazione ufficiale.

Per sovrascrivere i valori predefiniti devi solo creare un altro file JSON nella tua cartella di progetto con nome .bowerrc (il punto iniziale è importante!): tutte le opzioni che indicherai qui sovrascriveranno quelle di default. Per cambiare il nome della cartella delle dipendenze, per esempio, scrivici dentro questo:

Ora i bower components saranno salvati nella cartella vendor/ e non in bower_components/.

Installare una libreria

Finalmente sei pronto per installare la tua prima libreria. Il tuo progetto prevede l’uso dell’ultima versione di d3js? Verifica che sia pubblicata sul repository di Bower (lo è) e poi è questione di un solo comando: bower install d3 --save.

Avresti avuto lo stesso identico risultato indicando direttamente il repository Github ufficiale del progetto d3js:  bower install --save mbostock/d3.

Bower usa il proprio indice centralizzato per fornire dei nomi semplici da ricordare agli sviluppatori, ma fisicamente le librerie sono su Github. O da qualsiasi altra parte, l’importante è che il pacchetto sia accessibile via Internet mediante un URL pubblico.

Di per sé il comando bower install [pacchetto] si limita a scaricare i file necessari nella cartella dei componenti (bower_components/ o vendor/ a seconda della propria configurazione). Se vuoi invece indicare esplicitamente questa libreria come dipendenza del tuo progetto (senza non funzionerebbe!), devi usare l’opzione –save: Bower aggiornerà il file bower.json aggiungendo la libreria nella sezione dependencies con anche l’indicazione della versione (che puoi modificare a piacere, se serve).

Cosa accade eseguendo bower install senza indicare alcun pacchetto? Bower va a leggere il file bower.json e prova a installare tutti i pacchetti indicati nella sezione dependencies, rispettando le indicazioni di versione. Se ci sono aggiornamenti e sono compatibili con il progetto, aggiorna anche le librerie. Ecco perché non serve impacchettare anche le dipendenze insieme a un progetto, è sufficiente il file bower.json: avere tutto funzionante è questione di un bower install!

Ora che le librerie che ti servono sono al loro posto, non ti resta che farle caricare dal browser a partire dal file index.html insieme al tuo codice che ne fa uso. Nella prossima unità vedrai come farlo in pratica e come navigare la tua applicazione anche se non è ancora effettivamente accessibile via Internet.

Letture: 642