In questa guida scoprirai come gestire il Frontend di un progetto software con Bower, un tool gratuito, utilizzato per lo sviluppo web.
di Antonio Lamorgese
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 bower3. 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.
