Bower, il package manager per il Web

Nella guida su Node.js abbiamo visto che a corredo dell'interprete JavaScript è presente uno strumento per gestire i pacchetti e le loro dipendenze: NPM. Esso è uno strumento fondamentale per realizzare qualsiasi tipo di progetto, anche il più piccolo, basato appunto su Node.js. Abbiamo librerie che ci aiutano ad implementare Web Socket, librerie di utilità comune che migliorano le API del linguaggio, librerie per creare applicazioni web struttando il pattern MVC e molto altro ancora.

Bower introduce una caratteristica non presente in NPM ovvero la possibilità di gestire le dipendenze Web di applicazioni esclusivamente front-end. In questo caso non dobbiamo preoccuparci di librerie di basso livello, ma è necessario concentrarci su librerie più specifiche proprio perchè l'applicazione non verrà eseguita in un contesto Node.js ma all'interno di un browser. Tramite Bower possiamo infatti ottenere facilmente librerie come jQuery, Bootstrap, AngularJS, Knockout o Ember.js.

Bower gestisce alberi di dipendenza semplici, con livelli singoli proprio perchè, in ambito web, abbiamo bisogno di librerie complete, che non dipendano da ulteriori pacchetti. A loro volta le librerie potranno avere dipendenze ma la versione che otterremo tramite Bower è una build completa di tutto, pronta ad essere inclusa nelle nostre pagine.

Utilizzando Bower abituiamoci a pensare che i termini "libreria" e "pacchetto" convergono verso lo stesso significato.

JavaScript Power Tools

Bower fa parte di una serie di "Power tools" che permettono di affrontare lo sviluppo front-end di applicazioni single page, mobile o comunque di app moderne adottando un approccio più strutturato, quasi "enterprise". Ne parla bene Marcello Teodori in questo video:

Installare Bower

Bower, come qualsiasi strumento basato su Node.JS che si rispetti, viene installato tramite NPM. Basterà quindi, dopo aver installato il runtime, lanciare:

npm install -g bower

Per chi non lo sapesse, l'opzione -g permette di installare un pacchetto globalmente sulla macchina e non all'interno di un progetto specifico. Questo permette di avere bower a disposizione ovunque senza doverlo reinstallare ogni volta e soprattutto ci offre un eseguibile, bower appunto, in grado di eseguire una serie di comandi per gestire le dipendenze.

Per utilizzare al meglio bower è necessario avere anche una installazione di git poiché la maggior parte delle librerie che utilizzeremo si trova su GitHub.

L'ultima versione al momento disponibile è la 1.2.8, e sarà su questa versione che svilupperemo l'articolo.

Bower, i comandi principali

Il comando principale disponibile in Bower è install che permette ovviamente di scaricare una dipendenza dal web. Invocando il comando senza parametri:

bower install

installeremo in automatico tutte le dipendenze definite nel file descrittore di progetto (bower.json), mentre facendo seguire al comando il nome di un pacchetto lo installeremo:

bower install jquery

Tramite una sintassi particolare possiamo forzare una precisa versione della libreria (in automatico bower sceglie la più alta) oppure possiamo rinominare il pacchetto.

Abbinati al comando install abbiamo anche a disposizione i comandi update e unistall, che servono rispettivamente ad aggiornare o rimuovere un particolare pacchetto.

Una volta installate, le librerie, vengono salvate all'interno del nostro progetto nella cartella bower_components, subito disponibili per essere incluse nelle nostre pagine HTML. Per ottenere invece l'elenco delle librerie installate basta un semplice:

bower list

Un'opzione utile del comando list è path che permette di avere il percorso preciso di quali file dobbiamo includere in pagina:

bower list --path

in questo caso ritornerà:

{
"jquery": "bower_components/jquery/jquery.js"
}

Da questo evinciamo che per includere jquery nella pagina HTML dovremo scrivere:

<script src="bower_components/jquery/jquery.js" type="text/javascript"></script>

Oltre a questi comandi abbiamo ovviamente anche un comando per la ricerca dei pacchetti disponibili:

bower search jquery

Spesso questo comando risulta inutilizzabile perchè i risultati che trova sono molteplici ed è facile confondersi e includere il pacchetto sbagliato, soprattutto quando si tratta di librerie molto diffuse.

In questo caso il comando info può tornare utile per ottenere maggiori informazioni su un certo pacchetto.

Definizione di un package descriptor

All'interno di un progetto che utilizza bower per la gestione delle dipendenze è buona norma definire un file di progetto, in modo simile a quanto si fa definendo il file package.json per NPM. In questo caso il file, come visto in precedenza, deve chiamarsi bower.json ed ha una struttura formale simile al suo fratello package.json. Per crearlo abbiamo due alternative: tramite un editor testuale o utilizzando il comando interattivo init. Il suggerimento è quello di partire con quest'ultimo comando ed eventualmente introdurre modifiche aggiuntive manualmente.

Ciascun progetto dovrà quindi avere un nome, una versione, alcune dipendenze sia per il runtime che per il building, un flag per definire se un progetto è pubblico o meno e altri campi autodescrittivi. Ecco un esempio del file che utilizzo per il nostro progetto di prova:

{
	name: 'prova HTML.it', version: '0.0.1',
    authors: ['Alberto Bottarini <alberto.bottarini@gmail.com>'],
	description: 'Progetto di prova per HTML.it',
	main: 'index.html',
	keywords: ['html.it', 'jquery', 'demo'],
	license: 'MIT',
	homepage: 'http://www.html.it',
	private: true,
	ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests']
}

Uno dei vantaggi nell'avere un descrittore di progetto è quello di poter condividere il progetto senza dover fornire le dipendenze: basterà lanciare il comando install senza parametri per scaricare in automatico tutte le dipendenze descritte.

Registrare un nuovo pacchetto

Ovviamente l'elenco dei pacchetti è gestito dalla comunità degli sviluppatori, quindi chiunque utilizzi Bower può registrare un nuovo pacchetto rendendolo di fatto disponibile a tutti gli altri sviluppatori. La documentazione ufficiale prevede 3 vincoli sulla registrazione:

• Deve esistere un file descrittore di progetto
• Il pacchetto deve essere reso disponibile su un server Git
• Il versionamento deve seguire il Semantic Versioning e devono essere creati tag per ciascuna versione

Se tutti i punti sono rispettati possiamo registrare un pacchetto con:

bower register nome-pacchetto url-git-pacchetto

Al momento non è disponibile nessun comando per la rimozione di un pacchetto registrato. A fronte di eventuali errori o modifiche è comunque possibile scrivere agli amministratori del registro tramite una issue su GitHub.