Headless CMS e JAMstack

Con l’avanzamento delle tecnologie, gli standard si elevano inevitabilmente per venire incontro ad aspettative sempre maggiori da parte di utenti ma anche degli sviluppatori.

Per questi ultimi, infatti, lo sviluppo in headless CMS è un vero e proprio game changer, per benefici tra i quali maggiore flessibilità e libertà creativa, ma facciamo un passo indietro per capire cos’è un CMS headless e quali sono le differenze con sistemi tradizionali.

Cos’è un headless CMS?

Un CMS (Content Management System) headless è un sistema di gestione dove i contenuti vengono visualizzati, gestiti e immagazzinati in modo indipendente da come verranno poi visualizzati.

In un CMS tradizionale, c’è un collegamento diretto tra il backend (il “corpo”) che gestisce i contenuti e li invia al frontend (la “testa”), che si occuperà di mostrarli.

Dall’altra parte, i CMS headless mancano di questo link (da qui, “senza testa”) e il backend mette a disposizione i contenuti in modo “non elaborato”. Questo si traduce in totale flessibilità da parte del frontend che acquisisce dati, contenuti e funzionalità tramite le API e può renderizzarli con completa libertà.

Headless CMS: Vantaggi e Svantaggi

Vantaggi

•  Flessibilità: come già sottolineato in precedenza, il fatto che l’interfaccia utente sia staccata da dove risiedono i contenuti, fa sì che non sia più quest’ultimo a stabilire la piattaforma su cui i dati possono arrivare ma il front-end può accoglierli utilizzando la tecnologia (framework) che preferisce.

• Scalabilità: per lo stesso motivo, back-end e front-end possono essere scalati indipendentemente; questo si traduce in gestione del traffico in aumento più semplice: se il tuo target è incline a una nuova piattaforma il CMS rimane lo stesso e lasciamo alle API il compito di inviare lì più contenuti.

• Architettura multi-head: se da una parte parliamo di “headless”, allo stesso tempo potremmo dire che ha più teste in quanto, diversamente dai CMS che erano al servizio dei siti web, adesso sono richiesti più canali da sviluppare: applicazioni mobile, smartwatch, etc.

• Sicurezza: senza l’esposizione diretta tra back-end e database, il rischio di DDos è ridotto, e la connessione degli strati attraverso le API fa sì che nel caso di minacce queste non vadano ad intaccare gli altri layer. Inoltre il CMS è eseguito su un server senza SQL, prevenendo le SQL injections.

• Manutenzione: il front-end, essendo indipendente, può aggiornare l’interfaccia utente e il sistema di gestione dei contenuti riducendo i tempi di inattività, e i componenti possono essere riutilizzati accelerando lo sviluppo e riducendo i costi.

Svantaggi 

• Complessità: un’alta flessibilità si traduce in architetture più complesse. Più componenti associati al CMS devono essere progettati, sviluppati, gestiti e mantenuti e qualsiasi problema nel processo può portare a problemi di performance.

• Limitazioni: se gli headless CMS sono costruiti secondo le necessità degli sviluppatori, con funzionalità intuitive e meno intrusive per la gestione dei contenuti, questo comporta un ostacolo per il personale “non tecnico” che non può visualizzare in tempo reale il risultato finale di ciò su cui si sta lavorando.

Headless CMS: esempio pratico

1) Decap CMS (Netlify CMS)

CMS open-source basato su Git, la sua particolarità? É una SPA scritta in React, scaricabile attraverso il gestore di pacchetti NPM. Particolarmente adatto per essere integrato con generatori di siti statici, può essere utilizzato con la sua piattaforma nativa di hosting Netlify.

Le caratteristiche principali, oltre a quelle già citate, vedono:

• Interfaccia Utente: Netlify CMS offre un’interfaccia utente pulita e intuitiva, rendendo facile per i content creator aggiungere, modificare e gestire i contenuti, oltre che una real-time preview e sistema di drag-and-drop per gli upload.

• Basato su Git:  tutte le modifiche ai contenuti vengono salvati come commit in una repo Git, per cui la collaborazione è gestita nativamente: questo approccio sfrutta tutta la potenza dei sistemi di versionamento.

• Estendibile: attraverso widgets e plugin, la piattaforma può essere estesa e personalizzata consentendo funzionalità aggiuntive come inserimento dei metadata, creazione di gallerie di immagini e altro.

CMS Headless e JAMstack: la chiave per un sito ultraveloce
La JAMstack (Javascript, API, Markup) è un’architettura di sviluppo web atta a enfatizzare la pre-renderizzazione dei siti web e la loro distribuzione tramite CDN attraverso i metodi più efficienti: Javascript per la dinamicità, API per le funzionalità server-side e markup statico per la strutturazione dei contenuti.

