Smashing Podcast Episodio 20 Con Marcy Sutton: Cos'è Gatsby?

Oggi parliamo di Gatsby. Che cos'è e come si inserisce nel tuo stack di sviluppo web? Drew McLellan parla con l'esperta Marcy Sutton per scoprirlo.

Mostra note

• Gatsby
• Marcy su Twitter
• Il sito personale di Marcy

Aggiornamento settimanale

• "Rendi i tuoi siti veloci, accessibili e sicuri con l'aiuto di Google"
  di Dion Almaer
• "Capire lo sviluppo dei plug-in in Gatsby"
  di Aleem Isaka
• "Creazione di minuscole app desktop con Tauri e Vue.js"
  di Kelvin Omereshone
• "Rimuovere il panico dalla spedizione dell'e-commerce e dagli avvisi di inventario"
  di Susanna Scacca
• "Transizioni CSS in Vuejs e Nuxtjs"
  di Timi Omoyeni

Trascrizione

Drew McLellan: È l'ingegnere capo del team Relazioni con gli sviluppatori a Gatsby. In precedenza, ha lavorato alla libreria di test di accessibilità open source axe-core e ha anche lavorato come ingegnere dell'accessibilità presso Adobe. È appassionata di migliorare il web per le persone con disabilità e ne parla spesso alle conferenze. Nel 2016, O'Reilly ha assegnato alla sua piattaforma web il premio per un lavoro sull'accessibilità.

Drew: È anche co-direttore dei Meetup per l'accessibilità di Seattle e NW Tech Women in una regione locale. Quindi, sappiamo che è un ingegnere esperto e un'esperta di accessibilità. Ma lo sapevi che vuole mandarlo Angel Falls in un barile? I miei fantastici amici, per favore, danno il benvenuto a Marcy Sutton.

Marcy Sutton: Ciao.

Drew: Ciao. Marcy. Come stai?

Marcy: Sto distruggendo. Come stai?

Drew: Sto molto bene. Grazie. Volevo parlarti oggi di Gatsby. Perché è emerso in una conversazione che stavo avendo in un episodio precedente sull'apprendimento di React con Mina Markham. Mi sono reso conto che correvo il rischio di fare la tipica cosa da uomo su Internet di dare un'opinione su qualcosa di cui non avevo esperienza diretta. Quindi non è così che facciamo le cose a Smashing.

Drew: E voglio assicurarmi di coprire adeguatamente Gatsby. E quale modo migliore per farlo se non parlare con qualcuno che lo sa dentro e fuori. Quindi, presumendo che forse ho sentito il nome Gatsby. Ma non ho idea di dove si inserisca nello stack durante la creazione di un sito Web. Cos'è esattamente Gatsby.

Marcy: Gatsby è un generatore di siti Web, attualmente utilizza React. Ma creerà un sito Web statico per te che poi si reidraterà in un'applicazione Web React completa. Quindi ottieni davvero il meglio da entrambi i mondi con build veloci che stai compilando file HTML che verranno caricati velocemente per gli utenti. E poi ottieni tutto questo miglioramento con JavaScript per creare app Web dinamiche davvero interattive.

Marcy: Quindi, è uno spazio davvero eccitante in cui trovarsi. E ho lavorato sul lato dell'apprendimento con la documentazione e ora nel team di Devrel, sono concentrato sul renderlo il migliore possibile, conoscendo le sfide dell'accessibilità con JavaScript e solo cercando di aggiustarlo dall'interno verso l'esterno.

Drew: Molti di noi avranno familiarità, immagino, con il concetto di generatore di siti statici. E Gatsby sembra adattarsi ampiamente a quel ruolo. Ma a me sembra che vada molto oltre la maggior parte degli SSG. E la maggior parte dei generatori di siti sono indipendenti dal codice front-end. Sembra che con Gatsby, ti ritrovi con il codice Gatsby in esecuzione come parte del tuo sito. È una valutazione equa? E se sì, che genere di cose sta facendo Gatsby nel tuo front-end?

Marcy: Sì, direi che il pezzo più importante è il routing lato client. Quindi, Gatsby in questo momento sta usando il router di portata sotto il cofano. Fa una sorta di propria implementazione. Ma questo è il pezzo che quando carichi il tuo sito statico per la prima volta, ci sono file HTML lì. Quindi, se l'utente disattiva JavaScript per qualche motivo, il tuo sito dovrebbe essere ancora lì, avere ancora dei contenuti.

Marcy: Ma se JavaScript è abilitato, è allora che si verifica questo passaggio di idratazione in cui, quando utilizzi i collegamenti nel tuo sito Gatsby, preleverà le risorse da quella pagina, quindi si caricherà più velocemente. Quindi, è tutto abilitato con questo livello JavaScript che ti offre Gatsby. E quindi, oltre a ciò, dipende davvero dal tipo che ciò che stai utilizzando nel tuo sito finirà in quel bundle JavaScript.

