Comprendi Bower e Semplifica il tuo Lavoro

Ormai non dovrebbe essere un segreto, su questo blog ci piace tanto pubblicare approfonditi tutorial quanto presentazioni di strumenti che ti aiuteranno a migliorare la vita dello sviluppatore front end e oggi non è diverso...

Da sempre lo sviluppatore front end viene classificato come “il cugino geek che conosce HTML e CSS”, la verità è che mentre il web si aggiorna e aggiunge sempre nuove interazioni soltanto chi è in grado di restare al passo con i tempi può continuare a definirsi uno sviluppatore.

Siamo onesti, il web è incredibilmente cambiato dalle prime pagine in bianco e nero che venivano scambiate durante la sua nascita; ad oggi creare un sito web, uno fatto bene, richiede conoscere anche linguaggi di scripting come JavaScript che grazie all’avvendo del HTML5 ad oggi abbiamo delle API che ci permettono di interagire semplicemente con gli elementi delle nostre pagine.

Però oggi non ti spiegherò tutto questo, oggi voglio parlarti di uno strumento che ti permetterà di unire tutti i tasselli del tuo progetto e di concludere più velocemente il tuo lavoro. Se poi vuoi approfondire il linguaggio JavaScript, puoi sempre seguire il corso gratuito su skillsAndMore.

Come detto, oggi non andremo a scoprire qualche libreria particolare che sia questa per JavaScript o per Sass; oggi voglio presentarti uno strumento da riga di comando che ti permetterà di configurare e modificare il tuo progetto senza doversi preoccupare di dipendenze e percorsi.

Non ti voglio tenere sulle spine, in fin dei conti il nome di questo strumento lo conosci già dal titolo, ma quello che vorrei fare è aiutarti a sentire quanto ti potrà essere utile prima ancora di farti conoscere come potrai utilizzarlo.

Perché conoscere Bower

bower

Ti è mai capitato di iniziare da zero un sito web? Ultimamente esistono molti framework che offrono un jump start, ma mettersi a progettare la struttura tecnologica di un sito web è una pratica molto interessante perché ti permetterà di comprendere immediatamente come andrai a costruire il sito o app. Saprai se ci sono librerie da installare, framework da utilizzare e ti sarai organizzato anche la struttura del tuo progetto.

Ovviamente una volta terminata questa analisi avrai selezionato con cura tutte le risorse che ti serviranno. Giusto per fare prima proviamo ad immaginarci la struttura del nostro progetto, per me suona qualcosa come:

Questa è la struttura più semplice alla quale possiamo pensare sopratutto perché ad oggi dovresti conoscere il task runner Grunt e il sistema di controllo versione Git che ti permettono di lavorare in modo molto più semplice.

Se non hai idea di cosa fanno queste due tecnologie diciamo che con Grunt sarai in grado di compilare il tuo codice Sass e generare nuovi CSS mentre la seconda è incredibilmente utile per collaborare con altri sviluppatori o anche per tenere traccia del proprio codice.

Come puoi notare tu stesso, a prima vista sembra che tutto sia pronto alla partenza.

Bisogna soltanto andare su https://angularjs.org/, scaricare un archivio .zip, scompattarlo, copiarlo all’interno della cartella js/lib/ all’interno del progetto; andare su http://getbootstrap.com/, scaricare un archivio .zip, scompattarlo, copiarlo all’interno delle cartella js/lib/ e css/; andare su https://fortawesome.github.io/Font-Awesome/, scompattarlo, copiarlo all’interno del progetto…

Immagino quanto sia stato noioso leggere la frase precedente. Adesso prova a pensare per un attimo a quanto tempo perdi a fare queste cose, parecchio non credi?

Ebbene quello che fa Bower è proprio semplificare questo lavoro ripetitivo e come diciamo spesso all’interno dei nostri webinar, ogni lavoro ripetitivo deve essere automatizzato ;) In fin dei conti non è proprio questo lo scopo della tecnologia?

Come installare Bower

È diverso tempo ormai che ti consiglio di smettere di usare Windows e passare a una distribuzione Linux o un qualsiasi Mac, almeno per il computer all’interno del quale vuoi lavorare. Ti dico questo perché questa, come le altre soluzioni e buone pratiche che ti abbiamo presentato, è una tecnologia che funziona su questi due sistemi operativi.

Windows, buono o cattivo che sia, semplicemente non è riuscito a mantenere il passo sugli sviluppi tecnologici che riguardano la programmazione per il web e per questo motivo ti consiglio di non utilizzarlo per il tuo lavoro. In fin dei conti Bower, come Grunt, sono applicazioni che devono essere eseguite nella riga di comando (all’interno del tuo terminale) e quella offerta da Windows non è dello stesso tipo; riuscire a configurarla per lavorare con queste tecnologie è veramente noioso.

