Benvenuti 👋!

selfie 🤳

Anni '90: sito statico

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

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

Static Sites Generators

StaticGen.com

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?

DEMO:


CaFE's Ale House 🍻

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