Marcy: Ma per le cose che utilizzano molta interattività, come le interfacce accessibili, è un buon posto dove stare. Per me, mi piace davvero avere JavaScript a mia disposizione in ogni momento e avere il mio markup in una buona posizione. So che è una questione di preferenza, se vuoi che il tuo HTML, JavaScript e CSS siano tutti ben accoppiati e c'è spazio per variazioni all'interno della costruzione di Gatsby

Marcy: Non devi sempre usare qualcosa come CSS e JS. Ma si tratta davvero di ottenere la potenza di quel livello JavaScript dinamico, a tua disposizione mentre scrivi il tuo sito web. Non è come questa aggiunta in un file separato.

Drew: Quando penso a come funziona di solito un generatore di siti statici, penso al contenuto forse in file Markdown. E il generatore attraversa quel contenuto e lo fonde con i modelli e crea 10, centinaia, migliaia di file HTML, che sono le pagine del tuo sito web. Quando penso a un sito o a un'app React, penso di più all'esperienza a pagina singola in cui le interfacce vengono create al volo da React. Quindi stai dicendo che Gatsby fa entrambe le cose? Sta creando tutte le pagine e anche migliorandole con JavaScript?

Marcy: Lo è, sì. Gatsby utilizzerà Node.js in fase di compilazione, esaminerà i componenti React e li compilerà in file HTML. Che onestamente, la prima volta che ho guardato Gatsby non ho disattivato JavaScript e ho pensato: "Va bene, ci sono altre pagine qui, cos'è questa?" Ed ero così felice che Gatsby funzioni in quel modo per impostazione predefinita. Creerà file costruiti dai tuoi componenti di reazione, il che è fantastico.

Marcy: Ho esplorato approcci di miglioramento più progressivi poiché è in JavaScript. Ad esempio, se vuoi produrre qualcosa di progressivamente migliorato per gli utenti, dove se hanno JavaScript disattivato, non vuoi tutto questo codice rotto che presuppone che JavaScript sia lì. Quindi ci sono alcune stranezze con esso. Ma puoi aggirare quel genere di cose almeno per i tuoi flussi utente principali in cui vuoi che qualcuno sia ancora in grado di acquistare qualcosa, potresti dover aggiungere un po' di supporto e per quei casi d'uso.

Marcy: Ma sono stato piacevolmente sorpreso dal modo in cui Gatsby lo distribuisce per impostazione predefinita. E quindi, è una scelta che hanno fatto per costruire siti in questo modo, e la valutiamo sempre. È ancora il modo migliore? Cosa dobbiamo fare per dare ai nostri utenti ciò che chiedono? Quindi, stiamo facendo alcune esplorazioni internamente, in corso solo per assicurarci che Gatsby stia facendo il miglior lavoro possibile nella creazione di un sito web.

Marcy: Quindi mantenere piccole le dimensioni dei bundle e assicurarsi che per fare compromessi con ciò che diciamo sia codice performante con pre-lettura. Ad esempio, abbiamo i dati per eseguirne il backup? Questo è il tipo di cosa che mi interessa molto, in quanto sostenitore degli sviluppatori, è assicurarsi che ciò che stiamo impacchettando e raggruppando sui siti Web sia effettivamente necessario e diventi davvero il miglior sito di Gatsby che può realizzare.

Drew: Hai menzionato le prestazioni lì, e c'è una grande attenzione sulle prestazioni. Sembra certamente dal modo in cui Gatsby si presenta. È una vera caratteristica di Gatsby o è solo la natura dei siti Web JAMstack?

Marcy: Penso che possa essere una natura dei siti Web JAMstack. Alla fine, dipenderà da ciò che stai raggruppando sul tuo sito web. Quindi, indipendentemente dal framework o dallo strumento che stai utilizzando, dobbiamo comunque essere attenti a ciò che stiamo inserendo in quei bundle per gli utenti finali. Ma Gatsby mira davvero a darti buone impostazioni predefinite. Non solo per le prestazioni, ma anche per l'accessibilità.

Marcy: Ma questo richiede sempre una valutazione, dobbiamo sempre assicurarci che se abbiamo aggiunto qualcosa, sia ancora performante. Ma sì, ottenendo quel carico utile iniziale di file statici, si caricano velocemente. Molto più veloce del classico sito WordPress che avevo. Ma poi migliorandolo con JavaScript. Ci sono sicuramente dei compromessi.

Marcy: Ma funziona davvero bene, a molte persone piacciono molto i loro siti Gatsby. Quindi, è stato divertente lavorarci a tempo pieno e imparare i dettagli di un framework JavaScript come Gatsby.

Drew: Che tipo di funzionalità per le prestazioni appena Gatsby ha effettivamente messo in atto per velocizzare i tuoi siti?

Marcy: Bene, con il pre-fetching per i link, questo client ha detto cose di routing, direi che è probabilmente la più grande. Semplifica la generazione di un'app web progressiva. Quindi, avendo alcune funzionalità offline, puoi scegliere e scegliere ciò che desideri in termini di contenuti offline e di tipo PWA. Ma fanno davvero quella parte dell'esperienza iniziale, come molti dei siti di esempio iniziali da cui potresti iniziare hanno esempi di utilizzo di un manifest e una sorta di versione moderna del tuo sito web.

