Il blog di ICT Sviluppo, una combo perfetta: Sanity, Vercel & Vue.js

La migrazione del blog da HubSpot CMS a una soluzione combinata del CMS headless Sanity, il framework Nuxt (che utilizza il linguaggio Vue) e la piattaforma di hosting Vercel, è una scelta strategica che ha offerto diversi vantaggi.

Punti di forza della combo Sanity / Nuxt / Vercel

1. Flessibilità e Controllo: Sanity è un CMS headless che fornisce una completa libertà nella progettazione dell'esperienza utente e dell'interfaccia. Questo significa che è possibile costruire il front-end con Nuxt.js, un framework basato su Vue.js, che offre un'esperienza di sviluppo moderna e performante, senza essere vincolati dalle limitazioni di un CMS tradizionale.
   
2. Sviluppo Veloce e Efficiente: Nuxt.js facilita lo sviluppo di applicazioni universali, sia statiche che server-rendered, con un routing e un fetching dei dati già configurati. In combinazione con Sanity, che offre un client ultra-leggero e componenti per immagini e testi senza configurazione, si può accelerare notevolmente il processo di sviluppo.
   
3. SEO Ottimizzato: Nuxt.js è noto per le sue caratteristiche SEO-friendly, che, quando abbinato al supporto di Sanity per campi SEO personalizzabili, può migliorare significativamente la visibilità del sito web - in questo caso il nostro blog - sui motori di ricerca.
   
4. Scalabilità: La combinazione di Sanity e Nuxt.js è progettata per essere scalabile. Con il supporto per la generazione statica incrementale (ISR) e la distribuzione su CDN moderne, la piattaforma può gestire facilmente l'aumento del traffico e della complessità dei contenuti.
   
5. Esperienza di Sviluppo Piacevole (DX): Entrambi Sanity e Nuxt.js sono costruiti con l'obiettivo di fornire una DX eccellente. Questo si traduce in una documentazione chiara, una comunità attiva e un'architettura modulare che rende piacevole lavorare con queste tecnologie.
   
6. Integrazione con Altre Tecnologie: Sanity può essere integrato con qualsiasi framework principale, offrendo la flessibilità necessaria per avere il pieno controllo del progetto. Questo ci ha permesso di adattare il nostro stack tecnologico alle esigenze specifiche del nostro business.
   
7. Costi Prevedibili: Con Vercel, abbiamo una struttura di costi chiara e prevedibile, che può aiutare a gestire meglio il budget dedicato all'hosting e alla manutenzione del sito.
   
8. Infrastruttura: mentre Sanity si posiziona come un CMS headless che separa completamente il back-end dal front-end, consentendo agli sviluppatori di utilizzare qualsiasi framework o tecnologia per la parte visiva del sito, Nuxt.js, basato su Vue.js, è un framework versatile che facilita lo sviluppo di applicazioni universali, statiche o single page. Vercel, infine, è una piattaforma di hosting e deployment che si integra perfettamente con Nuxt, offrendo funzionalità come il deployment continuo, la distribuzione su edge network e l'ottimizzazione automatica delle prestazioni.
   

Questa l'interfaccia dove si vedono i componenti sviluppati all'interno di Sanity, che diventa l'interfaccia dove gli operatori dovranno inserire testi, immagini, gestire tag, autori ed altri elementi del blog.:

Gli elementi che compongono l'infrastruttura headless

Quali sono quindi gli elementi che compongono una infrastruttura headless per ottimizzare la gestione dei contenuti online di un'azienda?

1. Il CMS HEADLESS dove il team di produzione di contenuti si troverà a lavorare e nel quale vengono ospitati tutti i componenti/funzioni che a quel tema servono, in questo caso, Sanity.
   
2. I COMPONENTI che vengono sviluppati esternamente, per creare l'infrastruttura logica e funzionale, in questo caso con Nuxt, attraverso il linguaggio di programmazione Vue.js.
   
3. L'HOSTING, Vercel che si posiziona come una piattaforma all'avanguardia e che risponde a esigenze di velocità ed efficienza offrendo agli sviluppatori gli strumenti per creare e distribuire applicazioni web e siti statici con facilità e rapidità.

I componenti sviluppati in Vue.js

Ecco, nel dettaglio, i componenti sviluppati in Vue.js per la creazione del nostro nuovo blog

La visualizzazione del listing dei post è gestita dai componenti:

• AllPostCards.vue: questo componente visualizza una lista di articoli del magazine di ICT Sviluppo, con la possibilità di filtrare i post in base a una stringa di ricerca e gestisce il rendering lato client. Inoltre, include un blocco di debug nascosto per mostrare informazioni utili durante lo sviluppo.
  
• CardInEvidenza.vue: questo componente visualizza un post in evidenza con un’immagine, il titolo, la categoria e un link per leggere l’intero post, con uno stile specifico per diverse dimensioni dello schermo.
  
