Al giorno d’oggi sul web si trovano siti fatti in qualsiasi modo: siti creati in puro HTML (come la prima pagina creata nella storia di internet), siti creati tramite builder come Instapage, siti strutturati utilizzando CMS come Wordpress o Drupal (almeno una volta nella vita tutti ci abbiamo sbattuto la testa) e siti più complessi che sembrano vere e proprie applicazioni web per come sono strutturati.
La volontà di un team di sviluppo è sempre quella di innovare e ancora innovare andando a ricercare le ultime frontiere del coding soprattutto per mettere d’accordo tutti quanti: la SEO deve essere al primo posto, quindi serve un sito performante e completamente aperto alle modifiche per l’indicizzazione costante sui motori di ricerca; al primo posto deve esserci anche la grafica perché naturalmente la prima impressione è molto importante con effetti WOW e storytelling. Uno sviluppatore, però, deve sempre considerare la sicurezza dei dati e la pulizia di codice che pubblica in modo da rendersi la vita facile per successive implementazioni e manutenzione dell’intero progetto.
Come fare quindi per ottenere un prodotto buono ma allo stesso tempo leggero?
Vuoi leggere altri contenuti come questo?
Iscriviti alla newsletter!
Ogni mese riceverai notizie e approfondimenti dal mondo del digital selezionati per te dal team di Instilla, direttamente nella tua inbox.
Si potrebbe esprimere il concetto di Headless in più modi così da poter essere compreso da tutti, tecnici e non:
- “Ogni modulo del sito deve avere la responsabilità della sola parte che gli compete” (una astrazione del principio SOLID di Single-Responsibility, se c’è qualche programmatore).
- “Ogni sezione del sito deve essere ben definita e sviluppata nel modo migliore per quello che deve fare, anche andando a creare strutture complesse che interagiscono tra di loro tramite API” (forse siamo ancora troppo a livello tecnico).
- “Il sito deve avere delle zone ben definite con una applicazione dedita al frontend e una alla gestione dei contenuti e, perchè no, una terza applicazione utile alla gestione di interazioni complesse all’interno del sito”.
Insomma, l’ultima frontiera dello sviluppo web è creare siti in cui sono presenti una piattaforma per la visualizzazione dei contenuti e una piattaforma CMS per la gestione dei contenuti da esporre agli utenti: un Headless CMS.
Cosa significa Headless
Non c’è niente di soprannaturale o di spettrale nell’utilizzo di un Headless CMS: questo nome viene utilizzato per descrivere le già diffuse architetture software disaccoppiate (decoupled) in cui si costruiscono due applicativi che comunicano tramite API.
Nello sviluppo di queste soluzioni si tende quindi ad inserire un layer aggiuntivo tra il contenuto e l’utente finale che naviga la pagina tramite il proprio browser preferito. La differenza con i sistemi CMS monolitici come Wordpress è quella di non avere tutti i contenuti e le pagine web sulla stessa piattaforma (per capirci: sullo stesso spazio web), ma di avere una piattaforma dedita unicamente alla gestione dei contenuti e una piattaforma che richiede i dati da far visualizzare all’utente e li mostra nel modo corretto tramite il browser.
La presenza di più layer da mantenere potrebbe far venire il mal di testa a chi è sempre stato abituato a soluzioni monolitiche o addirittura statiche in cui si sa esattamente a chi compete la visualizzazione di un determinato contenuto. Ma un team di sviluppo e, soprattutto, un progetto ben organizzato, possono trarre enormi benefici da un'architettura di questo tipo.
Principali vantaggi di un CMS Headless
Costruire un sito web con la tecnologia Headless richiede sicuramente un team di sviluppo capace di lavorare sia su tecnologie frontend come html, css e javascript, che con piattaforme CMS di backend come Wordpress e Drupal scritte in linguaggio PHP. A livello strategico, sia di posizionamento tecnologico avanzato sia di possibilità di molteplici integrazioni, un sito web disaccoppiato potrebbe portare numerosi vantaggi rispetto a soluzioni monolitiche dipendenti da plugin o moduli standard.
Flessibilità grafica totale
Per cominciare, un tema Wordpress deve seguire determinate regole semantiche di costruzione date dall’impostazione monolitica della piattaforma. Ci sono molti sviluppatori che ormai hanno personalizzato e creato temi che garantiscono possibilità infinite, ma, in qualche modo, si è sempre collegati alla struttura di partenza della piattaforma originale.
Con un sito disaccoppiato si è in grado di sviluppare la grafica del sito con il framework, le librerie e le dipendenze necessarie a soddisfare al meglio il disegno grafico creato. Framework Javascript frontend basati su Vue o React possono essere utilizzati per generare le customer journey più disparate consentendo agli sviluppatori di animare e intrattenere gli utenti utilizzando le giuste tecnologie e non cercando di “far funzionare” determinate librerie all’interno di progetti che non si sposano nativamente con queste possibilità.
Il principio chiave è proprio questo: poter puntare su tecnologie che nativamente sono state pensate per questo tipo di sviluppo.
Velocità e performance
Un Headless CMS garantisce una piattaforma di gestione contenuti ottimizzata: l’utente amministrativo incaricato dell’inserimento e mantenimento di post e pagine accede a un pannello backend differente dal sito che gli utenti poi andranno a navigare.
Questo disaccoppiamento tecnologico permette di caricare il frontend, sviluppato magari con framework Javascript, su piattaforme di hosting ottimizzate per garantire performance di velocità nella fruizione del sito web. Il frontend, in questo modo, sarà unicamente incaricato di mostrare i contenuti utilizzando anche CDN (Content Delivery Network) e sistemi di cache.
SEO Friendly
Il sistema disaccoppiato è facilmente scalabile dal punto di vista delle funzionalità. Gli Headless CMS danno spesso la possibilità di estendere i contenuti gestibili per ogni tipo di pagina o post garantendo la possibilità di aggiungere altri campi di testo come ad esempio l’intera gestione dei parametri utili per l’ottimizzazione SEO delle pagine: title, meta description, dati strutturati... In un attimo queste informazioni possono essere esposte tramite API e inviate al frontend in modo da essere integrate rapidamente all’interno delle pagine.
Sicurezza e manutenzione
Come detto in precedenza, in un sito Headless i contenuti, e quindi tutti i dati sensibili, non risiedono sulla piattaforma a cui gli utenti fanno accesso per navigare il sito. D’altra parte, Wordpress è una piattaforma monolitica e un plugin compromesso - che magari non avrebbe nessuna interazione con il frontend - potrebbe portare a una perdita o furto di dati.
Un sistema disaccoppiato, invece, garantisce una sicurezza maggiore che non può essere raggiunta nemmeno con i plugin o i moduli di sicurezza di piattaforme CMS tradizionali. L’aggiunta di un layer tra frontend e backend permette infatti di non esporre mai direttamente la base di dati agli utenti tenendo in sicurezza sia i dati che gli utenti.
Scalabilità
Nel caso in cui si presenti un picco di utenze, portato ad esempio da attività di marketing come DEM o campagne Paid oppure una normale crescita del traffico organico tramite una corretta strategia SEO, un frontend disaccoppiato è facilmente scalabile in modo da mantenere inalterate le sue performance.
La scelta del servizio di hosting del framework frontend selezionato per lo sviluppo ricopre quindi un ruolo chiave nell’implementazione di un sito basato su Headless CMS.
Vuoi dare una svolta digital alla tua azienda?
Parlaci del tuo progetto, disegneremo la strategia migliore per le tue esigenze.
E-commerce Headless
La tecnologia Headless potrebbe essere utilizzata anche per creare piattaforme e-commerce tramite l’integrazione di librerie Javascript come ad esempio Snipcart. Una libreria di questo tipo permette di avere il backend di gestione degli ordini su un pannello separato dal frontend in cui si mantengono tutte le potenzialità della struttura disaccoppiata.
L’architettura dell’e-commerce potrebbe essere sviluppata integrando 3 moduli differenti:
- Piattaforma Headless CMS per la gestione dei contenuti testuali del sito
- Modulo e-commerce integrato tramite Snipcart
- Frontend che raccoglie informazioni da entrambi i sistemi di backend e li mette a disposizione dell’utente in una navigazione ottimizzata alla conversione
Un sistema di questo tipo mostra tantissime potenzialità in quanto potrebbe non essere limitato alla sola integrazione di un modulo e-commerce e uno di gestione contenuti, ma si potrebbero integrare ulteriori piattaforme terze.
Leggi anche: E-commerce e UX: esperienze d’acquisto a prova d’utente
Wordpress Headless CMS
Wordpress è la piattaforma CMS più utilizzata al mondo e dalle ultime versione ha reso disponibili nativamente API RESTFul per consentire agli sviluppatori di esporre i contenuti in modo trasparente verso sistemi diversi.
La potenza di Wordpress è sicuramente la diffusione della piattaforma: la parte di inserimento e gestione contenuti è conosciuta ai più ed è di facile apprendimento. Tramite le API esposte da Wordpress si possono creare dei frontend personalizzati rendendo non necessaria l’installazione di un tema. Le API di Wordpress però possono risultare limitate per determinate applicazioni e quindi potrebbe essere necessario lo sviluppo di un tema o plugin custom utili ad esporre tutte le informazioni in modo ottimizzato per il frontend associato.
A chi serve una soluzione Headless
Il mantenimento di una piattaforma disaccoppiata richiede infatti conoscenze tecniche sistemistiche per la gestione dei server, di backend per i sistemi di gestione contenuti e frontend per tutta quella parte di sviluppo di sito web con cui interagisce l’utente.
Se puoi affidarti a un team di sviluppatori (come il nostro!), però, questa struttura ti darà molti vantaggi.
Una soluzione comprensiva di Headless CMS garantisce scalabilità e possibilità multiple in quanto i contenuti vengono richiamati dal frontend tramite chiamate API. Potrebbe anche non esistere un solo frontend, ma lo stesso contenuto potrebbe venire esposto su più piattaforme: un sito corporate potrebbe, ad esempio, integrare facilmente gli ultimi articoli del blog con minimo sforzo da parte degli sviluppatori.
Una architettura disaccoppiata standard potrebbe quindi prevedere:
- Sito frontend sviluppato con framework Javascript come Nuxt.js o Gatsby.js
- Headless CMS basato su Wordpress con creazione di tema custom per garantire una esposizione di API conforme alle specifiche del progetto
- Piattaforma terza per una integrazione di dati proveniente dal CRM aziendale
In questa infrastruttura, le diverse piattaforme comunicherebbero tra di loro tramite API strutturate in modo coerente per tutti i sistemi e garantirebbero un flusso costante e sicuro di dati.
Un utente potrebbe trovare facilmente, sulla piattaforma frontend, gli ultimi contenuti del blog ottimizzati per un flusso navigazionale incentrato sulla conversione. Nel caso in cui l’utente si interessa al prodotto e vuole mettersi in contatto lasciando i propri dati, allora il sistema può comunicarli direttamente al CRM.
Questa soluzione permette di non utilizzare database intermedi come potrebbe succedere, invece, in form di raccolta contatti di CMS monolitici. L’utente si troverebbe, quindi, al centro di una nuova infrastruttura sicura e costruita appositamente sulla customer journey pensata per le sue esigenze.
