Uno degli enormi vantaggi dell’approccio API First è la netta separazione tra lo sviluppo Backend e quello Frontend.
La suddetta separazione consente uno sviluppo in parallelo da parte di più team di lavorare contemporaneamente, stabilendo semplicemente a monte la REST API (quindi ad esempio gli endpoint, le convenzioni da utilizzare sul formato JSON, etc..).

Lo sviluppo su AngularJS sposa perfettamente questo approccio favorendo la separazione tra Backend e Frontend.

É quindi molto utile poter realizzare il Frontend senza che sia effettivamente presente la REST API, e quindi degli effettivi endpoint ai quali far puntare le chiamate, e per farlo sarà necessario fornire dei mock al posto dei dati reali!

Per fare ciò in AngularJS ci faremo dare una mano dal servizio $httpBackend destinato ai test E2E del modulo ngMock.
Questo servizio non fa altro che interporsi tra le chiamate del servizio $http di AngularJS e i dati, catturando le chiamate http e lavorando quindi i mock che desideriamo a seconda della chiamata effettuata.

La cosa interessante inoltre è che potremo switchare facilmente il nostro progetto dalle REST API di produzione ai mock (e viceversa) con delle semplicissime operazioni!
Partiamo con l’esempio che ci chiarirà il tutto…

Come prima cosa è necessario che per il nostro progetto sia disponibile il modulo ngMockinstallabile via npm.

Una volta disponibile ngMock, sarà necessario creare il file BackendLess.js (il nome chiaramente non è determinante! :D), che via $provider.decorator arricchirà il nostro modulo delle caratteristiche che il servizio $httpBackend offre.
Abbiamo fatto questa scelta piuttosto che iniettarlo tra le dipendenze del modulo, in modo da poter includere o meno il file BackendLess.js nel progetto e quindi far puntare il progetto stesso sui mock piuttosto che sulla REST API reale.
N.B. Nel nostro caso l’inclusione o meno avverà in fase di  building degli script da parte del task runner Gulp (processo del quale parleremo alla fine).

Di seguito, creeremo il file BackendLessService.js per la gestione dei mock che verranno chiamati dal servizio $httpBackend.

Come potete notare, il servizio si occupa semplicemente di gestire un oggetto, prototipando i metodi utili per consentire di simulare il comportamento che avrebbero le chiamate agli endpoint della REST API.

Infine creiamo il file pageBackendLess.js, per la definizione dei mock di un’entità gestita dalla REST API che verrà realizzata dal team di sviluppo del Backend.
Nel nostro esempio mockiamo un’entità Pagina utilizzando il formato HAL (anche se parzialmente per brevità) per la definizione del JSON (quindi anche per il comportamento dei metodi del servizio BackendLessService).

Cosi facendo abbiamo tutti i pezzi che servono:

  • BackendLess.js – che consente di sfruttare $httpBackend per catturare le chiamate http, reindirizzandole quindi sui nostri mock “decorando” il mainmodule del progetto;
  • BackendLessService.js – che consente di manipolare i dati provenienti dai mock, simulando il comportamento che avrebbero gli endpoint della REST API;
  • pageBackendLess.js – che, per mezzo della definizione di un value di AngularJS sul mainmodule del progetto, definisce un oggetto JSON del nostro mock, oltre a definire i reindirizzamenti degli endpoint per $httpBackend (filtrati per regex).

Adesso siamo pronti per sviluppare il Frontend senza dover attendere che la REST API sia pronta da parte del team che si occupa del Backend!

Infine, come accennato prima, per consentire facilmente di includere o meno lo sviluppo BackendLess basterà includere o meno nel progetto il file BackendLess.js (o ancor meglio tutti i files sopra indicati), e noi abbiamo preferito farlo usando il task runner Gulp.

Nel nostro file di configurazione gulpfile.js consentiamo di ricevere degli argomenti (via yargs), e cosi facilmente includiamo la funzionalità passando il parametro backendless da riga di comando (quindi eseguendo gulp –backendless).

Ed eccoci alla fine di questa panoramica…chiaramente l’esempio riportato vuole essere solo un’ispirazione per lo sviluppo su AngularJS senza avere la necessità di puntare ad una REST API reale, ed offrire quindi ampi spazi a spunti (ad esempio la possibilità di legare tra loro i mock popolando correttamente le proprietà _embedded degli oggetti creati via JSON).

Alla prossima, e speriamo di essere stati utili!
Link Utili

https://ruhul.wordpress.com/2014/11/03/backendless-development-with-angularjs/
http://www.jeremyzerr.com/angularjs-backend-less-development-using-httpbackend-mock

The following two tabs change content below.

Francesco Sciuti

Freelance a Vroom Agency
Amante dello sviluppo web, della grafica 3d e della buona musica (che non guasta mai!), 'web developpa' tutto il giorno...e prova a trovare sempre il bandolo della matassa in questo allegro ma sconfinato mondo.

//life motto
if(sad() === true) {
    sad().stop();
    beAwesome();
}