Marcy: Davvero, è come non spedire un codice che non ti serve. Questa è una parte importante. La memorizzazione nella cache è davvero la pre-lettura dei collegamenti. Questo è quello che direi che è il pezzo più grande.

Drew: Quindi è qui che il sito sta effettivamente anticipando dove andrà l'utente. È così intelligente o precarica tutto sulla pagina o?

Marcy: No, si basa sull'interazione dell'utente. Quindi, se l'utente scorre verso il basso la porta Visualizza, c'è qualcosa di pre-lettura che accade lì. Se passi il mouse sopra i link, si stima che ci siano buone possibilità che tu possa andare a quella pagina. Abbiamo parlato internamente, beh, immagino, di open source per sapere se il pre-lettura dovrebbe avvenire anche sulla tastiera, quindi l'intersezione tra accessibilità e prestazioni è molto interessante.

Marcy: Ci sono alcuni compromessi lì, come se un utente della tastiera che non può usare il mouse e stia sfogliando ogni collegamento per navigare, dovrebbe davvero recuperare contenuti per ognuno di questi perché un utente del mouse potrebbe essere un po' più selettivo su dove hanno posizionato il cursore del mouse. Quindi, quelle conversazioni le trovo estremamente affascinanti.

Marcy: E cercando di pensare a quali dati abbiamo bisogno per convalidare anche queste ipotesi. Quindi sì, è stato molto interessante esaminare quelle impostazioni predefinite e quali miglioramenti possiamo apportare e verificare davvero la quantità di dati che vengono recuperati? È davvero una buona cosa? Solo per velocizzare un po'? O è abbastanza veloce senza quello? Ci sono soluzioni alternative che potremmo usare come parte del divertimento di lavorare su un framework perché essere in grado di valutare tutti quei compromessi.

Drew: Questo è il pre-recupero di qualcosa che gli utenti ottengono gratuitamente nel loro sito. Quindi devono fare del lavoro per implementarlo?

Marcy: Puoi ottenerlo gratuitamente usando il link Gatsby. Quindi è un componente che viene fornito con Gatsby e quando lo usi, genera tag di ancoraggio. Quindi il tuo HTML è vero HTML e hai sfruttato la piattaforma web in quel modo. Ma nei tuoi componenti React, stai lavorando direttamente con il componente di collegamento Gatsby. E questo ha tutti quei meccanismi per ... Guarda qualunque sarà il tuo futuro HREF, per quel collegamento di dove vuoi andare e andrà a prendere risorse da quel collegamento e precaricarle.

Marcy: Ed è solo interno al tuo sito. Quindi non si spegne e cerca di recuperare cose su altri siti Web. Ma sembra funzionare abbastanza bene. So che alcuni utenti sono attivamente alla ricerca di modi, come se in realtà dovessi rinunciare ad alcune di queste cose. Almeno il routing, non utilizzando il pre-lettura. Usi solo i normali tag di ancoraggio. E poi non ottieni davvero quella funzionalità. È abbastanza facile usare qualcos'altro. Ma alcune delle discussioni che stiamo avendo riguardano il routing lato client e come renderlo il migliore possibile. E quindi, anche quello è uno spazio davvero interessante.

Drew: Quanto devi lavorare da vicino all'interno dell'ecosistema Gatsby in termini di se volessi avere il mio componente di collegamento? Andrebbe tutto bene, non combatterei contro Gatsby per fare quel genere di cose?

Marcy: No, puoi inserire qualsiasi componente desideri, purché funzioni con il runtime di React. Questo è davvero il bello. Qualsiasi cosa tu possa inserire in un'app React, potresti inserirla in un'app Gatsby. C'è anche un plug-in pre-reagire. Quindi, ci sono alcune alternative per lavorare con Gatsby. Ma adoro il modo in cui puoi inserire qualsiasi componente, pronto all'uso, che desideri utilizzare o scrivere il tuo.

Marcy: E penso che la flessibilità sia ciò che piace davvero alle persone. C'è l'avvertenza che utilizza il runtime React. E quindi, devi essere d'accordo con l'uso di React o con questo plug-in pre-React. Ma personalmente, mi piace molto reagire e JSX per lavorare con l'accessibilità e i modelli, in particolare con gli hook React. Quindi, poter usare la capanna nel mio sito di Gatsby è davvero fantastico. Mi piace veramente.

Drew: E com'è il processo di creazione di un sito Gatsby che è presumibilmente un modulo nodo che puoi semplicemente installare e faresti una build come faresti con qualsiasi altro generatore di siti statici?

Marcy: Sì. C'è una CLI che installi a livello globale. E immagino sia se vuoi installarlo a livello globale. Questo è ciò che ti consigliamo, perché puoi eseguirlo da qualsiasi directory sul tuo computer, ma tirerà giù tutto ciò di cui hai bisogno per creare un sito Gatsby. E poi puoi aggiungere, supponiamo di voler utilizzare WordPress come CMS senza testa o qualche altra fonte di contenuto.

