Bower: Un gestore di pacchetti per lo sviluppo web professionale

Dopo averti presentato la mia guida su ā€œCome diventare un Full Stack developerā€, oggi ti spiegherĆ² come gestire il Front-end di un progetto software con Bower. Questo fantastico strumento ti permetterĆ  di monitorare e tenere aggiornate tutte le librerie javascript, cioĆØ le cosiddette dipendenze, utilizzate nel tuo progetto web.

1. PerchƩ utilizzare Bower

Durante lo sviluppo di un applicativo web, prima o poi, lo sviluppatore si viene a trovare nella condizione di aggiornare le varie librerie Javascript utilizzate per lā€™intero progetto software. Questa operazione di aggiornamento ĆØ abbastanza complicata, cioĆØ, monitorare le versioni piĆ¹ o meno aggiornate delle librerie utilizzate ĆØ unā€™operazione tuttā€™altro che semplice. Bower ĆØ un package manager, capace di monitorare e gestire in automatico tutte le dipendenze per lā€™intero progetto.

Sono sicuro che come sviluppatore sarai sempre alla ricerca di strumenti che ti aiutino nella gestione e nella stesura di un progetto web. Beh, Bower, potrebbe fare senzā€™altro al caso tuo.


LEGGI ANCHE: SVN & GIT: Il controllo di versione del codice sorgente


2. Come installare Bower

Bower ĆØ uno strumento opensource, quindi ĆØ gratuito, e per poterlo installare hai bisogno di Node, Npm e GIT. Se non hai mai avuto a che fare con questi programmi, beh penso sia arrivato il momento di familiarizzare con questi software che rappresentano, oggi, il massimo nel settore dello sviluppo di web app professionali.

Ad ogni modo, leggendo questa guida, potrai renderti subito conto che, installare Node e creare una tua prima web app, ĆØ un gioco da ragazzi. Una volta scaricato e installato Node, non ti resta altro che installare Bower digitando ed eseguendo questo comando da Terminale o Prompt dei comandi Windows:

npm install -g bower

3. I comandi principali di Bower

Bower, ĆØ uno strumento a riga di comando, quindi, per poterlo utilizzare faremo ricorso a comandi da digitare da terminale Linux, nel caso in cui il nostro ambiente di sviluppo lavorasse con una delle sue distribuzioni, o prompt dei comandi in ambiente Windows. Quindi, prima di invocare uno dei tanti comandi disponibili Bower, devi spostarti nella cartella dove risiede il tuo progetto web e da quel momento in poi ogni volta che invochi un comando bower, la dipendenza specificata verrĆ  installata allā€™interno del tuo progetto.

Ma esattamente ā€œCome e dove vengono salvate tutte le dipendenze o librerie scaricate da GitHub ĆØ rese disponibili per il tuo progetto web?ā€ In effetti, Bower non mette mano direttamente ai nostri file html, perchĆ© sono questi i file che Bower dovrebbe modificare per caricare le dipendenze. Ma creerĆ  una cartella, sotto la root principale del progetto web, chiamata bower_components, quindi, ogni volta che invochiamo uno qualsiasi dei comandi, Bower, popolerĆ  questa cartella con tutti i file relativi alle dipendenze caricate precedentemente con il comando install.

Install, ĆØ il comando principale in Bower. Esattamente come npm di Node, il comando install ci permetterĆ  di scaricare, da GitHub, e installare tutte le dipendenze richieste. Ad esempio con questo comando: ā€œbower install jqueryā€, installeremo lā€™ultima versione della libreria jquery, che come ben saprai, ti permette di gestire il DOM di una pagina html, cioĆØ lā€™albero degli oggetti presenti in una pagina html, con grande flessibilitĆ .

Adesso ci sorge una domanda: ā€œCome fa Bower a importare tutte le dipendenze in una pagina html?ā€ Beh, come ho anticipato precedentemente, Bower, al momento dellā€™invocazione del comando install, crea una sotto cartella chiamata bower_components, sotto la root del progetto.

Quindi, ad esempio, con questo comando: ā€œbower install jqueryā€, bower scarica e copia allā€™interno della cartella bower_components, tutti i file richiesti per il corretto funzionamento di jquery.

A questo punto, lo sviluppatore, non deve fare altro che importare, nella sua pagina html, la libreria di jquery scaricata precedentemente con bower, inserendo nella sezione head il seguente comando html:

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

Adesso, per quanto riguarda jquery, non dobbiamo piĆ¹ preoccuparci di gestire e monitorare eventuali aggiornamenti che questa libreria subirĆ  nel tempo. Infatti, basterĆ  digitare il comando: ā€œbower updateā€, per aggiornare tutte le dipendenze caricate nella cartella bower_components, in un colpo solo e senza apportare alcuna modifica ai file html che ne fanno uso.


LEGGI ANCHE: Sviluppa la tua prima web app con Node.JS


4. Conclusione

Bower, ĆØ uno strumento indispensabile, per chi sviluppa applicazioni web professionali. Non a caso, si ĆØ guadagnato la fama di essere il miglior package manager per il web.

Bower ĆØ uno dei cosiddetti ā€œPower toolsā€, cioĆØ uno strumento, che ti permettono di affrontare lo sviluppo front-end di applicazioni web, mobile e single page application adottando un approccio di tipo professionale. In questo breve video tutorial puoi seguire e capire le straordinarie funzionalitĆ  di Bower applicate allo sviluppo di applicazioni web moderne.

Capire e utilizzare Bower

Antonio Lamorgese

Amministratore di rete e sviluppatore. Dopo anni di esperienza nel settore, ho ideato un sistema di gestione dati MYSQL in PHP senza scrivere una sola riga di codice. Scopri di piĆ¹....