Bower: gestire le dipendenze in JavaScript

Costruire un’applicazione in JavaScript significa anche, nella stragrande maggioranza dei casi, appoggiarsi a librerie o utilizzare framework per rendere il lavoro più semplice, flessibile, estendibile, ed eventualmente modificabile da altri sviluppatori.

Per includere le dipendenze normalmente dobbiamo navigare nei vari siti del software che vogliamo utilizzare, cercare un link per il download (o per l’inclusione via cdn), e poi costruire l’albero delle cartelle in cui collocarli. Tramite Bower, un package manager progettato per JavaScript, possiamo rendere tutto il procedimento più veloce ed efficiente.

Installazione

Prima di installare Bower abbiamo bisogno di tre software: Node.js, npm e Git. Di norma i primi due vengono installati insieme o tramite linea di comando (per i sistemi unix-Like) o con un apposito installer a interfaccia grafica (sia per windows che per OSX): i dettagli di questo procedimento si possono trovare nella pagina ufficiale di Node.js. Anche per Git, il più famoso software per il controllo diversione distribuito, valgono le stesse possibilità. In sintesi, nessuno dei prerequisiti tecnici dovrebbe porre particolari difficoltà.

Quando li avremo tutti e tre a disposizione possiamo installare via terminale Bower globalmente per averlo a disposizione per ogni cartella nella quale creeremo i nostri progetti:

npm install -g bower

Installare i pacchetti

Bower può essere utilizzato in modo molto immediato con il comando install. Ad esempio per includere jQuery nel nostro progetto ci collochiamo prima all’interno della cartella di lavoro, e poi lanciamo il comando:

bower install jquery

In questo caso il nome del pacchetto era ovvio, ma per essere sicuri possiamo utilizzare il comando search, oppure la pagina web dedicata all’elenco dei pacchetti disponibili.

con il comando search otterremo come output una lista leggermente più complessa, poiché di ogni pacchetto che corrisponde alla ricerca viene mostrato il nome e l’indirizzo github, ed entrambe le diciture possono poi essere utilizzate per eseguire l’installazione.

È poi interessante notare che con Bower possiamo installare pacchetti in remoto tramite l’URL, l’abbreviazione GitHub nella forma autore/pacchetto (ad esempio desandro/masonry), o l’endpoint di Subversion (un altro famoso software per il versioning); ma possiamo installarli anche da locale, indicandone semplicemente il percorso.

Facendo seguire a questa indicazione il simbolo # abbaiamo la facoltà di specificare anche una versione specifica del componente da installare, come ad esempio

bower install bootstrap#2.2

In tutti questi casi viene creata una cartella denominata bower_components nella quale ritroveremo i software richiesti all’interno di sottocartelle col nome del pacchetto. Possiamo includerli direttamente con un tag di questo tipo:

<script src="bower_components/jquery/dist/jquery.min.js"></script>

Il file bower.json

Bower non necessita di un file di configurazione per poter girare correttamente, ma potrebbe essere utile averlo comunque a disposizione. Una struttura minimale del file bower.json potrebbe essere la seguente:

{
  "name": "progetto-prova ",
  "description": "Progetto di prova per Bower",
  "version": "1.0.0"
}

Quali sono i vantaggi di aver incluso il file bower.json nella root del nostro progetto? Con questo strumento Bower può tenere traccia di tutte le dipendenze incluse e della loro versione. Se vogliamo aggiornarle tutte all’ultima release sarà sufficiente il comando

bower update

Non è inoltre necessario aggiornare a mano questo file di configurazione, può occuparsene lo stesso Bower, tramite il flag –save al momento dell’installazione di un pacchetto. Proviamo, ad esempio, a digitare il comando

bower install DataTables -save

Il risultato è molto interessante: non solo Bower ha scaricato DataTables nel percorso che abbiamo già visto, ma si è occupato anche di scaricare le sue dipendenze (nella fattispecie jQuery), e ha aggiornato il file json per tenere conto delle librerie installate con le relative versioni.

Esiste anche un comando uninstall che consente di rimuovere il componente. Applicandogli il flag –save, la dipendenza verrà rimossa anche da bower.json:

Bower uninstall DataTables -save

Integrazione con Grunt

Bower e Grunt (ma anche altri strumenti di automazione) possono lavorare molto bene insieme. Una delle prime funzionalità che potremmo desiderare è quella di unire in un unico file tutti gli script e i relativi fogli di stile che abbiamo incluso.

Se non abbiamo ancora installato Grunt o comunque non sappiamo come usarlo possiamo seguire questa guida. Non ci resta che installare il plug-in grunt-bower-concat:

npm install grunt-bower-concat --save-dev

includerlo nel gruntfile.js, inserendo la riga

grunt.loadNpmTasks('grunt-bower-concat');

elencandolo nei compiti da eseguire ogniqualvolta digitiamo grunt a terminale:

grunt.registerTask('default', ['bower_concat']);

e infine inserire i dati di configurazione, in particolar modo la destinazione dei file js e css creati da Grunt leggendo all’interno dei pacchetti scaricati. Un esempio di configurazione potrebbe essere:

bower_concat:{
  all: {
    dest: "src/js/vendor/bower.js",
    destCss: "src/css/vendor/bower.css"
  }
},

Eseguendo il comando grunt, o automatizzandolo con , possiamo inserire tutti i componenti con due soli tag nella head della pagina html:

<link rel="stylesheet" type="text/css" ref="src/css/vendor/bower.css">
<script src="src/js/vendor/bower.js"></script>

Conclusione

Bower consente allo sviluppatore di risparmiare molto tempo nella predisposizione di un progetto, e anche di essere sempre aggiornati evitando le versioni obsolete delle librerie.

Unendolo a Grunt il workflow dello sviluppatore si snellisce e razionalizza, e diventa più semplice anche il lavoro in team su applicazioni più complesse.

Completando la propria "cassetta degli attrezzi" con un strumento per la predisposizione automatica di "impalcature" di base per certe tipologie di progetti (il cosiddetto scaffolding) come Yeoman, predisporremo un ambiente di lavoro veramente professionale per lo sviluppatore frontend.