Marcy: Puoi installare pacchetti, plugin per farlo funzionare e poi integrarlo con il tuo sito. Ci sono anche alcuni starter e temi che puoi usare per iniziare a funzionare più velocemente. Li ho usati se voglio testare qualcosa o avviare rapidamente un sito per un'integrazione specifica come Drupal o prismic o qualsiasi soluzione CMS o eCommerce o qualcosa che voglio usare.

Marcy: Ci sono molti esempi. Quindi non stai sempre armeggiando con tentativi ed errori cercando di capirlo, ma sono una specie di questi elementi costitutivi che puoi mettere insieme e creare... È ciò che chiamiamo mesh dei contenuti. E quindi, puoi utilizzare queste migliori integrazioni per creare un sito invece di, se avessi un classico sito WordPress, l'esperienza di creazione e il lavoro con i team sono davvero fantastici.

Marcy: Ma c'erano delle carenze nel front-end, come il modo in cui avrebbe funzionato su un dispositivo mobile. Cos'altro? Se volessi una soluzione eCommerce? Penso che ci siano alcune cose che sono più facili da fare al giorno d'oggi, ma essendo in grado di scegliere qualsiasi tipo di soluzione migliore tu voglia per l'autenticazione, o qualunque cosa sia quella moderna, sei tipo: “Vorrei poterlo usare. " Con Gatsby, puoi mettere insieme molte di queste cose e rendere questo modo di costruire una rete di contenuti piuttosto rinfrescante.

Marcy: Soprattutto quando puoi ancora utilizzare quelle integrazioni come WordPress e continuare a lavorare con i team. Quindi, siamo piuttosto entusiasti di questo nuovo modo di lavorare in cui puoi scegliere tutte le tecnologie che ti piacciono o che funzionano per il tuo team.

Drew: Una delle grandi caratteristiche che Gatsby ha fortemente pubblicizzato è questa capacità di estrarre dati o contenuti da una varietà di fonti diverse. Hai menzionato cose come WordPress e Drupal e cosa hai. Tradizionalmente, se stavo usando qualcosa come Jekyll o Eleventy, o qualcosa del genere, avrei bisogno di collegarlo da solo per interagire con le API, magari tirare giù il contenuto e scriverlo in file markdown o file JSON, e poi far funzionare il generatore con quei file.

Drew: Quindi sarebbe una sorta di processo in due fasi, potrebbe usare qualcosa come il bit sorgente, di cui abbiamo parlato in un episodio precedente che fa quel genere di cose? Capisco giustamente che Gatsby ha proprio questa capacità nativa di consumare fonti diverse in un modo in cui altri generatori di siti statici non lo fanno?

Marcy: Penso che ciò che rende Gatsby davvero forte in quest'area sia il suo livello di dati GraphQL e l'ecosistema dei plugin. Quindi, è probabile che qualcuno abbia già scritto un plug-in per qualsiasi fonte di dati che vorresti creare. E se no, probabilmente c'è qualcosa di vicino. Ma l'uso di GraphQL è un po' un sottofondo. Il livello che rende possibili tutte queste integrazioni è l'utilizzo di GraphQL.

Marcy: E quindi, ci sono molte possibilità per ciò che potresti inserire e cerchiamo di semplificare anche la scrittura di plug-in. Quindi è stato davvero bello imparare come scrivere un plug-in e l'AST o Abstract Syntax Tree che crea e in qualche modo imparare come funziona tutto ciò è stato davvero fantastico. Ma sì, direi che ci sono molte cose dallo scaffale che potresti raccogliere senza doverle scrivere tutte da solo, il che è davvero fantastico.

Marcy: Ed è bello avere la flessibilità di tirare in ribasso. Supponiamo che i tuoi sviluppatori vogliano scrivere il ribasso dei contenuti del loro blog, ma il team di marketing non ne è davvero contento, potresti combinare le fonti di contenuto e reperirle da più luoghi. Ho visto persone che acquistano cose da altri repository GitHub e usano un plug-in get per inserire contenuti markdown in quel modo. Molta flessibilità.

Drew: E immagino che tu abbia la possibilità di scrivere i tuoi plugin per estrarre da un'origine dati personalizzata. Supponi di avere un sistema legacy e di voler inserire un nuovo sito Web bello e brillante in primo piano. Potresti scrivere un plug-in che estragga i dati in qualsiasi formato sia necessario e li traduca in qualcosa che diventa più grande di quello con cui lavorare?

Marcy: Potresti sì. E così, i plugin lo abilitano. E poi c'è questa astrazione in più, che chiamiamo temi di Gatsby. E quelli non sono solo il codice dell'interfaccia utente, ma potrebbero essere query GraphQL, configurazioni che impostano un plug-in, quindi è come un plug-in con un utilizzo in bundle insieme. E puoi distribuire quei temi su NPM.

Marcy: E poi, la loro versione e puoi inserirli. E l'intera API è davvero interessante anche per i team che dicono che hai più repository e vuoi inserire i dati in quelli, sarebbe molto ripetitivo avere le stesse query in tutti questi repository nello stesso codice. Quindi, per seccare un po' le cose e non ripeterti così tanto. Puoi usare queste astrazioni chiamate temi, per una sorta di distribuzione attorno a quella logica o codice che abiliterebbe quel plug-in di origine. Quindi, ci sono questo tipo di strati di astrazioni su cui puoi costruire sopra e abbiamo sentito che i team stanno davvero ottenendo molto in questo momento.

