Drupal headless e Angular

Con la rivoluzione digitale e l’aumento delle tipologie di dispositivi per l’accesso ai dati è cresciuta l’esigenza di adottare una strategia di fruizione dei dati multicanale.

Uno degli approcci che sta guadagnando molta popolarità è l’adozione di un’architettura headless (letteralmente “senza testa”) che prevede il disaccoppiamento tra il backend (fornitore di contenuti) ed il frontend (consumatore di contenuti).

Perché preferire l’architettura headless

Come disse Platone “ogni uomo è capace di fare bene una cosa. Se ne tenta diverse, non riuscirà ad ottenere la distinzione in nessuna”.

Questo concetto è oggi più che mai vero quando si parla di sviluppo di App Web. I CMS (Content Management System) come Drupal sono ottimi per la gestione dei contenuti e dei dati ma risultano inadeguati per le interazioni frontend a causa del forte incremento del numero di canali di accesso ai dati stessi. Questo ha comportato una forte separazione tra backend e frontend grazie anche all’introduzione di molti framework javascript, come ad esempio Angular, per lo sviluppo del frontend.

I vantaggi dell’utilizzo di un’architettura headless sono molti:

• Sviluppatori frontend e backend possono lavorare parallelamente
• Miglioramento dell’esperienza utente
• Maggiore libertà tecnologica
• Possibilità di accesso multicanale (applicazioni web, applicazioni mobile, dispositivi IOT, smartwatch ecc.) tramite la fruizione di API messe a disposizione dal backend
• Incremento di velocità e prestazioni in quanto le richieste dell’utente non devono essere elaborate ogni volta dal server ma può essere fatto direttamente dal client

Drupal Headless

Drupal è un CMS di classe enterprise, flessibile e scalabile, capace di gestire sia i contenuti backend che il rendering dei contenuti frontend. Tuttavia, per i motivi sopra descritti, Drupal 8.0 ha visto l’introduzione dell’architettura API-first attraverso l’implementazione di API REST nel core per l’esposizione di servizi Web RESTful e non RESTful.

Drupal headless espone quindi API per la fruizione dei dati in formato HTTP/JSON che possono essere letti ed elaborati da framework javascript per il rendering della pagina web.

Il browser non si connetterà in questo modo direttamente a Drupal e bypasserà quindi il livello di presentazione di Drupal lasciando il compito al framework javascript scelto per lo sviluppo.

Angular

Angular è uno dei più potenti framework JavaScript. E’ stato sviluppato ed è supportato da Google ed è uno dei framework JavaScript che meglio si sposano con l’architettura headless di Drupal.

Attraverso Angular, infatti, è possibile sviluppare applicazioni web, eseguite interamente dal browser, in grado di reperire dati da API messe a disposizione dallo strato di backend.

I principali punti di forza di Angular sono i seguenti:

• nessuna dipendenza da librerie esterne
• implementa il design pattern MVC (Model-View-Controller)
• Unit testing
• leggero ed estendibile
• possibilità di creare componenti riutilizzabili
• esecuzione su qualsiasi piattaforma (inclusi smartphone e tablet)

Angular e Drupal Headless

La potenza e l’estendibilità di Angular e la flessibilità e la scalabilità di Drupal formano l’accoppiata vincente per lo sviluppo di applicazioni web potenti e reattive.

L’utilizzo di Angular permette di aumentare notevolmente le prestazioni di Drupal in quanto la logica di visualizzazione viene spostata lato frontend, alleggerendo quindi la parte di backend. L’implementazione del design pattern MVC inoltre permette la separazione della logica di presentazione dei dati dalla logica di business fornendo quindi una struttura del codice più pulita e non ridondante.

Con l’utilizzo di Angular si introduce poi un ulteriore livello di sicurezza in quanto il browser comunica con Angular e non esiste quindi una interazione diretta lato server. Questo rende più difficile l’inject di codice dannoso per l’accesso e la modifica non autorizzata dei dati memorizzati nel database.

Dalla teoria alla pratica

La configurazione di Drupal in modalità headless e la creazione di un progetto Angular per la lettura dei dati è molto semplice.

Configurazione Drupal in modalità API

Dopo aver installato l’ultima versione stabile di Drupal (al momento 9.2) andiamo a configurare la modalità headless per l’esposizione di API attraverso l’abilitazione di tutti i moduli relativi ai web service:

Andiamo poi a creare un nuovo tipo di contenuto che chiamiamo Album con tre campi Titolo, Descrizione e Immagine:

e inseriamo alcuni contenuti di tipo Album:

Creiamo ora una view che funzioni da API per la lettura dei contenuti di tipo Album con le seguenti impostazioni:

Dopo aver salvato la vista entriamo in modifica per apportare le modifiche necessarie ed ottenere la seguente impostazione:

Accedendo alla url della view (/api/albums/?_format=json) verranno mostrati tutti i contenuti di tipo Album in formato JSON:

Configurazione dei CORS per l’accesso alle api dal frontend Angular

Per far sì che il frontend Angular abbia accesso alle API esposte da Drupal è necessario configurare i CORS di Drupal per accettare tali richieste.

Per fare ciò è necessario configurare la direttiva allowedOrigins del file sites/default/default.services.yml abilitando i cors ed impostando gli url dai quali verranno effettuate le richieste dal frontend al backend:

Creazione del progetto Angular

Adesso che il frontend è configurato e pronto per ricevere richieste procediamo alla creazione del progetto frontend attraverso il comando:

$ ng new demo

Dopo che il processo di creazione è terminato aggiungiamo bootstrap 4 al nostro progetto e creiamo un nuovo componente albums per la visualizzazione degli album letti tramite l’API messa a disposizione dal backend attraverso il comando:

$ ng generate component albums

Aggiungiamo una nuova route alla quale collegare il componente appena creato aggiungendola al file src/app/app.module.ts

Creiamo ora un modello per la gestione dei dati letti dall’API aggiungendo il file album.ts all’interno del componente albums così come rappresentato nella seguente figura:

Aggiungiamo ora il file albums.service.ts che conterrà il servizio per l’interrogazione dell’API messa a disposizione dal backend:

Andiamo a questo punto a configurare il modulo album precedentemente creato per leggere i dati dall’API attraverso il servizio e visualizzarli nell’interfaccia frontend.

Modifichiamo quindi il file albums.component.ts presente all’interno della cartella del componente albums così come segue:

e modifichiamo la view del componente albums in modo tale che il file albums.component.html abbia il seguente contenuto:

Avviamo a questo punto il nostro progetto Angular attraverso il seguente comando:

$ ng serve

ed apriamo il browser all’indirizzo indicato dall’output del comando precedente (generalmente http://localhost:4200) aggiungendo il suffisso /albums indicato nella route precedentemente creata. Se tutto è stato configurato correttamente il risultato visualizzato sarà simile a quello rappresentato in figura:

Conclusioni

La struttura headless, anche se non sempre necessaria, è sicuramente consigliata per lo sviluppo di applicazioni web e la fruizione di dati multicanale.

Un’accoppiata sicuramente vincente è quella tra Drupal e Angular che insieme permettono l’implementazione di app potenti, performanti, facili da manutenere e sicure.

Se desideri approfondire questa tematica o hai bisogno di aiuto scrivici online tramite il nostro form di contatti. Siamo a tua disposizione per consulenza e supporto operativo!