• Il singolo articolo viene gestito dal componente Card.vue: questo componente visualizza un post in una card con immagine, titolo, categoria, autore, estratto e tag, con uno stile specifico per diverse parti della card.
  
• Il breadcrumb nel singolo articolo è generato invece dal componente Breadcrumb.vue: questo componente crea una barra di navigazione breadcrumb che mostra il percorso corrente all’interno del sito, con link alla Home, alla categoria del post e il titolo del post corrente.

Per la gestione del body dell'articolo sono stati sviluppati 4 componenti:

• Image.vue: questo componente prende un’immagine come input e la visualizza con alcune configurazioni specifiche, come il caricamento lazy e il formato WebP, insieme a una didascalia opzionale.
  
• PtCta.vue: questo componente prende una CTA come input e la visualizza in base al tipo (immagine o testo) con alcune configurazioni specifiche, come il caricamento lazy e il formato WebP, insieme a uno stile personalizzato.
  
• ReadingTime.vue: questo componente prende un testo come input, calcola il tempo di lettura stimato dividendo il numero di parole per la velocità media di lettura (200 parole al minuto) e arrotondando per eccesso.
  
• YouTube.vue: questo componente prende un URL di YouTube come input e lo visualizza utilizzando il componente <LazyYoutube>, che gestisce il caricamento lazy del video per migliorare le prestazioni della pagina

Altri componenti sono stati sviluppati per gestire le altre parti del post:

• BarraDiRicerca.vue: questo componente crea una barra di ricerca con la possibilità di filtrare i risultati per categoria, autore e tag, e gestisce il rendering lato client. Inoltre, include funzioni per avviare e cancellare la ricerca, con uno stile specifico per diverse parti della barra di ricerca.
  
• AuthorDetail.vue: questo componente prende l'oggetto <author> come input e visualizza le informazioni sull’autore, inclusi nome, immagine, biografia e link ai social media, con uno stile specifico.
  
• SocialShare.vue: questo componente crea pulsanti di condivisione per un post, permettendo agli utenti di condividere il post su Facebook, Twitter, LinkedIn e via email, con uno stile specifico e icone rappresentative.
  
• [catSliug].vue: questo componente visualizza i post di una specifica categoria, con la possibilità di filtrare i post in base a una stringa di ricerca, e gestisce il rendering lato client e le meta informazioni per il SEO.
  
• [tagSlug].vue: questo componente visualizza i post di una specifico tag, con la possibilità di filtrare i post in base a una stringa di ricerca, e gestisce il rendering lato client e le meta informazioni per il SEO.
  
• [authorSlug].vue: questo componente visualizza i post di uno specifico categoria, con la possibilità di filtrare i post in base a una stringa di ricerca, e gestisce il rendering lato client. Inoltre, visualizza le informazioni sull’autore, inclusi nome, immagine, biografia e link ai social media.

Infine sono stati sviluppati componenti per la gestione della Header e del Footer:

• MainHeader.vue: questo componente crea l’header del sito web, includendo contatti, link ai social media, un logo, una barra di navigazione con menu a discesa, e una barra di ricerca, con uno stile specifico per diverse dimensioni dello schermo.
  
• MainFooter.vue: questo componente crea il footer del sito web, includendo informazioni di contatto, sedi, partner principali, e link alla privacy, con uno stile specifico per diverse sezioni.

Accessibilità del progetto web

Per quanto attiene alle specifiche sull'accessibilità, sono state seguite le linee guida per l'accessibilità dei contenuti web (WCAG) 2.2 in modo che tutto il blog ottenga una valutazione eccellente data dagli strumenti di misurazione come Lighthouse (valore pari a 100).

Particolare attenzione, infatti, è stata riservata al contrasto dei colori, alla disposizione degli elementi, alla possibilità di rendere "parlante" ogni elemento per aggiungere una descrizione. Ovviamente nessun testo sulle immagini senza una adeguata valutazione della leggibilità degli stessi o avvii in automatico di riproduzione.

Questo, per esempio, è il risultato che ci offre uno dei tool per fare un check online dell'aderenza "tecnica" alle linee guida:

Test effettutato sul sito -> digitale.co/accessibilita

Differenza rispetto ad HubSpot CMS

In confronto, HubSpot CMS, dove era ospitato il blog precedente, è una piattaforma più prescrittiva, progettata per utenti che preferiscono una soluzione tutto-in-uno senza la necessità di scrivere codice. Mentre HubSpot offre una vasta gamma di funzionalità integrate, può non fornire lo stesso livello di personalizzazione e controllo che si ottiene con una soluzione headless come Sanity in combinazione con Nuxt.js.

In conclusione, la scelta tra HubSpot CMS e la combinazione di Sanity e Nuxt.js dipende dalle esigenze specifiche, dalla strategia digitale e dalle risorse di sviluppo. Se cercavamo una soluzione altamente personalizzabile che potesse crescere e adattarsi insieme al nostro business, la combinazione di Sanity e Nuxt.js si è rivelata la scelta giusta per noi.