Drew: Quindi un tema nel mondo di Gatsby non è un aspetto simile a quello che sarebbe con CMS come WordPress.

Marcy: Sì, voglio dire, può, ma non è tutto quello che è. Quindi, nominare le cose è molto difficile. Ma i temi che mi sono davvero divertito a conoscere solo la flessibilità ed essere in grado di, sì, potresti includere del codice dell'interfaccia utente. Ma potrebbe esserci anche del codice del linguaggio di query che va lì. Ma il fatto che sia un po 'in bundle insieme, lo rende facile da distribuire. Sì, è stata un'astrazione davvero accurata che è stato bello vedere cosa stanno costruendo le persone e quali temi stanno distribuendo, e tutto il resto.

Drew: Sì, posso immaginare che porterebbe ad alcuni usi abbastanza innovativi di Gatsby. Hai visto qualcosa che è stato, in particolare che ha attirato la tua attenzione sul fatto che i clienti lo stanno facendo in modo particolarmente creativo?

Marcy: Sì. Beh, in termini di temi, voglio dire, uno dei primi di cui ho letto c'è un case study sul blog di Gatsby, penso da Apollo. E hanno scritto un sito di documentazione utilizzando temi Gatsby e che utilizzava un plug-in get source. E quindi, disaccoppia davvero il tuo approvvigionamento e il tuo contenuto, facendo in modo che i team possano inserire un tema da utilizzare su più repository.

Marcy: Direi che è il più interessante per me solo per quello che posso immaginarlo abilitando, ad esempio, in passato i team in cui dovevamo procurare contenuti, eravamo così limitati e dove quel codice poteva vivere e quanto ripetibile potrebbe essere. E così, vedendo ora una soluzione in cui i team dicono "Oh, funziona alla grande". E questo è stato anche l'estate scorsa, o come se fosse un caso di studio qualche tempo fa.

Marcy: Da allora, le API sono migliorate e c'è un intero team che lavora sui temi di Gatsby. E so che lanceranno alcuni grandi miglioramenti nelle prossime settimane. Quindi, non voglio rubare loro il tuono, ma ci sono alcune cose belle che arrivano con i temi. Hanno rivisto alcuni dei temi del blog, come i temi principali che offriamo da Gatsby.

Marcy: So che lo stanno usando internamente per creare alcuni dei nostri annunci di prodotto o miglioramenti del prodotto che saranno annunciati qui nelle prossime due settimane. Quindi, un sacco di cose interessanti in corso con i temi di Gatsby e le persone che vendono i propri temi e antipasti. Penso che anche questo sia davvero interessante.

Drew: C'è un po' di mercato che sta nascendo intorno a Gatsby.

Marcy: C'è, sì.

Drew: C'è qualche tipo di formazione online e quel genere di cose se qualcuno vuole... Se qualcuno decidesse che sarebbe entrato davvero in Gatsby e avesse bisogno di impararlo velocemente? Ci sono posti dove possono andare con quel tipo di informazioni disponibili?

Marcy: Una tonnellata? Sì. C'è sicuramente il sito di Gatsby Doc, che è gatsbyjs.org/doc's. E abbiamo tutorial, e ho fatto live streaming quasi ogni settimana per le cose di Gatsby. Ci sono un sacco di educatori che hanno materiale Gatsby su YouTube e varie piattaforme di apprendimento. Egghead, penso che anche alcuni dei miei compagni di squadra di Gatsby abbiano video di Egghead.

Marcy: Quindi, ci sono un sacco di cose là fuori. Direi di controllare le date se trovi qualcosa. Aggiorniamo sempre attivamente i documenti di Gatsby, alcuni dei vecchi video di terze parti e cose che potrebbero, controlla le date su quelli perché non possiamo monitorare ogni singola risorsa di apprendimento per l'aggiornamento. È difficile stare al passo con il nostro personale.

Marcy: Perché c'è così tanto con quante opzioni di approvvigionamento di contenuti e casi d'uso. È uno spazio molto ampio. Ma c'è così tanto materiale di apprendimento là fuori e un sacco di modi per iniziare che puoi provare a trovare cose come a seconda di dove ti trovi nel tuo spettro di apprendimento. Sei alle fasi iniziali, vieni da altre tecnologie e hai solo bisogno di imparare cos'è questa cosa di React.

Marcy: Puoi scegliere e scegliere quali materiali funzioneranno per te in base a dove ti trovi. Di recente ho seguito un corso tramite streaming live chiamato Gatsby Web Creators, in cui siamo passati dall'HTML, CSS e JavaScript per principianti alla creazione del nostro primo sito Gatsby. L'abbiamo appena completato venerdì. E così, è stato davvero bello tornare all'inizio.

