Approccio Agile: bootstrapping del full-stack applicativo

Uno dei requisiti fondamentali nel processo di sviluppo di applicazioni web `e la possibilit`a di sviluppare velocemente applicazioni di qualit`a. A questo scopo node.js offre alcuni moduli che possono aiutare lo sviluppatore a generare una struttura iniziale per il progetto (bootstrapping), che pu`o essere poi facilmente estesa o modificata a seconda delle esigenze. Se il bootstrapping dell’applica- zione parte da una buona base, si hanno gi`a disponibili molti dei servizi e delle infrastrutture utilizzate nella maggior parte delle applicazioni, come ad esempio il servizio per l’autenticazione utente, la struttura delle API, la suddivisione archi- tetturale di client e server in MVC. Oltre a tutto questo, spesso il template usato per la generazione sceglie gi`a gran parte dei framework e delle piattaforme lato client e lato server, basandosi sui “best-seller” presenti nel mondo del web, come ad esempio il MEAN stack.

80 4. SVILUPPO DELLA WEB APPLICATION

Yeoman

Nel nostro caso il tool usato per la generazione dell’architettura di base per il progetto, `e Yeoman. Yeoman `e una utility node.js composta da tre differenti pacchetti, ognuno con differenti funzioni: yo, utilizzato per generare lo scheletro applicativo sulla base di un template, bower per gestire le dipendenze dell’ap- plicazione client, e grunt che tra le altre funzionalit`a, permette anche di lanciare un’istanza dell’intera applicazione in locale. Yo offre allo sviluppatore la possibi- lit`a di scegliere tra tanti differenti generatori gi`a ampiamente utilizzati e recensiti, al posto di crearne direttamente uno nuovo. Dato che l’applicazione web che vogliamo realizzare `e piuttosto standard, si `e scelto di utilizzare il pi`u comune generatore MEAN, per essere certi di mantene aderenza agli standard e alle best practices in voga nel mondo dello sviluppo web: angular-fullstack-generator.

Il generatore: angular-fullstack-generator

Come anticipato, il generatore permette di fare bootstrapping applicativo di un’applicazione basata sul MEAN stack. L’architettura iniziale proposta dal ge- neratore `e piuttosto semplice: per prima cosa c’`e una netta suddivisione tra l’ap- plicazione angular e l’applicazione node, che vengono separate in due differenti cartelle, rispettivamente client e server. Per ognuna delle due applicazioni le li- brerie utilizzate sono definite come dipendenze all’interno di due differenti file JSON: package.json include tutte le dipendenze dell’applicazione node, mentre bower.json quelle per l’applicazione angular. Il generatore utilizza nativamente molte librerie e componenti. Le principali sono, per la parte server:

• express middlewares. I middlewares sono utilizzati da express.js per arric- chire le proprie capacit`a. Le librerie body-parser cookie-parser sono

4.1 TECNOLOGIE UTILIZZATE 81

utilizzate ad esempio per consentire la lettura e la manipolazione dei cookie e del json inviato nel body delle request.

• jsonwebtoken. Il modulo `e utilizzato per la gestione dell’autenticazio- ne token-based, attraverso la quale il server garantisce l’accesso ai client autenticati tramite una stringa cifrata scambiata come stringa JSON.

• passport.js. Passport `e usato sempre pi`u spesso quando occorre gestire l’autenticazione. Supporta sia l’autenticazione basata su un database loca- le, che l’autenticazione da un provider di terze parti con protocollo oAuth (Google, Twitter, Facebook, etc). All’interno dell’applicazione possono es- sere gestite le varie forme di autenticazione sotto forma di differenti “au- thentication strategies”, ognuna delle quali supporta parametri ad-hoc per la configurazione sulla base del provider utilizzato.

• mongoose. Mongoose `e un Object Data Manager (ODM) per l’interazio- ne con la base di dati, che nel sistema `e appunto un’istanza di mongoDB. Mongoose d`a la possibilit`a di modellare semplicemente gli schemi delle dif- ferenti entit`a utilizzate nell’applicazione, definendo i tipi di dato e i vincoli sui differenti campi. Oltre a questo fornisce un insieme completo di API non soltanto per fare le operazioni di CRUD sulle entit`a, ma anche per de- finire metodi di istanza o statici che possono essere utilizzati per arricchire le funzionalit`a del modello dell’entit`a rappresentata.

• socket.io. `E una libreria che consente di sfruttare ad alto livello il proto- collo di comunicazione Web Socket, basato sullo scambio di messaggi. Il modulo server prevede ovviamente un corrispettivo client, che deve essere implementato nella web app per la ricezione delle notifiche in tempo reale. Il modulo sar`a inoltre usato per la comunicazione con il device.

82 4. SVILUPPO DELLA WEB APPLICATION

Oltre al modulo client di socket.io, i principali componenti utilizzati dal genera- tore in aggiunta ad angular sono:

• Bootstrap. Bootstrap `e uno dei componenti pi`u popolari per la realizzazio- ne di applicazioni responsive: non si tratta di una libreria Javascript, bens`ı di un framework CSS estendibile, che offre un’ottima base di partenza per lo sviluppo di pagine web HTML. Ha la caratteristica di essere responsivo e d`a la garanzia che le applicazioni web sviluppate seguendo i suoi principi base siano fruibili anche da dispositivi mobili.

• Bootstrap-UI. Questo modulo, sviluppato dai creatori di angular.js, contie- ne un’ampia gamma di directives angular per la creazione e gestione di com- ponenti grafici complessi implementati seguendo i princ`ıpi di Bootstrap, come ad esempio datepickers, timepickers o dropdown lists.

4.2 Progettazione delle API

Le API che l’applicazione express deve fornire al client angular dovranno ave- re le seguenti caratteristiche: in primo luogo la firma deve essere REST-oriented e semanticamente significativa, in quanto rappresenta l’interfaccia del metodo che si andr`a a sfruttare dal client, in secondo luogo occorrer`a proteggere adeguata- mente l’utilizzo delle API utilizzando opportuni meccanismi di autenticazione e autorizzazione.