Che cos'è Gatsby JS e in che modo gli sviluppatori di e-commerce lo usano per creare negozi velocissimi?

Scott Fitzgerald scrisse una lettera al suo editore nel 1922 annunciando la sua intenzione di iniziare a scrivere un nuovo romanzo che descrisse come: 

"[S]qualcosa di nuovo:qualcosa di straordinario, bello, semplice e strutturato in modo intricato."

Tre anni dopo pubblicò "Il grande Gatsby".

È questa bellissima semplicità, in contrasto con la sontuosa stravaganza del personaggio di Jay Gatsby, che viene in mente il framework open source GatsbyJS. Creato nel maggio 2015 da Kyle Mathews, Gatsby è, nella sua forma più semplice, un modo semplice per creare un sito Web con React.

Fitzgerald è morto prima che "The Great Gatsby" ricevesse ampi consensi, ma Mathews ha avuto più fortuna. Poco più di sei mesi dopo il suo lancio, quando Mathews ha parlato alla conferenza React nel gennaio 2016, le persone lo stavano già utilizzando.

"Pensavo che le persone usassero solo siti statici per siti con markdown o basati su JSON, ma come si è scoperto, c'era un folto gruppo di sviluppatori interessati a superare i limiti di ciò che possono fare i siti statici", ha affermato Mathews.

La popolarità è cresciuta così tanto che nel 2018 Mathews e diversi collaboratori principali hanno formato Gatsby Inc. per aiutare i team di sviluppo a creare "siti web basati su CMS con strumenti moderni".

Oggi ci sono più di 107.000 siti live su Internet che utilizzano Gatsby JS.

Cos'è Gatsby?

Gatsby è un generatore di siti Web statici (SSG) open source basato sul framework di sviluppo frontend React e utilizza la tecnologia Webpack e GraphQL. Può essere utilizzato per creare siti statici che sono app Web progressive, seguono gli standard Web più recenti e ottimizzati per velocità e sicurezza.

In un articolo sul blog degli sviluppatori di BigCommerce di Karen White, rileva la percezione che gli SSG possano essere utilizzati solo per siti incentrati sui contenuti, non quelli con elementi dinamici. Ma dice che con React insieme ad esso, Gatsby può creare siti simili a app anche per l'e-commerce.

"Tutto questo per dire che Gatsby offre la velocità di un sito generato staticamente e la funzionalità di un framework", scrive.

SCOPRI DI PIÙ SU GATSBY + BIGCOMMERCE

Per ulteriori informazioni su come Gatsby e BigCommerce lavorano insieme, dai un'occhiata al nostro blog per sviluppatori.

Leggi ora

1. Generatore di siti statici.

In un certo senso, i "generatori di siti statici" sono esattamente come suonano. Ma cosa significa veramente? Il fatto che un sito sia statico o dinamico dipende dal fatto che la pagina sia codificata manualmente come pagina statica e quindi accessibile da un utente, o se la pagina viene generata dinamicamente su richiesta tramite un sistema di gestione dei contenuti mentre gli utenti vi accedono. Quest'ultimo richiede l'elaborazione lato server.

Un generatore di siti statici offre un compromesso tra i due consentendo agli sviluppatori essenzialmente di "scrivere in modo dinamico e pubblicare in modo statico". Con gli SSG, gli sviluppatori creano un sito statico distribuito su un server HTTP. Ci sono solo file e cartelle:nessun database, nessun rendering lato server. Quando un utente richiede una pagina, il server restituisce il file corrispondente.

Gli SSG hanno anche vantaggi di sicurezza informatica. Gli aggressori informatici utilizzano metodi come scripting, iniezioni di database SQL o vulnerabilità del database lato server, ma gli SSG lo aggirano perché sono composti solo da file statici e non fanno riferimento ai database.

2. Reagisci.

React è una libreria JavaScript efficiente e flessibile per la creazione di interfacce utente, secondo Reactjs.org. Questo framework basato su componenti offre agli sviluppatori una serie di funzionalità di base leggere e ampiamente applicabili che possono utilizzare per creare applicazioni mobili o a pagina singola.

Uno dei vantaggi dell'utilizzo dei componenti React è che una build modulare aiuta a mantenere tutto coerente quando si hanno interfacce utente complicate.

3. GraphQL.

GraphQL è un linguaggio di query per API e runtime per soddisfare tali query con i dati esistenti. Questo è diventato popolare tra gli sviluppatori per alcuni motivi. Innanzitutto, le tue richieste di dati possono essere strutturate in modo dichiarativo, il che significa che puoi interrogare l'API per i campi esatti che desideri senza dover gestire una risposta che includa proprietà extra.

Quindi, le query GraphQL possono comprendere più risorse in un'unica richiesta. "Un'API GraphQL ha essenzialmente un singolo endpoint in grado di eseguire query su qualsiasi dato a sua disposizione", ha affermato White.

Ridefinisce il design dell'API e l'interazione client-server per migliorare l'esperienza degli sviluppatori, consentendo esperienze utente senza interruzioni anche multipiattaforma e su dispositivi mobili.

4. Pacchetto Web.