Marcy: E poiché Gatsby ha molti materiali, usa React. Quindi, è un bel salto per iniziare con quello. Quindi, volevo davvero tornare indietro e fare i passi per arrivare fino in fondo alla costruzione di cose con React e Gatsby. Quindi è stato davvero bello. E sono entusiasta di continuare su questa strada, in modo che ci sia più materiale per principianti e più cose per aiutare le persone a capire come costruire un sito con Gatsby perché molte di queste abilità sono trasferibili su altri framework.

Drew: Una delle grandi domande che sorgeranno per chiunque stia pensando di creare una sorta di siti per progetti per i clienti usando Gatsby, una delle grandi domande che sorgeranno riguarda la gestione dei contenuti e la presentazione di cose a un cliente. Hai già menzionato come Gatsby può connettersi a diversi sistemi di gestione dei contenuti. È questo il metodo principale che vorresti mettere in atto per affrontare questa domanda? O Gatsby ha qualcosa nel suo ecosistema che consentirebbe alle persone di modificare i contenuti in qualsiasi modo?

Marcy: Sì, direi che avere un CMS o qualcosa del genere può far funzionare molto meglio le relazioni di squadra. Sono stato in quei casi d'uso in cui i team di sviluppo amano "Impara solo HTML". E vedi questa glassa dal cliente del tipo: "No, non posso credere che tu l'abbia appena detto". Quindi avere un sistema in cui le persone possono fare del loro meglio il lavoro in qualsiasi modo gli si addice meglio, è super, super importante.

Marcy: Come se non riuscissi a gestire il marketer GitHub, e potrebbe funzionare qualche volta ma non sempre. E così, avere un'anteprima e costruire un'infrastruttura rende tutto ciò migliore, ed è qui che lo spazio dei prodotti cloud di Gatsby entra nella mischia. Ci sono modi per fare l'anteprima. Senza il lato cloud a pagamento e il cloud Gatsby ha un livello gratuito per i progetti personali, quindi non è tutto a pagamento.

Marcy: Ma abbiamo questo, come l'open source e l'ecosistema dei prodotti in un certo senso si uniscono in modo che Gatsby possa, come organizzazione fondatrice, fare abbastanza soldi per mantenere il framework open source, mantenerlo in salute e mantenere la nostra comunità in movimento insieme a quello . Quindi, questo è il punto in cui questo lato commerciale open source si unisce e consente davvero alcuni di questi flussi di lavoro di cui i team hanno bisogno.

Marcy: Alcune cose come ottenere anteprime veloci, ottenere build fuori dalla porta velocemente e implementate. E quindi, ci sono soluzioni sul lato cloud di Gatsby in particolare, e quindi ovunque ci sia un modo open source per far funzionare Gatsby come con un server di anteprima o qualcosa del genere, cerchiamo di documentarlo e assicurarci che la nostra comunità sappia cosa è cosa e come servire quelle esigenze della squadra.

Marcy: Sì, direi che hai bisogno di un modo per visualizzare in anteprima le modifiche al CMS perché è come quella gratificazione istantanea. Non vuoi aspettare un'ora per una build per vedere alcuni contenuti.

Drew: Quindi è interessante. Il servizio cloud Gatsby ti offre la possibilità di utilizzare un servizio CMS headless, in cui stai solo lavorando con il contenuto, ma non hai alcuna visualizzazione di come sarebbe nel tuo sito ti consente di avere un'anteprima di come funzionerebbe. È giusto?

Marcy: Lo è, sì. E quindi, fa parte del compromesso del disaccoppiamento, il tuo CMS senza testa, che potrebbe aver avuto, come WordPress, potresti semplicemente guardare il front-end, ma gli stiamo dando un nuovo front-end e potenzialmente estraendo altre fonti e altre cose di cui WordPress non è a conoscenza. E quindi, disaccoppiarlo in quel modo ha senso. Ma tu, come membro del team, devi comunque essere in grado di svolgere il tuo lavoro alla velocità a cui sei rapidamente abituato.

Marcy: E quindi, è qui che l'anteprima di Gatsby, le build di Gatsby entrano in gioco per restituire quel front-end ai team in modo che possano collaborare, prendere decisioni, ricevere qualcosa. Quindi è emerso nell'ultimo anno, ottenendo sempre più funzionalità e miglioramenti e che abbiamo sentito da alcuni team che stanno davvero iniziando a vedere aumenti di velocità.

Marcy: E mentre capiamo come, "Okay, se questa build sta andando lentamente, perché è quello?" Di solito è perché il sito è davvero molto grande. Quindi ci siamo concentrati molto sui miglioramenti per i siti di grandi dimensioni e sul miglioramento dei flussi di lavoro collaborativi del team. È un grande obiettivo della squadra in questo momento.

Drew: Quindi il cloud di Gatsby è, immagino che il suo cuore sia un servizio di hosting. È un CDN per la distribuzione dei tuoi siti Gatsby con un carico di funzionalità e caratteristiche specifiche di Gatsby attorno ad esso?

Marcy: Lo chiamerei più un prodotto a consegna continua perché non è un vero CDN. Si integra con CDN come Fastly, Netlify. Ci sono molti fornitori diversi che puoi collegare e alcuni di loro gratuitamente. Puoi fare molto gratuitamente, il che è davvero fantastico. L'ho fatto solo l'altro giorno nella nostra ultima sessione di creatori web di Gatsby, usiamo Gatsby cloud e Netlify per costruire il nostro sito.

