Sommario
  1. Il Full Cycle
  2. La Filosofia di Gatsby
    1. Alternative comuni per fare siti web e app
    2. Funzionalità
      1. Performance
      2. Esperienza di Sviluppo
      3. Estensibilità
    3. Communities
  3. Esempio Rapido
  4. La Guida a GatsbyJs

Go Full Cycle con GatsbyJs

La pietra filosofale dello sviluppo Fontend moderno

Il Full Cycle

Se non hai letto l'articolo sul Full Cycle Development ecco qui un riassuto delle tappe del ciclo di vita di un prodotto:

  • Pianificazione: Come vogliamo fare Cosa
    • Visione - L'idea
    • Analisi - La ricerca
    • Design – La soluzione
  • Dev/Ops: Il Processo di produzione dei servizi
    • Sviluppo – Realizzazione
    • Test e Q. A. – Validazione
    • Distribuzione – Messa online
  • Marketing: La terza vita del prodotto
    • Adozione - L'Educazione degli utenti
    • Assistenza – L'Ascolto delle esigenze
    • Innovazione – Nuove funzionalitá

In questo articolo vedremo come muoverci con disinvoltura tra tutte queste informazioni grazie a GatsbyJs.

La Filosofia di Gatsby

La Vision del progetto Gatsby è rendere semplice la creazione di siti web ed app, fornendo blocchi di costruzione di alto livello ed una rete di aggregazione per qualsiasi tipo di contenuto: da un file di testo al vecchio e caro WordPress.

Alternative comuni per fare siti web e app

I Frameworks JAMstack come Jekyll, Next.js, e Nuxt.js consentono di usere il materiale organizzato in cartelle (testi e immagini) trasformandolo in pagine di un sito web, tipicamente un blog.

I CMS tradizionali, come WordPress o Drupal, offrono un editor di testi online per creare il contenuto. Puoi personalizzare l'aspetto e le funzionalità del sito usando temi e plugin o scrivendo codice PHP e JavaScript. Il contenuto è salvato sul database ed il sistema deve essere ospitato su un server.

Funzionalità

Gatsby mantiene le sue promesse e prima di presentare l'elenco degli argomenti di questa guida introduttiva vorrei evidenziarti le funzionalità di base offerte da questo progetto:

Performance

  • CDN senza server per abbattere i LAG
  • Google AMP per un'indicizzazione privilegiata SEO
  • Immagini Progressive e Responsive per risparmiare banda
  • Tecnologia PWA per accesso offline e pre caching avanzato (per disintegrare i LAG)

Esperienza di Sviluppo

  • Niente Server = meno manutenzione
  • Metodologia di sviluppo 12 Factors (you MUST read about it!)
  • Protezione XSS e CORS
  • Gestione Moderna del Frontend (assets, css, js)
  • Auto analisi e test del codice
  • Editing in tempo reale con Live Preview ed Hot Reloading
  • Styling su misura con TailwindCss e TypographyJs
  • UI e UX sotto controllo con Componenti React, Sketch e StoryBook

Estensibilità

  • Temi e Plugin specifici per Gatsby
  • Componenti React
  • Librerie JavaScript e CSS
  • API e Servizi esterni (Autenticazione, Abbonamenti, Pagamenti)

Communities

Il successo di Gatsby si vede nell'entusiasmo dei suoi utilizzatori che hanno creato plugin e soluzioni a qualsiasi problema, questi sono i link alle sezioni Gatsby delle communities maggiori:

Esempio Rapido

Avendoci l'ambiente di sviluppo configurato questo è il workflow per la creazione di un nuovo sito:

  1. Predisponi l'ambiente di sviluppo.

    npm install gatsby yarn
  2. Scegli lo starter e i temi

    gatsby new mywebsite.com https://github.com/SaimirKapaj/gatsby-markdown-typescript-personal-website
    
    yarn add my-theme
  3. Configura e personalizza il progetto

    cd mywebsite.com
    yarn develop
    1. Per le informazioni basilari quali il nome e l'indirizzo del sito web: apri il file gatsby-config.js e modifica in particolare le sezioni siteMetadata e gatsby-plugin-manifest.

    2. Crea un'icona del logo (anche online con AndroidAssetStudio) e sostituiscila con quella che si trova in src/assets/images/icon.png

    3. Definisci i font ed i colori con i file globalStyle.ts e typography.ts della cartella src/assets/styles.

  4. Crea le Pagine

    Nella cartella src/data troverai il contenuto testuale del sito web sparso in diversi file con estensione .md o yaml.

    Per aggiungere nuove pagine al blog crea nuovi file e prendendo spunto da quelli presenti.

    Per scrivere velocemente si utilizza la sintassi Markdown.

    In cima al file invece è presente un blocco di testo denominato frontmatter che serve a definire i metadati del post.

    src/data/blog/primo-post.md:

    ---
    slug: '/blog/primo-post'
    date: '2020-12-24'
    title: 'Buon Nasale!'
    ---
    
    Tanti auguri di buon Nasale!
    
    ## Questo è un titolo H2
    
    C'è anche:
    
    - il **grassetto**
    - il _corsivo_
    - e ovviamente le liste
    
    1. numerate
    2. e subordinate
    
    Ma ci sono anche le emoji:
    
    ## 🤓 💅🏿 🌔 🤯

    che si traduce in:

    Tanti auguri di buon Nasale!

    Questo è un titolo H2

    C'è anche:

    • il grassetto
    • il corsivo
    • e ovviamente le liste
      1. numerate
      2. e subordinate

    Ma ci sono anche le emoji:

    🤓 💅🏿 🌔 🤯

  5. Test

    gatsby build
    gatsby serve

    Vai su localhost:9000 con Chrome in modalità incognito pere in modo che le estensioni non interferiscano col test, apri gli strumenti di sviluppo e avvia una scansione nella scheda LightHouse

  6. Deploy

    Il Deploy classico avviene tramite un semplice invio delle modifiche al repository configurato in una delle Pipeline di CI/CD offerte da Gatsby.

    git add .
    git commit -m "Primo Rilascio"
    git push
  7. Analisi

    A seconda dei plugin configurati (Anlaytics, Sentry, etc) avrai a disposizione diverse metriche da analizzare.

Et voilà: il Full Cycle è online, pronto per essere Adottato, Assistito ed Innovato!

La Guida a GatsbyJs

Leggi la mia guida a gatsby