Se sei alla ricerca di altri motivi per i quali consideriamo Linux migliore di Windows per lo sviluppo web, puoi approfondire con il webinar che Eugenio e Daniele hanno fatto su questo argomento.

Adesso che ho fatto il mio piccolo disclaimer sui motivi per i quali non utilizzare Windows per lo sviluppo web andiamo a vedere come poter installare questo package manager.

Ci sono alcune dipendenze da rispettare ma se hai già installato Grunt sei a cavallo, questo significa che sul tuo sistema è già installato Node, npm e Git. Se usi Mac e vuoi una piccola dritta, dopo l’aggiornamento a El Capitan ho avuto alcuni problemi e ho risolto molti dei grattacapi lasciando che sia Homebrew ad installare molte delle applicazioni che utilizzo per lo sviluppo, Node compreso.

A questo punto non ci resta altro che scoprire con quale comando installare Bower:

Niente di più semplice, una singola riga e il gioco è fatto; adesso sei pronto ad arricchire la struttura del tuo progetto con i file che bower porterà all’interno del tuo progetto. Tutto quello che devi fare è entrare nella cartella del sito che stai sviluppando, nel nostro esempio la cartella prenderà il nome di progetto/, e digitare quanto segue per installare la più recente versione di AngularJS:

Lanciato questo comando non dovrai far altro che metterti comodo e attendere la fine delle operazioni. Quando il tuo terminale sarà di nuovo pronto a ricevere un nuovo comando, non dovrai far altro che entrare nella cartella del tuo progetto per trovare la nuova cartella bower_components/ che conterrà l’ultima versione del framework AngularJS.

Ecco fatto, in un colpo solo abbiamo scaricato il framework e lo abbiamo inserito all’interno della cartella del nostro progetto. A questo punto, per usarlo, non ti resta altro da fare che collegare il file angular.js o meglio ancora angular.min.js (che per brevità ho nascosto) e potrai arricchire le tue pagine HTML con il codice di questo framework.

Comprendo che probabilmente stai pensando: tutto qui?

Come spesso è già successo all’interno di questo sito le soluzioni iniziali possono sembrare molto semplici ma con Bower possiamo fare molto di più e per questo motivo ti consiglio di leggere la prossima sezione.

Consigli avanzati per Bower

consigli-bower

Avviciniamoci alla conclusione dell’articolo aggiungendo qualche consiglio avanzato per utilizzare questa interessante soluzione all’interno del proprio lavoro.

Tutto aggiornato!

La prima cosa che forse avrei dovuto dirti è che con Bower hai a tua disposizione un vero e proprio package manager. Se utilizzi Linux o OSX sono sicuro che conosci già questo termine; nel primo caso lo trovi come comando da terminale come apt-get, yum o dnf mentre per il secondo possiamo utilizzare App Store e il già citato (e consigliato) Homebrew.

Avere un package manager anche per i nostri progetti front end è utile sopratutto per mantenere aggiornate le proprie librerie e quindi poter lavorare anche con le ultime feature inserite. Pensa per un attimo che fatica sarebbe dover seguire gli aggiornamenti delle librerie scaricate, prendere lo .zip, scompattarle nelle cartelle dedicate e aggiornare i collegamenti all’interno del nostro progetto.

Con Bower tutto quello che dovrai fare è lanciare il comando bower update all’interno della tua cartella e avrai tutte le librerie aggiornate senza neanche dover modificare uno dei tuoi collegamenti; semplicemente perché anche se aggiornati i nomi dei singoli file rimangono gli stessi.

Ti confesso che non ho mai utilizzato molto Bower perché raramente mi trovo a dover mantenere un progetto per molto tempo, ma devo confessarti che il restyling di skillsAndMore e la necessità di rinfrescare i temi di tutto il network mi sta portando a pensare di creare un tema WordPress di partenza basato su Genesis che mi permetterà di dare forma a tutti i siti :D

Perché ho appena fatto questa considerazione? Credi che l’aiuto che mi può dare nel mantenimento delle mie librerie sia bastato a farmi venire questa idea?

Onestamente devo confessare che non è soltanto questa la caratteristica che mi incuriosisce ma anche la possibilità di poter creare facilmente dei temi a più mani condividendoli con i miei colleghi. Questa è già una cosa che sta prendendo piede in azienda, Eugenio e Daniele stanno sviluppando diversi plugin per WordPress e stanno collaborando moltissimo sugli stessi file; il problema è che dover portare un progetto da un computer ad un altro risulta una pratica molto dispendiosa in termini di MB.