In quest’ottica, gli headless CMS si inseriscono perfettamente in questo sistema, come “motore” delle API, fornendo i contenuti che le applicazioni costruite in JAMstack consumano, secondo il principio del decoupling.

Generatori di siti statici

Nell’implementazione dell’architettura JAMStack, i generatori di siti statici (SSG) sono strumenti essenziali per raggiungere gli obiettivi richiesti quando si lavora con queste tecnologie.

Utilizzati dagli albori di Internet, vennero sostituiti da altri strumenti quali i CMS monolitici il cui approccio era più semplice per sviluppatori meno tecnici e interfacce utente meno intuitive, limitandone la complessità.

Inoltre, era richiesta una personalizzazione dei contenuti che solo il rendering dinamico poteva offrire, a discapito di tempi di caricamento più lunghi e carichi elevati di traffico.

Questi e ad altri motivi hanno spinto i developers a migliorare gli SSG in modo tale che potessero raggiungere le capacità per generare pagine e pagine in men che non si dica.

Con l’aumento della consapevolezza riguardo l’importanza delle performance, della scalabilità e della sicurezza dei siti web, sono nati SSG di ogni genere che possono coprire la maggioranza dei linguaggi di programmazione, usare diversi linguaggi di templating e convenzioni, e funzionare in ogni ambiente di sviluppo.

Esempio: Hugo

Cito dalla sua documentazione:

“..É progettato per fornire un'esperienza di visualizzazione ottimale agli utenti finali del sito web e un'esperienza di scrittura ideale per gli autori del sito”. Hugo è tra i più popolari SSG open-source, è scritto in Go, e ottimizzato per essere veloce, facile nell’uso e nella configurazione. "

Le caratteristiche principali sono:

• Velocità di rendering: come già detto in precedenza, questo framework è capace di generare migliaia di pagine in pochi secondi, in quanto le goroutine di Go si adattano perfettamente a molti dei compiti che Hugo esegue ad ogni build, basti vedere l’uso della CPU sul proprio PC durante la costruzione di un website con Hugo (maggiori informazioni qui).

• Funzioni e metodi integrati: variabili, loop, fetch, e tante altre sono le funzioni built-in che i template di Hugo mettono a disposizione per ogni tipo di operazione, dalla manipolazione dei dati alla formattazione dei contenuti, persino la creazione di percorsi URL dinamici.

layouts/ 

└── partials/ 
   
                ├── average.html 
 
                ├── breadcrumbs.html 

                └──footer.html 

{{ partial "breadcrumbs.html" }}

• Gestione dei contenuti: Hugo utilizza un sistema di templating flessibile e potente attraverso la compatibilità dei contenuti in Markdown, insieme alla definizione di layout modulari.
  Questo framework vuole eliminare la duplicazione di codice, permettendo il riutilizzo di componenti comuni.

layouts/  *Contiene i layout e i file di base per le pagine.

└── default/                * Creazione dei template da applicare alle pagine.
  
    ├── home                * Pagina di apertura.
    ├── baseofhtml          * Template comune a tutte le pagine.
    ├── blog                * Template applicabile solamente ai blog.
    ├── default             * Template per pagine di layout default.
    ├── 404                 * Template per la pagina 404.
    └── redirect            * Template  per il redirect delle pagine.

In un file di Markdown, il metodo per specificare il layout è il seguente:

--- 


 layout: default 
 title: Titolo della pagina 
 description: Descrizione della pagina 

 ---  

Questa pagina otterrà solamente il layout default; in aggiunta, è possibile inserire eventuali metadata come titolo, autore, categorie ecc..

Al momento della compilazione del sito, Hugo prende i contenuti scritti in Markdown e li trasforma automaticamente in HTML, integrandoli nei template di pagina.

Conclusione

In conclusione, l'evoluzione verso l'uso di CMS headless e l'adozione dell'architettura JAMstack, nonostante le sfide, come la complessità e la necessità di adattamento per i team meno tecnici, ha diversi vantaggi.

Infatti, non solo risponde alle esigenze di performance, sicurezza e scalabilità dei siti moderni, ma offre anche una flessibilità senza precedenti sia per gli sviluppatori che per i creatori di contenuti.

Man mano che queste tecnologie continuano a evolversi, possiamo aspettarci ulteriori miglioramenti e innovazioni che renderanno lo sviluppo web ancora più potente, accessibile e performante.