Il mondo digital è sempre più "headless"

Il concetto di "architettura headless" sta diventando centrale nel mondo dello sviluppo in ambito web e digital in genere. Ma cosa significa? Quali sono le soluzioni a disposizione? Scopriamolo.

Quali sono i vantaggi di un'architettura headless?
Quali sono i vantaggi di un'architettura headless?

Sebbene l'utilizzo dell'architettura tradizionale dei CMS (Content Management System), sia uno standard consolidato, le aziende oggi cercano flessibilità, scalabilità e prestazioni su tutti i touchpoint nei quali sono presenti. Tali caratteristiche sono proprio ciò che si può ottenere attraverso infrastrutture headless.

Cos'è un CMS headless?

Un CMS headless è un sistema di gestione dei contenuti in cui il back-end ed i dati, ovvero il "corpo", sono separati o disaccoppiati dal front-end, ovvero la "testa". I contenuti di un'architettura headless vengono gestiti attraverso API, per ottenere la visualizzazione su diversi dispositivi e piattaforme.

Ad esempio potresti realizzare il front-end utilizzando Ruby, NodeJS o React per mettere a disposizione i dati in un sito web o in una PWA (Progressive Web App). Ma la stessa sorgente di dati potrebbe alimentare un maxi schermo in un aeroporto, un'applicazione vocale (es. una skill per Alexa), un'applicazione mobile, un assistente virtuale, ecc..

Al contrario, le piattaforme CMS tradizionali come WordPress o Drupal (tipicamente modelli "monolitici"), sono basate su editor di tipo WYSIWYG e template grafici applicati lato front-end che possono essere adattati per molte tipologie di siti web.

Quindi, mentre un CMS tradizionale offre strumenti ed interfacce per salvare e immagazzinare contenuti, gestirli e metterli a disposizione degli utenti, il CMS headless si concentra sulle prime due parti, eliminando l'accoppiamento stretto tra il back-end e front-end.

I CMS tradizionali con API headless (disaccoppiamento)

Alcune piattaforme CMS tradizionali offrono delle "API headless" che consentono di inviare contenuti a un front-end di qualsiasi tipologia. Di fatto è una situazione del tutto simile a quella vista in precedenza, ma con una grande differenza: i dati non vengono salvati per essere visualizzati indipendentemente dalla piattaforma di destinazione. Ad esempio, un contenuto potrebbe contenere delle parti di HTML, e questo potrebbe non essere l'ideale per un'app mobile o un'applicazione vocale (esempio molto semplice e banale, ma credo che permetta di comprendere il concetto).

Un escamotage. WordPress è uno dei CMS che mette a disposizione i dati attraverso API REST. Utilizzando dei campi personalizzati nel back-end è possibile salvare dei dati ad hoc per essere messi a disposizione di diversi front-end su diversi touchpoint.

Ciò non trasforma WordPress in un CMS headless, anche perché introduce altre problematiche, ad esempio la ridondanza dei dati e l'aumento dell'effort della gestione. Tuttavia si tratta di un'idea interessante per piccole applicazioni.

REST API Handbook | WordPress Developer Resources
The WordPress REST API provides an interface for applications to interact with your WordPress site by sending and receiving data as JSON…
Le API REST di WordPress

Perché aumenta l'interesse verso i sistemi headless?

Il concetto di "headless" non è assolutamente nuovo.. l'escamotage che ho descritto un attimo fa lo usavo nel mio team almeno 5 anni fa.

Si tratta di un'evoluzione naturale: i diversi componenti del sistema si separano per poter raggiungere livelli superiori, in termini di prestazioni, flessibilità, scalabilità.

Il motivo per il quale se ne parla sempre maggiormente ed i brand si stanno orientando verso soluzioni di questo tipo, deriva dall'accelerazione tecnologica che stiamo vivendo, e quindi dalla necessità di strutturazione e di offrire agli utenti esperienze sempre migliori.

Sintetizzando, ecco i principali vantaggi delle architetture headless.

  1. Permettono l'unificazione dei dati un un unico hub.
  2. Consentono di migliorare la collaborazione simultanea.
  3. Rendono i contenuti altamente accessibili e riutilizzabili.

