Personal tools
Come creare l'ambiente di sviluppo per le vostre applicazioni AngularJS

AngularJS rock!!

May 11, 2014

Come creare l'ambiente di sviluppo per le vostre applicazioni AngularJS

L'ecosistema di applicazioni che si crea attorno ad un framework è determinante per il suo successo. Vediamo assieme come creare l'ambiente giusto per AngularJS

Basta una semplice ricerca in rete per rendersi conto di quanto rapidamente si stiano diffondendo i framework JavaScript ispirati al pattern MVC, segno evidente di un WEB in continua evoluzione.

AngularJS tra questi è sicuramente uno dei più interessanti e attivi, probabilmente grazie anche alla sponsorizzazione di Google.

Anche se molto tentato, in questo articolo non mi soffermerò nella descrizione delle meraviglie promesse da AngularJS, mi concentrerò piuttosto sull’aspetto che riguarda la configurazione dell’ambiente di sviluppo.

La documentazione presente sul sito ufficiale è esaustiva, permette di partire subito con il piede giusto. Molte le risorse utili presenti nella sezione developer guide dove troviamo anche un paragrafo dedicato ai tool (Workflow).

 

Vediamo nel dettaglio cosa serve:
Ovviamente tutto dipende dalle caratteristiche dell'applicazione che si intende sviluppare, in ogni caso alcune esigenze sono comuni a molti progetti :

  • un ambiente isolato
  • un task runner
  • un package manager
  • i test

Prima di iniziare va fatta una premessa: la maggior parte degli strumenti di sviluppo web (front-end) si appoggiano a Nodejs. Vi consiglio quindi di prendere dimestichezza con questo tool sin dall'inizio, in particolare per quanto riguarda la gestione dei moduli.

Ambiente isolato (nodeenv)

Analogamente a quanto avviene per altri framework/linguaggi, come per esempio Python, per evitare spiacevoli sorprese in futuro è bene isolare il progetto.

Nodeenv è l'equivalente virtualenv per Nodejs. Permette di creare un ambiente Nodejs completamente separato dalle altre installazioni, confinato in una propria directory privo di librerie condivise.

L’installazione è molto semplice, basta lanciare un paio di comandi a console.
Nodeenv è scritto in Python, per coerenza quindi può essere anch'esso virtualizzato.

python:

virtualenv-2.7 --no-site-packages pythonenv
cd pythonenv

nodejs:

bin/pip install nodeenv
bin/nodeenv nodeenv
cd nodeenv
. bin/activate

l’applicazione AngularJS:

mkdir demo | git clone | svn checkout
cd demo

In merito alla struttura da utilizzare per i progetti AngularJS vi consiglio: la guida interna di Google, se avete intenzione di partire da zero oppure il seed se siete ormai github addicted.

Task runner (Grunt)

Molte azioni sono ripetitive e noiose come per esempio la minificazione, la compilazione, l'esecuzione dei test ecc. possono quindi essere automatizzate. Il ruolo svolto dal task runner è proprio quello di eseguire compiti ripetitivi al posto nostro.

Grunt è la tendenza del momento nonché la nostra scelta, ma altri strumenti appaiono già all’orizzonte come per esempio Gulp.

Anche in questo caso l’installazione è semplice, basta aggiungere la dipendenza al file package.json e impartire i seguenti comandi a console:

npm install
npm install -g grunt-cli

Consiglio comunque la lettura della documentazione ufficiale per meglio comprendere il processo di installazione in particolare la differenza tra grunt e grunt-cli.

Una volta installato è possibile configurare le attività da eseguire attraverso l’apposito file di configurazione Gruntfile.js.
Come ci si aspetta per i task più comuni esistono già molti moduli preconfigurati (plugin). Questi alcuni esempi:

Package manager (Bower)

Bower è semplicemente un gestore di pacchetti che ben si integra con Grunt.
Il vantaggio di Bower rispetto ad altri es: RequireJS è che può gestire pacchetti di diverso tipo, html, css immagini e non solo moduli JavaScript.

Ancora una volta l’installazione è molto semplice:

npm install -g bower

La gestione dei pacchetti può essere manuale:

bower install <package> 

oppure automatizzata attraverso l’apposito file di configurazione bower.json, in modo analogo a quanto  avviene per Nodejs e il file package.json.

Tip: l'opzione --save aggiunta in fase di installazione di un pacchetto aggiorna automaticamente anche il file bower.json:

bower install <package> --save

Conclusione

Ottimo ci siamo! Abbiamo completato la creazione del nostro ambiente di lavoro.
Manca in realtà la parte legata ai test, ma l'argomento e corposo quindi credo meriti un articolo dedicato, scusate non potevo ometterlo dalla lista. :)

Nota a margine se vi piacciono gli strumenti di scafolding, Yeoman di sicuro è il tool che fa per voi. Il mio consiglio comunque è di fare un po' pratica prima in the hard way.

Alla prossima

comments powered by Disqus