Webpack è un bundler di moduli open source per JavaScript. "Mette tutte le tue risorse, inclusi JavaScript, immagini, caratteri e CSS, in un grafico delle dipendenze". Ci sono diversi vantaggi nell'utilizzo di Webpack, tra cui uno stile più semplice, la suddivisione del codice, un maggiore controllo su come vengono elaborate le risorse, distribuzioni di produzione stabili e una maggiore velocità di caricamento delle pagine.

L'ecosistema Gatsby:plug-in e avviatori

I plugin ti consentono di connettere Gatsby con piattaforme di terze parti e importare i dati esposti tramite un livello GraphQL.

Uno dei motivi per cui gli sviluppatori amano Gatsby è perché è basato su React. Ciò significa che puoi utilizzare qualsiasi pacchetto che già utilizzi con NPM (un gestore di pacchetti per i pacchetti Node.js).

Gatsby viene fornito con alcuni avviatori predefiniti e riduce la necessità di codice standard. Poiché Gatsby è open source, tuttavia, avrai anche accesso a un numero ampio e crescente di plug-in, avviatori e trasformatori creati dalla comunità Gatsby esistente. Basta guardare la pagina di Gatsby su GitHub per vedere più di 3.500 contributori.

Inoltre, BigCommerce ha rilasciato un modello CMS Gatsby-Netlify per iniziare subito a sviluppare una vetrina PWA serverless.

4 caratteristiche degne di nota di Gatsby

Se c'è una cosa su cui tutti possono essere d'accordo, è che i siti Web di Gatsby possono essere molto veloci. Ma ci sono anche molti altri vantaggi, in particolare se sei uno sviluppatore che ha già familiarità con React. Ecco alcune delle caratteristiche più degne di nota di Gatsby.

1. Costruito per le prestazioni.

Secondo i test delle prestazioni condotti dal fondatore di Gatsby, Kyle Matthews, i siti Gatsby sono, in media, 2-3 volte più veloci di tipi simili di siti e il framework stesso è responsabile delle prestazioni, quindi è fuori dal comune come sviluppatore.

"Tutto quello che devi fare è creare il codice sorgente e Gatsby.js compilerà quindi la configurazione Webpack più performante per costruire il tuo sito", ha affermato Sarah Mischinger di Storyblok.

I generatori di siti statici come Gatsby aumentano la velocità e le prestazioni perché tutto ciò che il server deve fare è restituire un file invece di eseguire query sul database e costruire ogni pagina come richiesto. Gatsby gestisce tutto il recupero dei dati e li usa per generare file HTML statici, JavaScript e CSS, rendendolo più veloce.

In un articolo su Medium, Nicholas Feitel scrive che il suo sito Gatsby "è stato caricato due volte più velocemente della mia semplice app React e CINQUE volte più veloce di un sito complesso come LinkedIn". Con Gatsby, non dovrai fare affidamento sui server per la generazione dinamica delle pagine, ma esegui il pre-rendering durante la compilazione e utilizza i CDN per la pubblicazione.

2. Ecosistema open source.

Gatsby ha un vasto ecosistema di plugin, potenti integrazioni e un'eccellente documentazione. La sua vasta comunità open source è uno dei maggiori punti di forza del meta-framework. La community di Gatsby ha già creato oltre 2.000 plugin, quindi è molto probabile che troverai uno strumento già realizzato per soddisfare le tue esigenze.

3. Può trasferire facilmente i dati.

Con Gatsby, puoi caricare dati da quasi tutte le origini dati, quindi puoi utilizzare qualsiasi strumento ti piace di più per gestire i contenuti mentre usi ancora React e GraphQL sul lato dello sviluppo. I plug-in di origine ti consentono di integrarti con soluzioni SaaS e altri strumenti di terze parti senza una configurazione estesa e Gatsby fornisce anche supporto API per l'aggiunta di dati personalizzati.

Questo, afferma Karen White, è il grande punto di forza di Gatsby:"Gatsby introduce il concetto di "rete di contenuti" per descrivere il modo in cui collega piattaforme di terze parti".

"La mesh di contenuti è un passaggio dalle piattaforme monolitiche all-in-one verso un modello in cui ogni piattaforma di terze parti contribuisce con una funzionalità specializzata all'architettura complessiva, consentendo a ciascuna piattaforma di fare ciò che sa fare meglio e la mesh di contenuti a riunire tutto in modo coeso."

4. Gatsby esegue il rendering di pagine e percorsi con problemi minimi.

Usando solo React, dovresti comunque creare un percorso per i componenti nella cartella delle tue pagine. In Gatsby, tuttavia, avendo un componente in una cartella delle pagine, genera automaticamente la pagina, senza router o switch.

Difficoltà con il Gatsby Framework

Come la maggior parte dei framework open source, Gatsby è ancora in evoluzione. Ma allo stato attuale, ci sono alcuni aspetti negativi nel lavorare con esso, a seconda delle tue capacità di sviluppo e del tempo che sei disposto a impegnarti per costruire.

1. Curva di apprendimento acuta.