E proprio per questi motivi, i grandi player in ambito CMS si stano evolvendo in questa direzione, e altri stanno nascendo. Vediamo alcune dinamiche.

1) WordPress e Frontity

Per rimanere su WordPress, recentemente Automattic ha acquisito Frontity (un framework React) con l'obiettivo di potenziare lo sviluppo del front-end. Ma non solo.. si tratta dell'inizio di un percorso per rendere il più diffuso CMS al mondo un sistema headless.

Automattic acqui-hires the team behind Frontity, a React framework for WordPress
WordPress.com parent company Automattic has acquired Frontity, an open source React framework for WordPress-powered websites.

2) Salesforce e l'e-commerce headless

Salesforce, uno dei leader mondiali in ambito CRM, parla di "headless commerce", un'architettura che offre ai brand la libertà di espressione per costruire qualunque sistema indipendentemente dalle funzionalità, consentendo l'arricchimento dell'esperienza del cliente.

Headless Commerce
Deliver innovative, trusted, connected commerce experiences with a headless CMS.

Proprio per questo motivo, ha acquisito Mobify, un'azienda focalizzata in questo ambito, ed in particolare nello sviluppo di API per progettare e distribuire siti web e app di e-commerce personalizzati.

Salesforce buys ‘headless commerce’ tech firm Mobify
Mobify brings new website development tools to Salesforce.com’s Commerce Cloud software for customizing B2B and retail ecommerce sites and apps. Salesforce.com has agreed to buy Mobify, a provider of headless commerce technology for developing ecommerce sites and apps.,
Mobify will provide Salesforce Commerce Cloud with a modern storefront solution that will allow brands to customize their commerce experiences faster and more frequently, deliver an enhanced shopping experience across any channel, and further increase conversion and revenue to drive success in the digital-first economy.
- Igor Faletski, CEO, Mobify

3) Ghost, CMS Headless

Il sito web che ospita questo post è realizzato utilizzando Ghost, un CMS headless open source. Lo schema che segue ne mostra l'architettura, e ciò che appare immediatamente chiaro è la separazione tra core, back-end e front-end.

L'architettura di Ghost, un CMS Headless open source
L'architettura di Ghost, un CMS Headless open source

Il sistema mette a disposizione anche un front-end (quello che stai visualizzando), ma permette un utilizzo completamente in modalità headless. Di fatto, il core di Ghost è in insieme di API JSON, ovvero il formato standard di interazione tra applicazioni.

La configurazione nativa di Ghost consente di usare un back-end per gestire i contenuti, con la possibilità di metterli a disposizione di un sito web e di un sistema di invio newsletter per coloro che si iscrivono al servizio. In pratica possiede già il setup perfetto per supportare i "creator".

Le risorse che seguono sono utili per comprendere in dettaglio l'architettura di Ghost.

Cos’è GHOST?
Ghost è un CMS professionale open source basato su un moderno stack tecnologico in Node.js, progettato per i team che necessitano di potenza, flessibilità e prestazioni.
Ghost Architecture – A modern, decoupled web application for professional publishers
Ghost is structured with a robust JSON API at it’s core, with a beautiful client app and a fully decoupled theme layer on the front-end – find out more!

4) Gatsby

Il trend di crescita dei sistemi headless, parallelamente, sta mettendo in luce delle architetture per creare dei front-end che permettono di dare agli utenti delle esperienze straordinarie, grazie anche all'utilizzo di pagine statiche generate dinamicamente.
Tutto questo, dal mio punto di vista, è stato accelerato anche dal recente Page Experience Update di Google.

Un esempio di queste architetture è Gatsby, ovvero un framework open source dedicato proprio al front-end, che consente anche (e soprattutto) di aggregare i dati di diverse fonti.

Cos’è Gatsby? Un esempio di quello che serve oggi nello sviluppo web!
Nello sviluppo web di oggi sono necessari 3 ingredienti: prestazioni, integrazione, velocità di deployment. Gatsby è una risposta interessante a queste necessità. Scopriamo di cosa si tratta.
Un approfondimento su Gatsby

