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.

Gatsby: un esempio di quello che serve oggi nello sviluppo web.
Cos'è Gatsby? Un esempio di quello che serve oggi nello sviluppo web!

Cosa serve oggi nello sviluppo web?

Dal mio punto di vista, servono principalmente 3 elementi:

  1. prestazioni del siti web e delle web application,
  2. integrazione di contenuti e dati da più sorgenti,
  3. 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.  

For fast and secure sites | Jamstack
What is the Jamstack? Why use the Jamstack? How do I get started? Learn what the Jamstack is all about and why it’s the best approach for building faster, more secure websites.

Gatsby, in pratica, è una soluzione alle tre necessità dello sviluppo di oggi (elencate all'inizio del post) basata su ReactJS e GraphQL.

Gatsby è basato su React e GraphQL
Gatsby è basato su React 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
What makes Gatsby sites so fast?
What makes Gatsby sites so fast?

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.

La homepage di airbnb.io è realizzata con Gatsby, prelevando i contenuti da Medium
La homepage di airbnb.io è realizzata con Gatsby, prelevando i contenuti da 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".

Creating UIs with React
Creating UIs with React

Il risultato è uno sviluppo più rapido, con le più moderne tecnologie e riducendo la probabilità di introdurre dei bug.

Building Beautiful Sites With Gatsby
Building Beautiful Sites With Gatsby

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.

A Global Edge Network Optimized For Gatsby | Gatsby Cloud
Gatsby is a React-based open source framework with performance, scalability and security built-in. Collaborate, build and deploy 1000x faster with Gatsby Cloud.

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.

SEO with Gatsby
Gatsby can help your site rank and perform better in search engines. Using Gatsby makes your site fast and efficient for search engine…
La SEO con Gatsby

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

Front End Framework With The Speed To Delight | Gatsby
Gatsby provides development teams an open source frontend framework for creating rich, optimized websites and a cloud platform for delivering them on a blazing fast edge network.
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.