Introduzione

Fare un sito è una cosa che può fare chiunque di questi giorni. Fare un sito performante, invece, è una cosa ancora per pochi.

GatsbyJS ci viene in aiuto promettendoci di poter fare siti e web app ad alte prestazioni. È un framework open source che utilizza React e che permette di avere un'esperienza di sviluppo simile a quella delle web app.

Le principali features di GatsbyJS sono:

• l’utilizzo di tecnologie recenti, supportate e performanti, come React e webpack;
• l'utilizzo di Graphql per la gestione dei dati;
• è un generatore di file statici che si possono caricare su una CDN, riducendo costi e gestione;
• si basa sullo JAM Stack;
• i siti e le web app generati sono anche delle PWA (Progressive Web App);
• usa dns-prefetch, prefetch e preload permettendo di velocizzare al massimo la navigazione tra le pagine.

Come funziona GatsbyJS

• GatsbyJS può leggere da una qualsiasi fonte di dati: CMS, file statici, API, Database, etc. Ci sono parecchi plugin che possono coprire qualsiasi necessità;
• il framework, dopo aver letto tutti i dati, renderizza le pagine del sito come file statici;
• l’applicazione React associata viene poi suddivisa in modo da poter sfruttare il lazy loading;
• infine, i file statici generati possono essere messi su un qualsiasi server che espone file statici.

JAM Stack

• Javascript: parte dinamica che gira nel client;
• API: i dati sono letti da Javascript attraverso API REST;
• Markup: i file html devono essere creati a build time.

Plugin

Ci sono plugin di qualsiasi tipo: è possibile coprire tutte le necessità per migliorare la SEO, leggere e convertire immagini ed impostare la PWA.

Performance

È bene tenere a mente le performance e le best practice durante lo sviluppo. Lighthouse di Google è sicuramente un buon strumento per tenere tutto sotto controllo. Con GatsbyJS è possibile ottenere decisamente degli incredibili risultati.

Evento al MUG

Il 18 Giugno siamo stati ospiti del MUG per parlare di GatsbyJS, qui potete vedere l'intera presentazione.

Concludo condividendo le slide. Se avete delle domande non esitate a scriverci via chat oppure via email ad info@wavelop.com.

Riferimenti

• https://www.gatsbyjs.org/
• https://jamstack.org/
• https://m-u-g.github.io