Marcy: E ti consente di rendere i siti Gatsby più veloci in particolare, perché ha quei miglioramenti. Deve solo creare un tipo di sito. Quindi, ci sono alcuni miglioramenti che il cloud di Gatsby può apportare, che nessun'altra piattaforma può apportare perché stanno cercando di supportare tutti questi diversi tipi di siti Web e li fanno tutti molto bene.

Marcy: Ma per Gatsby, se questo è tutto ciò che stai costruendo, e ci sono un bel po' di agenzie, che sono tutte coinvolte in Gatsby, e vogliono farlo il più velocemente possibile. Quindi, è qui che il cloud Gatsby può apportare alcuni miglioramenti alle prestazioni specificamente per Gatsby, perché non deve preoccuparsi di altre piattaforme.

Drew: Quindi, il cloud di Gatsby farebbe la tua build e lo distribuirebbe semplicemente in qualcosa come Netlify o presumibilmente in un'intera gamma di luoghi diversi.

Marcy: Sì. Sì, lo farà. E quindi, è il pezzo di Netlify che userebbe in quel momento mentre carica questi pacchetti compilati. File costruiti. Non sta usando le loro build, quindi le build stanno avvenendo sull'infrastruttura cloud di Gatsby, ed è qui che possono verificarsi molti aumenti di velocità. E poi c'è ancora quel passaggio di caricamento per scaricarlo su una CDN, qualunque sia la tua scelta.

Marcy: Ma sì, sembra che le squadre amino davvero questa capacità di vedere. Voglio dire, è una funzionalità che ti saresti perso. E quindi, questa è una cosa necessaria da aggiungere di nuovo, è essere in grado di fare queste anteprime collaborative e ottenere approvazioni e tutto il resto.

Drew: Quindi, Gatsby cloud è fornito come servizio dalla società Gatsby, e c'è anche Gatsby, il progetto open source. È un tipo di relazione simile a quello di WordPress e automatico, in cui hai un'entità commerciale che sviluppa un prodotto open source?

Marcy: Direi di sì, come Drupal. C'è un precedente nella tecnologia per avere queste organizzazioni fondatrici in cui è una specie di circolo virtuoso. E stiamo lavorando per pubblicare alcuni documenti di governance in questo momento per assicurarci che sia super chiaro per la nostra comunità come prendiamo le decisioni. Ma l'intero obiettivo è mantenere Gatsby sostenibile, in modo che possa continuare a essere un progetto open source che le persone possano usarlo anche quando entrano nel cloud di Gatsby.

Marcy: Potresti usare altre soluzioni con esso, se vuoi. E quindi, abbiamo bisogno di abbastanza affari da sostenere, come le persone che ci lavorano. E quindi, sono una sorta di via di mezzo, come se fluttuassi tra l'open source e il lato commerciale e cercando di assicurarmi che diamo la priorità alle cose. Voglio dire, come puoi immaginare, stiamo destreggiando un sacco di cose con quanto siano ampi gli spazi, abbiamo tutti i nostri casi d'uso di nicchia che ci piacciono, ci sentiamo davvero fortemente, dobbiamo fare per il nostro lavoro.

Marcy: Si tratta di molti casi d'uso di nicchia. Quindi, cerchiamo di destreggiarci, stabilire le priorità e ascoltare davvero la nostra comunità su ciò che fa male in questo momento, ciò che è doloroso, cosa sta andando bene. E quindi, è stato un viaggio interessante per me personalmente tornare in devREL e ascoltare davvero la comunità su, come possiamo renderci ancora migliori?

Drew: E c'è una grande comunità intorno a Gatsby, un sacco di persone che lo usano?

Marcy: Ci sono molte persone che lo usano, molti contributori. Quindi, per molte persone, potrebbe essere la prima volta che contribuiscono all'open source come venire al nostro dock e unirsi a noi per Hacktoberfest e cose del genere. E quindi, è stato davvero bello vedere cosa ha una grande comunità Gatsby, specialmente con cose come l'accessibilità e cercando di assicurarsi che i framework facciano tutto il possibile gratuitamente.

Marcy: E quindi, c'è questo, non so, sottoinsieme o intersezione di accessibilità e Gatsby e quello è il mio posto felice. Ma nella comunità più ampia, molte persone imparano React o imparano lo sviluppo web tramite Gatsby. E quindi, è davvero bello vedere una progressione attraverso la nostra community, e speriamo di convincere le persone a contribuire, anche se si tratta di un problema o qualcosa del tipo: "Ehi, questo collegamento è stato interrotto o questa parte del dock mi ha confuso oppure è obsoleto".

Marcy: Come anche solo raccontare un framework o un progetto che usi, che qualcosa potrebbe essere migliore è un ottimo modo per contribuire, perché puoi aiutarci a ottenere informazioni dettagliate sulle cose che potrebbero essere migliorate. Quindi è un ottimo modo per contribuire.