Se sei disposto a dedicare tempo e fatica, Gatsby ha a disposizione molta documentazione solida e una comunità di utenti impegnata. E, come osserva Matthew Bunday di Zen of React, "Investire troppo nella costruzione del tuo negozio online utilizzando le nuove tecnologie potrebbe sminuire il tuo core business".

2. Plugin e starter non sono sempre della massima qualità.

Con lo sviluppo open source, devi prestare molta attenzione alla qualità di ciò che stai ricevendo e quali standard stanno seguendo i costruttori. Kalin Chernev scrive:"Se GatsbyJS deve essere preso sul serio, gli esempi e i punti di partenza nella comunità dovrebbero avere standard migliori".

3 casi d'uso importanti di Gatsby

I casi d'uso per Gatsby sono in continua espansione, ma qui ci sono i primi tre casi d'uso attuali, incluso un caso d'uso specifico per il commercio nel commercio senza testa.

1. Crea un sito statico utilizzando un CMS headless.

Se tutto ciò di cui hai bisogno è una pagina web statica che serva HTML, JavaScript e CSS, Gatsby è una scelta eccellente. Puoi usarlo per creare pagine dinamicamente da quasi tutte le fonti. Quando aggiorni il contenuto nel tuo CMS, puoi configurare un trigger automatico per aggiornare il contenuto nel sito statico. Ciò significa che il sito Web viene ricostruito solo quando il contenuto viene aggiornato.

2. Crea app Web progressive (PWA).

Gatsby è stato progettato da zero per essere un framework PWA. Viene fornito con solide funzionalità PWA ed è progettato per essere veloce e altamente accessibile.

Gatsby offre un'esperienza simile a PWA perché esegue il pre-rendering del tuo sito:non c'è codice lato server, database, ecc. Una volta caricato, React subentra per offrire un'esperienza di navigazione simile a un'app e prestazioni percepite elevate. L'ottimizzazione pronta all'uso che accompagna Gatsby include la suddivisione dei bundle di codice, il caricamento lento dei percorsi, il pre-caricamento di risorse importanti e l'integrazione di CSS critici.

3. Crea un sito di e-commerce senza testa.

Il concetto di mesh dei contenuti di Gatsby si allinea bene con l'approccio del commercio senza testa di sostituire le soluzioni all-in-one con modularità e flessibilità. Il commercio senza testa disaccoppia il front-end, o testa, del sito di e-commerce dal motore di e-commerce che alimenta il back-end.

Come spiega Karen White:“Un sito di e-commerce senza testa che utilizza BigCommerce utilizzerebbe BigCommerce per gestire prodotti, ordini e creazione del carrello, ma una tecnologia diversa da Stencil per eseguire il rendering del livello di presentazione. Il livello di presentazione alternativo potrebbe essere un front-end React personalizzato, un CMS come WordPress o Drupal o Gatsby."

Valutare se Gatsby ha senso per te

Il fatto che tu debba o meno utilizzare Gatsby dipende molto dalla tua visione per la tua attività e dalle tue capacità di sviluppo interne.

Se hai un team che è a tuo agio con le tecnologie correlate di Gatsby, e soprattutto se hai già un sistema di gestione dei contenuti che ami, utilizzare Gatsby per il tuo negozio di e-commerce è un'ottima opzione. I negozi molto complessi o che aggiungono frequentemente nuovi prodotti dovrebbero dare un'occhiata più da vicino ai pro e ai contro prima di entrare.

1. Vuoi un sito statico, come un semplice sito web personale o un blog?

"Statico" non significa che il contenuto non sia interattivo o che non cambi mai. Ma i siti statici sono un'ottima scelta per siti Web semplici con molti contenuti che non cambiano spesso. Anche se tecnicamente non è necessario disporre di un CMS per gestire questi contenuti, si consiglia vivamente di semplificare l'utilizzo di tali contenuti.

2. Il tuo sito è complesso?

Siti molto complessi con molti dati che cambiano e pezzi in movimento possono essere rallentati aumentando i tempi di costruzione. Inoltre, se il tuo sito dipende da dati che non vengono recuperati fino al rendering della pagina, perderai i vantaggi di una pagina generata staticamente.

3. Hai già percorsi generati dinamicamente?

Se hai dei percorsi generati dinamicamente sul tuo sito, non otterrai i vantaggi delle pagine generate staticamente se non le conosci in fase di creazione.

Conclusione

Gatsby è molto popolare tra gli sviluppatori in questo momento e per una buona ragione. Gli sviluppatori adorano React, su cui si basa Gatsby, e ci sono molte risorse disponibili sia su React che su Gatsby. È anche altamente flessibile ed estensibile e, se abbinato a un sistema di gestione dei contenuti senza testa, può essere un modo rapido e potente per fornire contenuti.

Gatsby e generatori di siti statici simili stanno iniziando a diventare popolari anche per i negozi di e-commerce, ma questo è un caso d'uso un po' più complesso. Ti suggeriamo di approfondire i requisiti e le capacità prima di entrare. Per il giusto tipo di negozio con il team giusto, tuttavia, Gatsby può presentare in modo bello e veloce una vetrina ricca di contenuti con un backend di e-commerce stabile e sicuro.