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.
Cosa serve oggi nello sviluppo web?
Dal mio punto di vista, servono principalmente 3 elementi:
- prestazioni del siti web e delle web application,
- integrazione di contenuti e dati da più sorgenti,
- velocità di sviluppo.
Cos'è Gatsby?
Gatsby (o GatsbyJS) è un sistema che mette a disposizione dei team di sviluppo un framework open source dedicato al frontend per la creazione di siti web dinamici e ottimizzati, e una piattaforma cloud per distribuirli su una rete ultraveloce.
L'architettura sulla quale si fonda Gatsby è "JAMstack", progettata per rendere il web più veloce, più sicuro e più facile da scalare grazie a due principi fondamentali: il pre-rendering e il disaccoppiamento.
Gatsby, in pratica, è una soluzione alle tre necessità dello sviluppo di oggi (elencate all'inizio del post) basata su ReactJS e GraphQL.
Cosa permette di fare Gatsby?
Proviamo a sintetizzare e a semplificare quali sono le funzionalità principali della piattaforma.
Creare siti web e PWA velocissimi
Implementando i progetti con Gatsby, i siti web diventano delle perfette web application (PWA): velocissime e pronte all'uso. Questo significa che, grazie alle tecnologie utilizzate e ad una struttura del framework costruito per questo scopo, le pagine vengono caricate in millisecondi e le transizioni risultano fluide.
“To paraphrase Tolstoy, all fast websites are alike, but all slow websites are slow in different ways.” — Kyle Mathews, creator of Gatsby
Combinare contenuti e dati da qualunque sorgente
I siti web stanno diventando sempre più complessi, e sempre più spesso è necessario integrare contenuti e dati da diversi CMS, ad esempio WordPress o Drupal, piattaforme di e-commerce come Shopify, fino a sistemi personalizzati attraverso l'utilizzo di API.
Gatsby consente agli sviluppatori di estrarre e visualizzare rapidamente i contenuti da qualsiasi fonte ed origine dati.
La homepage del blog "Engineering & Data Science" di Airbnb, ad esempio, è realizzata con Gatsby, ma i post sono su Medium.
Grazie alla possibilità di integrare diverse sorgenti di dati, quindi, potremmo utilizzare i contenuti istituzionali ed il blog da WordPress, il catalogo prodotti da un PIM (Product Information Management) e le giacenze dal gestionale. Il tutto armonizzato nel frontend da Gatsby.
Sviluppare in maniera pulita, veloce e moderna
Gatsby porta il modello dei componenti di React nei siti web. L'interfaccia utente dichiarativa semplifica il debug del codice e aiuta i team a muoversi più velocemente. Inoltre, permette di scrivere in Javascript moderno o SCSS / LESS senza dover impostare una "pipeline di risorse".
Il risultato è uno sviluppo più rapido, con le più moderne tecnologie e riducendo la probabilità di introdurre dei bug.
Distribuire i contenuti globalmente con un clic
Grazie all'utilizzo di CDN (Content Delivery Network), i contenuti possono essere serviti in modo più veloce e sicuro ovunque nel mondo.
Invece di app server e database, con complessità operativa e rischio di tempi di inattività, Gatsby genera il sito web come file da distribuire su una CDN. Questo significa che finché la CDN è attiva, l'applicazione o il sito web non genererà mai errori e sarà sempre raggiungibile.
Grazie al cloud messo a disposizione da Gatsby gli sviluppatori possono contare su una piattaforma unificata per creare, visualizzare in anteprima, distribuire e ospitare le migliori esperienze su una CDN velocissima.
Chiaramente è possibile utilizzare anche altre CDN, ad esempio Netlify, Cloudflare, AWS Cloudfront o Akamai.
Gatsby e la SEO
Le pagine vengono renderizzate lato server, quindi tutti i contenuti sono perfettamente scansionabili da Googlebot e dai crawler degli altri motori di ricerca.
Esistono diverse risorse per approfondire l'argomento in maniera molto dettagliata. Qui sotto puoi trovare la pagina ufficiale del sito web di Gatsby ed un video in cui vengono illustrati alcuni componenti del sistema dedicati proprio alla SEO.
Conclusioni
Non so se ti è chiara la direzione che sta prendendo lo sviluppo (soprattutto) del frontend, ma le moderne tecnologie ed architetture permettono di raggiungere prestazioni incredibili. Un altro esempio lo stai provando navigando questo sito web, che non è realizzato con Gatsby ma con Ghost (ho inserito un approfondimento alla fine del post).
Sento un'aria effervescente ed emozionante per il prossimo futuro, e tutto ciò favorirà enormemente l'esperienza dell'utente.
"Il contenuto è re": ormai siamo stanchi di sentirlo.. ma lo sanno anche i competitor!
Se aggiungiamo al contenuto le prestazioni, avremo il re con esercito e fortezza. I competitor sanno anche questo, ma realizzare siti web veloci è difficile.
Per approfondire
Alessio Pomaro