Drew: Hai menzionato l'accessibilità e, naturalmente, le persone ti conosceranno come un esperto di accessibilità. And they might be surprised to see you working with sort of fully featured front end framework like React, thinking that perhaps the two don't really go together. Is that always the case at JavaScript heavy front ends are worth less accessible?

Marcy: Well, I wish it weren't the case. But I think the data has shown that a lot of websites that do use front end frameworks are less accessible than those that don't. A project that comes to mind is the Web a Million. And actually, I have a blog post, I'm refreshing the Gatsby site to see if my blog post has launched yet. But webbing through the web a million this project, they used their automated wave tool to crawl the top 1 million home pages and evaluate them for some accessibility violations.

Marcy: And it was really depressing results. Like they've run it twice now I think, and I think it got worse. So, it's not great, but I don't think you can really point to any one framework because there's plenty of sites that don't use frameworks that have lots of accessibility problems. So, it's kind of a broader industry issue, a really society.

Marcy: And so, for me working on a full featured web framework, I saw as an opportunity to try and get more accessibility awareness in the mainstream. And so, that was an intentional move on my part to go and try to make an impact on a lot of sites like working on one site is cool. You can solve some really interesting problems. For me, I wanted to advocate accessibility much more broadly and try to make frameworks the best they can be from the inside.

Marcy: So even if something is rough right now, trying to play that long game of like, “Okay, what web standards things can we talk about? What framework improvements can we make so that if this is kind of rough, like not just give up on it.” So, even if I know it's… I don't know, JavaScript is some folks enemy I feel like I like it. You need some JavaScript to make accessible user interfaces, you just do.

Marcy: So, I am trying to like straddle those viewpoints and do the right thing while listening to my activist colleagues and friends kind of out there like pushing us forward as an industry. And then on the inside, I can be the messenger and the person that could try and reconcile some of those huge trade offs and ethical questions about What are we building?

Marcy: So, it's challenging, but I really like it, because I have an impact to make on the web. And so, web framework. Lots of people are building Gatsby sites. So, seems like a good place to try and make an impact.

Drew: You mentioned briefly that Gatsby uses React at the moment. Is there a possible future where Gatsby might work with other frameworks, might receive a view version of Gatsby?

Marcy: I would love that. I've certainly talked about it. There is a pre React plug in, as I mentioned earlier. So you can swap that out. I think a big part of what we are talking about is sustainability of projects, trying to make the right call, these aren't easy choices to make. It's not just like rip it out and start over. There's a lot of concerns that go along with that. It goes deep.

Marcy: So, it's something we're actively talking about. And I don't really have anything specific to share right now. But we do have some internal meetings coming up soon to talk about that sort of thing. So, it's being discussed, and I would love to have a view flavor, that'd be amazing. But as you can imagine there's some interesting challenges that come along with that, and we want to make sure it's the right move so that we're not like, I don't know, going down a path and having it not work for whatever reason, then we're maintaining two frameworks, like how do we make that actually realistic in terms of what we can maintain and make succeed for an open source community?

Drew: So I've been learning all about Gatsby. What have you been learning about lately Marcy?

Marcy: Well, I wish it was better but work life balance. I've been learning about, for me, unfortunately, I'm in like a burnout cycle. And so, I feel like I'm continually learning the lesson of how to be productive, especially this year in 2020. There's just like one thing after another. So, trying to get really clear focus on where I want to go in my career, what makes me happy?

Marcy: How can I sustain, and we're talking about sustainability. Like how can I sustain my own life after a career of really pushing hard on accessibility in particular like, “Okay, how can I kind of take a little step back and make sure that what I am putting out there, what I am doing is meaningful, worth the energy.” See, a lot of my lessons have been kind of that intersection of work and life and trying to make the most of the time that's been… I don't know about you, but it's been pretty stressful for a lot of people including me.

Drew: It's been very, very stressful. We are at very difficult times, isn't it?

Marcy: Yeah, yeah. I mean, we have so much to be thankful for in this industry, having opportunities and skills that you can apply. Seeing a lot of layoffs in our industry, really trying to make decisions that reflect where we're at and not just going through the motions. So that was a big motivator for Gatsby web creators was, “Wow, there's a lot of school age kids not in school this year, it would be really cool to see an outcome of turning some kids' eyes onto web development.”

Marcy: Like when I was in seventh grade, and someone came to a class of mine to talk about photojournalism. I was like, “I want to be a photojournalist.” So that actually did work. I got some feedback from someone that said, “My seventh grader's learning from you, and now they're really excited about code.” So, that was a really good thing to spend some energy on, in a time where like, that wasn't something I would have necessarily thought of before being in these circumstances in 2020.

Marcy: So, really trying to be like nimble and make choices that kind of reflect where I want to go and what's happening.

Drew: If you the listener would like to hear more from Marcy, you can find her on Twitter where she's @marcysutton and find all her latest goings on, on her personal website, marcysutton.com. And of course you can find out how to get started with Gatsby from Gatsbyjs.org. Thanks for joining us today Marcy, do you have any parting words?

Marcy: Make the most of it wherever that might be.