Mantieni il progetto leggero

All’interno dei nostri progetti le cartelle node_modules/ e bower_components/ superano tranquillamente i 10MB. Questo è dovuto dal fatto che sia Bower che Grunt (attraverso il package manager npmincludono le librerie complete e appesantiscono moltissimo i nostri repository Git. Per evitare quindi di far scaricare dei progetti troppo pesanti, tutto quello che devi fare è inserire i nomi di queste cartelle all’interno del file .gitignore ed il gioco è fatto!

Beh ad essere onesto sei pronto soltanto per metà.

A questo punto avrai sì creato un repository molto leggero, ma i tuoi colleghi non saranno in grado di automatizzare il processo di installazione delle varie librerie. Per risolvere questo problema non devi far altro che lanciare un comando prima ancora di condividere il tuo progetto: bower init.

L’esecuzione di questo comando ti chiederà alcuni dettagli riguardanti il progetto e una volta che avrai risposto ai vari aspetti ti troverai il file bower.json all’interno della tua cartella. All’interno di questo file vengono contenute tutte le informazioni sulle librerie installate e configurate. A questo punto potrai passare questo file al tuo collega che non dovrà fare altro che lanciare bower install per lasciare che sia Bower a installare automaticamente tutte le librerie necessarie al progetto.

Aggiorna la configurazione

Capita molto spesso di modificare alcuni progetti in corso d’opera, magari perché la soluzione che avevamo scelto non risulta adatta allo scopo oppure semplicemente perché la risorsa che abbiamo selezionato non è più mantenuta…

Qualunque sia il problema non possiamo proseguire in questo modo. Per rimuovere una libreria installata con Bower non devi far altro che lanciare bower uninstall &lt;name&gt; (dove <name> dovrà essere sostituito con il nome del pacchetto che vogliamo rimuovere) per poi dedicarti all’installazione della nuova soluzione.

Così facendo manteniamo il nostro progetto pulito ma se hai già generato un file bower.json questo manterrà al suo interno le vecchie dipendenze e non vogliamo che i nostri colleghi diventino matti perché non utilizzano le risorse modificate. Per questo motivo, sia per quando usi install che uninstall, è necessario ricordarsi di utilizzare l’opzione --save-dev che ci permetterà di mantenere aggiornato questo file.

Tutto quello che è stato fatto è stato anche aggiornato per inostri colleghi con il file bower.json dove è stata modificata la riga che presenta le dipendenze del progetto rimuovendo angular e inserendo jquery:

Conclusioni

Ci sarebbe ancora molto altro da discutere per quanto riguarda Bower perché presenta moltissime integrazioni interessanti e sopratutto è possibile combinarlo con Grunt e Yeoman che sono entrambi strumenti che ci permettono di migliorare il nostro lavoro.

Oltre a questo ti lascio anche alla pagina di documentazione dove potrai approfondire i comandi che potrai utilizzare per migliorare ancora di più la conoscenza di questo strumento e alla potente pagina di ricerca che ti permetterà di conoscere tutte le librerie che potrai utilizzare grazie a questo strumento.

Prima di concludere però mi farebbe piacere scoprire da te quanto sia interessante questo argomento perché a essere onesto stavo proprio pensando di creare un corso su skillsAndMore dove delineare per bene i processi che potresti utilizzare per iniziare un qualsiasi dei prossimi progetti in modo da poter lavorare meglio e più velocemente.

Se hai voglia di condividere le tue opinioni non esitare a utilizzare il modulo che trovi qua sotto e non dimenticarti di condividere questo articolo con i tuoi colleghi, sono sicuro che ti ringrazieranno ;)

Lascia il tuo Pensiero

2 Responses to “Comprendi Bower e Semplifica il tuo Lavoro”

    • Andrea Barghigiani

      Eheheheheehehe ciao Walter, mi ha fatto molto sorridere il tuo commento :) L’articolo è tutta farina del mio sacco e probabilmente farei meglio a rispondere dicendo che ho un italiano tutto mio.

      Ovviamente ho riletto l’articolo più volte prima di mandarlo in pubblicazione e non ci ho visto frasi così personalizzate, diciamo che in questi anni di pubblicazione ho sviluppato un tono tutto mio. Se hai qualche feedback su come migliorare o la tua opinione su come mi sarei dovuto approcciare all’argomento mi farebbe piacere leggerlo, è sempre buono avere opportunità di migliorare.

      Grazie intanto per essere passato da queste parti ;)

      Rispondi