Benvenuti 👋!

selfie 🤳

Anni '90: sito statico

Le caratteristiche

• Files statici: HTML, CSS, JS(?), immagini e documenti
• Caricamento del sito tramite FTP 😲

Anni '90: sito statico

I pro

• Il sito risultava abbastanza veloce 🚅
• Hosting economico

Anni '90: sito statico

I contro

• Difficoltà nell'aggiornamento dei dati e asset del sito
• Impossibilità di riutilizzare parti comuni
• L'esperienza utente non era personalizzabile

Anni 2000: sito dinamico

Le caratteristiche

• Dati archiviati in database
• Pagine dinamiche (interpretate, "compilate")

Anni 2000: sito dinamico

I pro

• Gestione dei dati tramite CMS
• Templating e modularità delle pagine
• Esperienza utente personalizzabile

Anni 2000: sito dinamico

I contro

• Il frontend è "legato" direttamente al backend
• Possibili problemi di sicurezza, es. sql injection
• Rallentamenti e performance in calo nel tempo
• Hosting non proprio economico 💸

JAMstack

"una moderna architettura per lo sviluppo web basata su JavaScript, API riutilizzabili e Markup precompilato."

--

Mathias Biilmann

JAMstack

Che cos'è?

• JavaScript: ogni richiesta viene gestita lato client
• API: l'accesso ai dati e servizi avviene attraverso API astratte via HTTPS
• Markup: il template HTML deve essere precompilato durante il deploy

JAMstack

Perché?

• Performance migliori
• Sicurezza elevata
• Scalabilità a costo zero
• Un'esperienza di sviluppo migliore

GatsbyJS (2.0)

Dietro le quinte

• React (16.x)
• Webpack (4)
• Babel (7)
• GraphQL

GatsbyJS

• È una libreria JavaScript per creare interfacce utente progettata da Facebook
• Il rendering della pagina è gestito attraverso il Virtual DOM
• Progettazione a componenti

GatsbyJS

• È un module bundler
• Ottimizza gli import dei file
• Si occupa del code splitting

GatsbyJS

• È un transpiler JavaScript
• Mantiene la compatibilità dei browser (ultime due versioni)
• Aggiungi i polyfills necessari automaticamente

GatsbyJS

• È un Query Language inventato da Facebook
• Soddisfa la capacità di richiedere solo i dati necessari
• Favorisce al massimo l'utilzzo dei tipi di dato
• Evita richieste multiple

GatsbyJS

I punti di forza

• Nessuna configurazione di build
• Performance checklist integrata
• Supporto offline (PWA) e cache delle pagine
• Caricamento progressivo e responsive delle immagini
• Prefetching delle pagine da visitare (Guess.js)
• Lazy loading CSS & JavaScript
• Routing lato client
• Hot reloading durante lo sviluppo
• Vasta disponibilità di plugin (source, seo, AMP, ...)
• Themes e starters

GatsbyJS

Da dove si parte?

GatsbyJS

• Global deployment (7 provider cloud)
• Continuous integration (Git)
• HTTPS automatico (Let's Encrypt)
• Free tier

Marco Valsecchi (valse)

🙏🏻 Grazie!

https://twitter.com/valse
https://www.linkedin.com/in/valse