Questi sistemi garantiscono sempre più flessibilità, e contemporaneamente rappresentano l'interfaccia ideale per CMS headless.
Un esempio? Le pagine della documentazione di Ghost hanno il front-end realizzato con Gatsby, connesso a Ghost e GitHub come fonti di dati. La versione statica delle pagine è ospitata su Netlify con funzioni servless dinamiche basate su AWS Lambda.


Il concetto di "haedless" non riguarda solo i CMS

Ciò che abbiamo visti fino a questo momento fa intuire che la modalità "headless" non è un trend che riguarda soltanto i CMS e in generale la gestione dei contenuti.
Si tratta, come dicevo in precedenza, della separazione tra front-end e back-end per liberare l'interfaccia dai vincoli della gestione, e comprende contenuti e funzionalità.

Non solo Salesforce, ad esempio, parla di headless commerce, ma lo fanno, ad esempio, anche Magento e Shopify. Inoltre esistono soluzioni complete come Crystallize e Litium.

Headless Commerce VS e-commerce "monolitico" in un'infografica di Crystallize
Headless Commerce VS e-commerce "monolitico" in un'infografica di Crystallize

Un esempio di scenario strutturato

Un esempio di scenario in un'azienda strutturata, relativamente alla gestione e dei contenuti, potrebbe prevedere:

  • un PIM (Product Information Management) per la gestione centralizzata dei dati del catalogo prodotti;
  • un headless commerce per la gestione delle funzionalità di acquisto online;
  • un CMS headless per la gestione di pagine, tassonomie, post ed altre tipologie di contenuto;
  • un front-end performante che coordina contenuti, dati e funzionalità.

Considerazioni

La maggior parte dei brand sperimenta una forte spinta ad aggiungere nuovi canali digitali, migliorare l'esperienza dei clienti, e aumentare la velocità e l'agilità nello sviluppo. Questo fa parte del contesto che più significativamente influenza e alimenta il trend headless.

"Headless", però, non significa "semplice", anzi direi il contrario. Si tratta di una configurazione più impegnativa e richiede un certo livello di maturità sia in termini di pensiero digitale che di know-how tecnico. La conoscenza interna è cruciale.

Questi concetti aprono nuove prospettive anche per il digital marketing.

  • Dal punto di vista SEO l'evoluzione del front-end ci sta portando a Page Experience straordinarie (naviga questo sito web per averne un assaggio).
  • I dati strutturati e i feed, che necessitano di un livello sempre maggiore di elaborazione ed interconnessione, diventeranno gestibili in maniera più agile e centralizzata.
  • Personalizzazione ed automazione sono elementi chiave in una fase dell’evoluzione del marketing online in cui tutte le azioni e le forme di comunicazione si stanno focalizzando intorno al cliente e ai suoi interessi. Questi aspetti possono essere gestiti integrando alle componenti dello scenario visto in precedenza, sia dei software per raccogliere e analizzare i dati (CRM e data analytics) sia le piattaforme per automatizzare le attività di marketing (marketing automation).

In fin dei conti cosa sono i dati strutturati e i feed? Sono informazioni centralizzate che consentono di esporre le entità su diverse piattaforme con dei precisi criteri.

Per approfondire

Che scelte ha fatto John Mueller per rifare il suo blog personale?
John Mueller, Search Advocate di Google, ha recentemente rifatto il suo blog personale. Che tipo di scelte ha fatto? Lo scopriamo insieme.
Using Gatsby + Ghost
Build an API driven static-site with Gatsby.js and use Ghost as a completely decoupled headless CMS. Read more about how it works and how to use this starter theme here!
Shopify Headless Commerce
Headless commerce gives you full creative control across all your touchpoints for a cohesive customer experience. Powered by Shopify’s commerce platform, you can plug in all your business tools and systems to create custom storefronts as creative as your brand.
Headless Commerce | Magento
By separating a website’s front and back end systems, the headless architecture in Magento Commerce allows companies to evaluate and deploy new customer experiences across every channel and device.