Smashing Podcast Episodul 20 cu Marcy Sutton: Ce este Gatsby?

Astăzi, vorbim despre Gatsby. Ce este și cum se încadrează în stiva dvs. de dezvoltare web? Drew McLellan discută cu expertul Marcy Sutton pentru a afla.

Afișați note

• Gatsby
• Marcy pe Twitter
• Site-ul personal al lui Marcy

Actualizare săptămânală

• „Fă-ți site-urile rapide, accesibile și sigure cu ajutorul Google”
  de Dion Almaer
• „Înțelegerea dezvoltării pluginurilor în Gatsby”
  de Aleem Isiaka
• „Crearea de aplicații desktop mici cu Tauri și Vue.js”
  de Kelvin Omereshone
• „Eliminarea panicii de la alertele de expediere și de inventar prin comerțul electronic”
  de Suzanne Scacca
• „Tranziții CSS în Vuejs și Nuxtjs”
  de Timi Omoyeni

Transcriere

Drew McLellan: Ea este inginer principal al echipei de Relații cu Dezvoltatorii de la Gatsby. Anterior, ea a lucrat la biblioteca de testare a accesibilității axe-core open source și a lucrat și ca inginer de accesibilitate la Adobe. Este pasionată de îmbunătățirea internetului pentru persoanele cu dizabilități și vorbește adesea despre asta în cadrul conferințelor. În 2016, O'Reilly a acordat premiul platformei sale web pentru o lucrare în accesibilitate.

Drew: De asemenea, co-conduce întâlnirile de accesibilitate Seattle și NW Tech Women Meetups într-o regiune locală. Deci, știm că este un inginer calificat și un expert în accesibilitate. Dar știai că vrea să-l trimită pe Angel Falls într-un butoi? Prietenii mei zdrobitori, vă rog, urez bun venit lui Marcy Sutton.

Marcy Sutton: Bună.

Drew: Bună. Marcy. Ce mai faci?

Marcy: Sunt zdrobitoare. Ce mai faci?

Drew: Sunt foarte bun. Mulțumesc. Am vrut să vă vorbesc astăzi despre Gatsby. Pentru că a apărut într-o conversație pe care o aveam la un episod anterior despre învățarea React cu Mina Markham. Mi-am dat seama că eram în pericol să fac chestia tipică cu omul de pe internet de a da o părere despre ceva despre care nu am avut o experiență directă. Deci nu așa facem lucrurile la Smashing.

Drew: Și vreau să mă asigur că îl acoperim corect pe Gatsby. Și ce modalitate mai bună de a face asta decât să vorbești cu cineva care știe asta pe dinăuntru și pe dinafară. Deci, presupunând că poate am auzit numele Gatsby. Dar nu am idee unde se încadrează în stivă atunci când construiesc site-ul web. Ce este mai exact Gatsby.

Marcy: Gatsby este un generator de site-uri web, în ​​prezent folosește React. Dar va crea un site web static pentru tine, care apoi se va rehidrata într-o aplicație web React completă. Așadar, obțineți tot ce este mai bun din ambele lumi cu versiuni rapide pe care le compilați fișiere HTML care se vor încărca rapid pentru utilizatori. Și apoi obțineți toate aceste îmbunătățiri cu JavaScript pentru a crea aplicații web dinamice cu adevărat interactive.

Marcy: Deci, este un spațiu foarte interesant în care să fiu. Și am lucrat pe partea de învățare cu documentație, iar acum, în echipa Devrel, mă concentrez să-l fac cât se poate de bun, cunoscând provocările de accesibilitate cu JavaScript. și doar încercând să o repar din interior spre exterior.

Drew: Mulți dintre noi vom fi familiarizați, cred, cu conceptul de generator de site static. Și Gatsby pare să se încadreze în general în acest rol. Dar mie mi se pare că merge mult mai departe decât fac majoritatea SSG-urilor. Și majoritatea generatoarelor de site sunt agnostice de cod front-end. Se pare că, cu Gatsby, ajungi să rulezi codul Gatsby ca parte a site-ului tău. Este o evaluare corectă? Și dacă da, ce fel de lucruri face Gatsby de fapt în front-end-ul tău?

Marcy: Da, aș spune că cea mai mare parte din asta este rutarea pe partea clientului. Deci, Gatsby acum folosește routerul de acoperire sub capotă. Își face un fel de implementare proprie. Dar aceasta este piesa că atunci când încărcați site-ul static pentru prima dată, există fișiere HTML acolo. Deci, dacă utilizatorul dezactivează JavaScript dintr-un motiv oarecare, site-ul dvs. ar trebui să fie în continuare acolo, să aibă în continuare conținut.

Marcy: Dar dacă JavaScript este activat, atunci are loc acest pas de hidratare în care, atunci când utilizați link-uri în site-ul dvs. Gatsby, va merge pre-preluare resurse de pe pagina respectivă, astfel încât se va încărca mai repede. Deci, toate acestea sunt activate cu acest strat JavaScript pe care ți-l oferă Gatsby. Și, dincolo de asta, depinde într-adevăr felul în care ceea ce utilizați pe site-ul dvs. va ajunge în acel pachet JavaScript.

Marcy: Dar pentru lucrurile care folosesc multă interactivitate, cum ar fi interfețele accesibile, acesta este un loc bun pentru a fi. Pentru mine, îmi place foarte mult să am JavaScript disponibil în orice moment și ca marcajul să fie într-un loc bun. Știu că este o chestiune de preferință, dacă doriți ca HTML și JavaScript și CSS să fie bine cuplate și că există loc pentru variații în construcția Gatsby.

Marcy: Nu trebuie să folosești întotdeauna ceva de genul CSS și JS. Dar este de fapt să obțineți puterea acelui strat JavaScript dinamic, disponibil pentru dvs. în timp ce vă scrieți site-ul. Nu este ca acest add-on într-un fișier separat.

Drew: Când mă gândesc la modul în care funcționează de obicei un generator de site static, mă gândesc la conținutul din fișierele Markdown. Iar generatorul parcurge acel conținut și îl îmbină cu șabloane și creează 10, sute, mii de fișiere HTML, care sunt paginile site-ului tău. Când mă gândesc la un site sau o aplicație React, mă gândesc mai mult la experiența pe o singură pagină în care interfețele sunt create de React din mers. Deci, vrei să spui că Gatsby face ambele astea? Creează toate paginile și, de asemenea, le îmbunătățește cu JavaScript?

Marcy: Este, da. Gatsby va folosi Node.js în timpul construirii, va trece peste componentele dvs. React și le va compila în fișiere HTML. Sincer, prima dată când m-am uitat la Gatsby nu am dezactivat JavaScript și am spus: „Bine, mai sunt alte pagini aici, ce este asta?” Și am fost atât de fericit că Gatsby funcționează astfel implicit. Va crea fișiere construite din componentele dumneavoastră react, ceea ce este minunat.

Marcy: Am explorat abordări mai progresive de îmbunătățire, deoarece este în JavaScript. Cum ar fi dacă doriți să scoateți ceva îmbunătățit progresiv pentru utilizatori, unde dacă au JavaScript dezactivat, nu doriți tot acest cod rupt care presupune că JavaScript este acolo. Așa că există niște ciudatenii cu el. Dar puteți rezolva acest tip de lucruri cel puțin pentru fluxurile dvs. de utilizatori de bază, în care doriți ca cineva să poată cumpăra în continuare ceva, s-ar putea să fie nevoie să adăugați suport și pentru acele cazuri de utilizare.

Marcy: Dar am fost plăcut surprins de modul în care Gatsby o lansează implicit. Și așa, este o alegere pe care au făcut-o să construiască site-uri în acest fel și o evaluăm mereu. Este încă cea mai bună cale? Ce trebuie să facem pentru a oferi utilizatorilor noștri ceea ce cer? Așadar, facem câteva explorări interne, în curs doar pentru a ne asigura că Gatsby face cea mai bună treabă posibilă la construirea unui site web.

Marcy: Așadar, păstrarea dimensiunilor pachetelor mici și asigurarea faptului că, pentru a face compromisuri pentru ceea ce spunem, este un cod performant cu preluare. De exemplu, avem datele pentru a face o copie de rezervă? Acesta este genul de lucru care mă interesează foarte mult, în calitate de susținător al dezvoltatorilor, este să mă asigur că ceea ce ambalăm și grupăm pe site-uri web este de fapt necesar și va face cu adevărat cel mai bun site Gatsby pe care îl poate face.

Drew: Ați menționat performanța acolo și există un accent mare pe performanță. Cu siguranță pare din felul în care se prezintă Gatsby. Este aceasta o caracteristică adevărată a lui Gatsby sau este doar natura site-urilor JAMstack?

Marcy: Cred că poate fi o natură a site-urilor JAMstack. În cele din urmă, se va reduce la ceea ce grupați pe site-ul dvs. web. Deci, indiferent de cadru sau instrument pe care îl utilizați, trebuie să fim atenți la ceea ce punem în acele pachete pentru utilizatorii finali. Dar Gatsby își propune cu adevărat să vă ofere valori implicite bune. Nu numai pentru performanță, ci și pentru accesibilitate.

Marcy: Dar asta necesită întotdeauna evaluare, trebuie să ne asigurăm întotdeauna că, dacă am adăugat ceva, este încă performant. Dar da, obținând acea sarcină utilă inițială de fișiere statice, se încarcă rapid. Mult mai rapid decât site-ul WordPress clasic pe care îl aveam înainte. Dar apoi îmbunătățirea cu JavaScript. Cu siguranță există câteva compromisuri acolo.

Marcy: Dar funcționează foarte bine, multor oameni, le plac foarte mult site-urile lor Gatsby. Așadar, a fost distractiv să lucrezi la el cu normă întreagă și să înveți detaliile unui cadru JavaScript precum Gatsby.

Drew: Ce fel de caracteristici de performanță a pus de fapt Gatsby pentru a vă accelera site-urile?

Marcy: Ei bine, cu preluarea pentru linkuri, acest client a spus chestii de rutare, aș spune că este probabil cea mai mare. Făcând cu adevărat ușoară generarea unei aplicații web progresive. Deci, având unele capacități offline, puteți alege și alege ceea ce doriți în ceea ce privește lucrurile offline și de tip PWA. Dar ei chiar fac parte din experiența inițială, ca multe dintre exemplele de site-uri inițiale de la care ați putea începe, au exemple de utilizare a unui manifest și de a face acea versiune modernă a site-ului dvs.

Marcy: Într-adevăr, este ca și cum nu ai un cod de transport de care nu ai nevoie. Asta e o mare parte din asta. Memorarea în cache, aceasta este într-adevăr pre-aducerea pentru link-uri. Asta aș spune că este cea mai mare parte din ea.

Drew: Deci aici site-ul anticipează de fapt unde va merge utilizatorul. Este la fel de inteligent sau preia totul pe pagină sau?

Marcy: Nu, se bazează pe interacțiunea utilizatorului. Deci, dacă utilizatorul derulează în jos portul de vizualizare, există ceva pre-preluare care se întâmplă acolo. Dacă treceți cu mouse-ul peste linkuri, se va estima că există șanse destul de mari să accesați pagina respectivă. Am vorbit pe plan intern, ei bine, cred că, despre sursă deschisă despre dacă această preluare ar trebui să se întâmple și la focalizarea tastaturii, astfel încât intersecția dintre accesibilitate și performanță este foarte interesantă.

Marcy: Există unele compromisuri acolo, cum ar fi un utilizator de tastatură care nu poate folosi mouse-ul și trece prin fiecare link pentru a naviga, dacă într-adevăr ar aduce conținut pentru fiecare dintre aceștia, deoarece un utilizator de mouse ar putea fi puțin mai selectiv despre unde au pus cursorul mouse-ului. Deci, acele conversații mi se par extrem de fascinante.

Marcy: Și încercând să ne gândim la ce date avem nevoie pentru a valida și aceste ipoteze. Așa că da, a fost foarte interesant să ne uităm la acele valori implicite și ce îmbunătățiri putem face și să verificăm cu adevărat cât de multe date sunt preluate? Este chiar un lucru bun? Doar pentru a accelera un pic? Sau este suficient de rapid fără asta? Există soluții alternative pe care le-am putea folosi ca parte a distracției de a lucra la un cadru, deoarece putem evalua toate aceste compromisuri.

Drew: Aceasta este preluare ceva pe care utilizatorii îl primesc gratuit pe site-ul lor. Deci trebuie să facă ceva pentru a-l implementa?

Marcy: Îl primești gratuit folosind linkul Gatsby. Deci, este o componentă care vine cu Gatsby și când o utilizați, scoate etichete de ancorare. Deci HTML-ul tău este HTML real și ai folosit platforma web în acest fel. Dar în componentele dvs. React, lucrați direct cu componenta de legătură Gatsby. Și asta are toate acele mecanisme pentru... Se uită la oricare va fi viitorul tău HREF, pentru acea legătură de unde vrei să mergi și va merge și va prelua resurse de pe acel link și le va preîncărca.

Marcy: Și este doar intern site-ului tău. Deci nu se declanșează și nu încearcă să aducă lucruri de pe alte site-uri web. Dar se pare că funcționează destul de bine. Știu că unii utilizatori caută în mod activ modalități, cum ar fi de fapt să renunți la unele dintre aceste lucruri. Cel puțin rutare, fără a folosi pre-preluare. Folosiți doar etichete de ancorare obișnuite. Și atunci nu obțineți cu adevărat această funcționalitate. Este destul de ușor să folosești altceva. Dar unele dintre discuțiile pe care le avem sunt legate de rutarea pe partea clientului și despre cum să facem asta cât mai bine. Și așa, este și un spațiu cu adevărat interesant.

Drew: Cât de aproape trebuie să lucrezi în ecosistemul Gatsby în ceea ce privește dacă aș vrea să am propria mea componentă de legătură? Ar fi complet bine, nu m-aș lupta împotriva lui Gatsby pentru a face așa ceva?

Marcy: Nu, puteți introduce orice componente doriți, atâta timp cât funcționează cu React runtime. Asta e cu adevărat frumusețea. Orice ai putea pune într-o aplicație React, ai putea pune într-o aplicație Gatsby. Există chiar și un plugin pre-React. Deci, există câteva alternative pentru a lucra cu Gatsby. Dar îmi place cum poți trage orice, de pe raft, componentele pe care vrei să le folosești sau să le scrii pe ale tale.

Marcy: Și cred că flexibilitatea este ceea ce îi place cu adevărat oamenilor. Există avertismentul că folosește timpul de execuție React. Și, așadar, trebuie să fiți de acord cu utilizarea react sau folosirea acestui plugin pre-React. Dar personal, îmi place foarte mult react și JSX pentru lucrul cu accesibilitate și șabloane, în special cu cârlige React. Deci, a putea folosi coliba de pe site-ul meu Gatsby este atât de cool. Chiar imi place.

Drew: Și cum este procesul de construire a unui site Gatsby care este probabil un modul nod pe care îl poți instala și ai face o construcție ca și cu orice alt generator de site static?

Marcy: Da. Există un CLI pe care îl instalați la nivel global. Și cred că este dacă vrei să-l instalezi la nivel global. Acesta este ceea ce vă recomandăm, pentru că atunci îl puteți rula din orice director de pe computer, dar va trage în jos tot ce aveți nevoie pentru a construi un site Gatsby. Și apoi puteți adăuga, să spunem că doriți să utilizați WordPress ca un CMS fără cap sau o altă sursă de conținut.

Marcy: Puteți instala pachete, pluginuri pentru a face ca să funcționeze și apoi să le integrați cu site-ul dvs. Există, de asemenea, câteva inițiatoare și teme pe care le puteți folosi pentru a începe și a funcționa mai repede. Le-am folosit dacă vreau să testez ceva sau să încep rapid un site pentru o integrare specifică, cum ar fi Drupal sau prismic sau orice soluție CMS sau eCommerce sau ceva pe care vreau să îl folosesc.

Marcy: Sunt o mulțime de exemple. Așadar, nu te descurci mereu cu încercări și erori încercând să-ți dai seama, dar sunt un fel de aceste blocuri de construcție pe care le poți aduna și crea... Este ceea ce numim rețeaua de conținut. Așadar, puteți folosi cele mai bune integrări pentru a crea un site în loc de, dacă aș avea un site WordPress clasic, experiența de creație și lucrul cu echipele sunt cu adevărat grozave.

Marcy: Dar au existat deficiențe în partea frontală, cum ar fi modul în care ar funcționa pe un dispozitiv mobil. Ce altceva? Dacă aș dori o soluție de comerț electronic? Cred că există unele lucruri care sunt mai ușor de făcut în zilele noastre, dar fiind capabil să alegi oricare dintre cele mai bune soluții pe care le dorești pentru autentificare, sau oricare ar fi acel lucru modern, vei spune: „Mi-aș dori să pot folosi asta. ” Cu Gatsby, puteți reuni o mulțime de aceste lucruri și puteți face acest mod de a construi conținut care să fie destul de revigorant.

Marcy: Mai ales când poți încă să folosești acele integrări precum WordPress și să lucrezi în continuare cu echipe. Așadar, suntem destul de încântați de acest nou mod de lucru în care poți alege toate tehnologiile care îți plac sau care funcționează pentru echipa ta.

Drew: Una dintre caracteristicile mari pe care le are Gatsby este capacitatea de a extrage date sau conținut dintr-o varietate de surse diferite. Ați menționat lucruri precum WordPress și Drupal și ce aveți. În mod tradițional, dacă foloseam ceva de genul Jekyll sau Eleventy, sau ceva de genul acesta, ar trebui să-l conectez eu pentru a interacționa cu API-urile, poate să trag conținutul în jos și să-l scriu în fișiere markdown sau fișiere JSON și apoi să lucreze generatorul. cu acele fișiere.

Drew: Deci ar fi un fel de proces în doi pași, ar putea folosi ceva de genul sursă bit, pe care l-am acoperit într-un episod anterior care face așa ceva? Înțeleg corect că Gatsby are doar această capacitate nativă de a consuma diferite surse într-un mod în care alți generatori de site-uri statice, pur și simplu nu o fac?

Marcy: Cred că ceea ce îl face pe Gatsby cu adevărat puternic în acest domeniu este stratul său de date GraphQL și ecosistemul de pluginuri. Deci, sunt șanse ca cineva să fi scris deja un plugin pentru orice sursă de date pe care doriți să o construiți. Și dacă nu, probabil că este ceva aproape. Dar folosirea GraphQL este un fel de sub funcționare. Stratul care face posibile toate aceste integrări folosește GraphQL.

Marcy: Așadar, există o mulțime de posibilități pentru ceea ce ai putea extrage și încercăm să facem mai ușor să scrii pluginuri. Așa că a fost foarte bine învățat despre cum să scrieți un plugin, și AST sau Arborele de sintaxă abstractă pe care îl creează și cum să învățați despre cum funcționează totul a fost foarte cool. Dar da, aș spune, există o mulțime de lucruri de pe raft pe care le poți ridica fără a fi nevoie să le scrii singur, ceea ce este destul de grozav.

Marcy: Și este frumos să ai flexibilitatea de a reduce reducerile. Spuneți că dezvoltatorii dvs. vor să-și scrie o reducere a conținutului blogului, dar echipa de marketing nu este într-adevăr mulțumită de asta, ați putea combina sursele de conținut și le puteți procura din mai multe locuri. Am văzut oameni aprovizionând lucruri din alte repoziții GitHub și folosesc un plugin get pentru a atrage conținutul de reducere în acest fel. Multă flexibilitate.

Drew: Și cred că aveți opțiunea de a vă scrie propriile pluginuri pentru a le extrage dintr-o sursă de date personalizată. Să presupunem că aveți un sistem moștenit și doriți să puneți un site web frumos și strălucitor pe partea din față a acestuia. Ai putea scrie un plugin care să scoată datele în orice format este necesar și să le traducă în ceva care devine mai mare decât să lucrezi?

Marcy: Ai putea da. Și astfel, pluginurile permit acest lucru. Și apoi există această abstracție pe deasupra, pe care o numim teme Gatsby. Și acestea nu sunt doar cod de interfață cu utilizatorul, ci ar putea fi interogări GraphQL, configurații care configurează un plugin, deci este ca un plugin cu un fel de utilizare combinat. Și puteți distribui acele teme pe NPM.

Marcy: Și apoi, versiunea lor și le puteți introduce. Și întregul API este foarte interesant și pentru echipele care spun că aveți mai multe repoziții și că doriți să adăugați date în acestea, ar fi foarte repetitiv să aveți aceleași interogări în toate aceste repoziții în același cod. Așadar, să uscați puțin lucrurile și să nu vă repetați atât de mult. Puteți folosi aceste abstracții numite teme, pentru a le distribui în jurul acelei logici sau cod care ar activa acel plugin sursă. Deci, există astfel de straturi de abstracții pe care le puteți construi pe deasupra și din care am auzit că echipele obțin foarte mult acum.

Drew: Deci, o temă din lumea Gatsby nu este un aspect și senzație ca și cum ar fi cu CMS precum WordPress.

Marcy: Da, vreau să spun, se poate, dar nu este tot ce este. Deci, numirea lucrurilor este foarte greu. Dar temele mi-a plăcut foarte mult să învăț doar despre flexibilitate și să pot, da, ați putea include un cod de interfață cu utilizatorul. Dar ar putea exista și un cod de limbaj de interogare care să intre și acolo. Dar faptul că este oarecum combinat, îl face ușor de distribuit. Da, a fost o abstractizare foarte bună că a fost cool să vezi ce construiesc oamenii și ce teme livrează și toate astea.

Drew: Da, îmi pot imagina că ar duce la niște utilizări destul de inovatoare ale lui Gatsby. Ați văzut ceva ce a fost, în special care v-a atras atenția că clienții fac acest lucru deosebit de creativ?

Marcy: Da. Ei bine, în ceea ce privește temele, vreau să spun, una dintre primele despre care am citit este un studiu de caz pe blogul Gatsby, cred că de la Apollo. Și au scris un site de documentare folosind teme Gatsby și care a folosit un plugin get source. Și astfel, într-adevăr decuplă într-adevăr sursele și conținutul dvs., făcând astfel încât echipele să poată introduce o temă pe care să o utilizeze în mai multe repoziții.

Marcy: Aș spune că este cel mai interesant pentru mine doar din cauza a ceea ce pot să-mi imaginez, cum ar fi, echipele anterioare în care am fost în care trebuia să sursăm conținut, eram atât de limitati și unde ar putea locui acel cod și cât de repetabil. ar putea fi. Și așa, văzând acum o soluție în care echipele spun: „Oh, funcționează grozav”. Și asta a fost chiar vara trecută, sau așa a fost un studiu de caz cu ceva timp în urmă.

Marcy: Deci de atunci, API-urile s-au îmbunătățit și există o întreagă echipă care lucrează la temele Gatsby. Și știu că vor aduce câteva îmbunătățiri majore în următoarele câteva săptămâni. Așa că, nu vreau să le fur tunetele, dar sunt niște chestii îngrijite cu teme. Au revizuit unele dintre temele blogului, cum ar fi temele de bază pe care le oferim de la Gatsby.

Marcy: Știu că îl folosesc intern pentru a construi unele dintre propriile noastre anunțuri de produs sau îmbunătățiri ale produsului care vor fi anunțate aici în următoarele două săptămâni. Deci, o mulțime de lucruri interesante se întâmplă cu temele Gatsby și oameni care își vând propriile teme și starters. Cred că este chiar interesant și asta.

Drew: A apărut o piață în jurul lui Gatsby.

Marcy: Există, da.

Drew: Există vreun fel de instruire online și astfel de lucruri dacă cineva dorește... Dacă cineva ar decide că va intra cu adevărat în Gatsby și ar trebui să învețe repede? Există locuri de alergare în care pot merge cu astfel de informații disponibile?

Marcy: O tonă? Da. Cu siguranță există site-ul lui Gatsby Doc, care este gatsbyjs.org/doc. Și avem tutoriale și am făcut streamuri live aproape în fiecare săptămână pentru lucruri despre Gatsby. Există o mulțime de educatori care au material Gatsby pe YouTube și pe diverse platforme de învățare. Egghead, cred că unii dintre colegii mei de la Gatsby au și videoclipuri cu egghead.

Marcy: Deci, există o mulțime de lucruri acolo. Aș spune că verificați datele de pe el dacă găsiți ceva. Actualizăm mereu în mod activ documentele Gatsby, unele dintre videoclipurile mai vechi ale terților și alte lucruri care ar putea, verificăm datele pentru acestea, deoarece nu putem monitoriza fiecare resursă de învățare pentru actualizare. Este greu să ținem pasul cu personalul nostru.

Marcy: Pentru că sunt atât de multe opțiuni de aprovizionare de conținut și cazuri de utilizare. Este un spațiu foarte larg. Dar există atât de mult material de învățare și o mulțime de modalități de a începe, încât poți să încerci și să găsești lucruri cum ar fi în funcție de locul în care te afli în spectrul tău de învățare. Sunteți în stadiile de început, veniți din alte tehnologii și trebuie doar să aflați despre ce este acest lucru React.

Marcy: Puteți alege și alege materialele care vă vor funcționa în funcție de locul în care vă aflați. Am făcut recent un curs prin intermediul fluxurilor live numit Gatsby Web Creators, unde am trecut de la începători HTML, CSS și JavaScript până la crearea primului nostru site Gatsby. Tocmai am terminat asta vineri. Și așa, a fost foarte frumos să mă întorc până la început.

Marcy: Și pentru că multe materiale cu Gatsby, folosește React. Deci, este un salt destul de mare pentru a începe cu asta. Așadar, îmi doream foarte mult să mă întorc și să fac pașii pentru a ajunge până la capăt până la construirea lucrurilor cu React și Gatsby. Deci asta a fost foarte frumos. Și sunt încântat să continui pe acest traseu, astfel încât să existe mai multe materiale pentru începători și mai multe lucruri care să-i ajute pe oameni să înțeleagă cum să construiască un site cu Gatsby, deoarece multe dintre aceste abilități sunt portabile în alte cadre.

Drew: Una dintre marile întrebări care va apărea pentru oricine se gândește să construiască un fel de site-uri de proiecte pentru clienți folosind Gatsby, una dintre marile întrebări care va apărea este despre gestionarea conținutului și punerea lucrurilor în fața unui client. Ați menționat deja modul în care Gatsby se poate conecta la diferite sisteme de gestionare a conținutului. Este aceasta metoda principală pe care ați aplica-o pentru a rezolva această întrebare? Sau Gatsby are ceva în ecosistemul său care le-ar permite oamenilor să editeze conținut în vreun fel?

Marcy: Da, aș spune că ai un CMS sau ceva de genul acesta poate face ca acele relații de echipă să funcționeze mult mai bine. Am fost în acele cazuri de utilizare în care echipele de dezvoltatori au spus „Doar învață HTML”. Și vezi această glazură de la clientul de genul „Nu, nu pot să cred că tocmai ai spus asta”. Deci, a avea un sistem în care oamenii își pot face cel mai bun lucru în orice mod li se potrivește cel mai bine, este super, super important.

Marcy: De parcă nu te poți descurca pe marketerul GitHub și s-ar putea să funcționeze o parte din timp, dar nu tot timpul. Așadar, având ca o previzualizare și construirea infrastructurii, acest lucru este mai bun, și aici este locul unde spațiul pentru produse în cloud Gatsby intră într-un fel în luptă. Există modalități de a face previzualizare. Fără partea de cloud plătită și cloudul Gatsby are un nivel gratuit pentru proiecte personale, deci nu este totul plătit.

Marcy: Dar avem acest lucru, cum ar fi open source și ecosistemul de produse, care se unesc astfel încât Gatsby să poată, în calitate de organizație fondatoare, să facă destui bani pentru a menține cadrul open source, a menține acest sănătos și a menține comunitatea noastră să continue. . Așadar, cam aici se reunește această latură comercială open source și permite cu adevărat unele dintre aceste fluxuri de lucru de care echipele au nevoie.

Marcy: Unele lucruri cum ar fi obținerea de previzualizări rapide, obținerea rapidă a construcțiilor și implementarea. Și, așadar, există soluții în special pe partea de cloud Gatsby, și apoi, oriunde există o modalitate open source de a face Gatsby să funcționeze ca cu un server de previzualizare sau ceva, încercăm să documentăm asta și să ne asigurăm că comunitatea noastră știe ce este ce și cum să facem. să servească acele nevoi ale echipei.

Marcy: Da, aș spune că ai nevoie de o modalitate de a previzualiza modificările CMS, deoarece este ca acea satisfacție instantanee. Nu doriți să așteptați o oră pentru o versiune pentru a vedea conținut.

Drew: Deci e interesant. Serviciul cloud Gatsby vă oferă această capacitate de a utiliza un serviciu CMS fără cap, în care doar lucrați cu conținutul, dar nu aveți nicio vizualizare a cum ar arăta pe site-ul dvs., vă permite să obțineți o previzualizare a modului în care ar funcționa. Este corect?

Marcy: Este, da. Și așadar, face parte din schimbul decuplării, CMS-ul tău fără cap, care ar fi avut, ca WordPress, ai putea doar să te uiți la front-end, dar îi dăm un nou front-end și, potențial, atragem alte surse. și alte lucruri despre care WordPress nu știe. Și așa, decuplarea în acest fel are sens. Dar totuși, ca membru al echipei, trebuie să-ți poți face munca la viteza cu care te-ai obișnuit rapid.

Marcy: Așadar, acolo este momentul în care previzualizarea Gatsby, versiunile Gatsby intră pentru a oferi acel front end înapoi echipelor, astfel încât acestea să poată colabora, să poată lua decizii, să primească ceva livrat. Așadar, asta a apărut în ultimul an, obținând mai multe funcții și îmbunătățiri în tot timpul și am auzit de la unele echipe care chiar încep să vadă creșteri ale vitezei.

Marcy: Și pe măsură ce ne dăm seama, „Bine, dacă această construcție merge încet, de ce?” De obicei, pentru că site-ul este foarte, foarte mare. Așa că ne-am concentrat mult pe îmbunătățiri pentru site-urile mari și pe îmbunătățirea cu adevărat a acelor echipe, a fluxurilor de lucru colaborative. Este un accent mare al echipei chiar acum.

Drew: Deci, cloudul Gatsby este, cred că în esenta lui este un serviciu de găzduire. Este un CDN pentru implementarea site-urilor dvs. Gatsby cu o mulțime de funcționalități specifice Gatsby și caracteristici în jurul acestuia?

Marcy: L-aș numi mai degrabă un produs cu livrare continuă, deoarece nu este un CDN real. Se integrează cu CDN-uri precum Fastly, Netlify. Există o mulțime de furnizori diferiți pe care îi puteți conecta și unii dintre ei gratuit. Puteți face multe gratuit, ceea ce este destul de minunat. Tocmai am făcut-o zilele trecute în ultima noastră sesiune de creatori web Gatsby, folosim Gatsby cloud și Netlify pentru a ne construi site-ul.

Marcy: Și vă permite să faceți site-uri Gatsby mai rapid, în special, pentru că are acele îmbunătățiri. Trebuie doar să construiască un singur tip de site. Deci, există unele îmbunătățiri pe care le poate aduce Gatsby cloud, pe care nicio altă platformă nu le poate face, deoarece încearcă să le placă suport pentru toate aceste tipuri diferite de site-uri web și le fac pe toate foarte bine.

Marcy: Dar pentru Gatsby, dacă asta este tot ce construiești, și există destul de multe agenții, care sunt toate implicate pe Gatsby și vor să ajungă cât de repede pot. Așadar, aici Gatsby cloud poate aduce unele îmbunătățiri de performanță special pentru Gatsby, deoarece nu trebuie să-și facă griji cu privire la alte platforme.

Drew: Deci, Gatsby cloud va face construirea dvs. și apoi l-ar implementa în ceva de genul Netlify sau probabil într-o gamă întreagă de locuri diferite.

Marcy: Da. Da, va fi. Și așa, este piesa Netlify pe care ar fi folosit-o atunci când încarcă aceste pachete construite. Fișiere construite. Nu folosește versiunile lor, așa că acestea au loc pe infrastructura de nori Gatsby și acolo se pot produce o mulțime de creșteri de viteză. Și apoi mai rămâne acel pas de încărcare pentru a-l trimite pe un CDN, indiferent de cel pe care l-ați ales.

Marcy: Dar da, se pare că echipele iubesc cu adevărat această abilitate de a vedea. Adică, este o funcționalitate pe care ai fi ratat-o. Așadar, acesta este un lucru necesar de adăugat din nou, este să poți face aceste previzualizări în colaborare și să obții aprobări și toate astea.

Drew: Deci, Gatsby cloud este oferit ca un serviciu de la compania Gatsby, și există și proiectul Gatsby open source. Este aceasta o relație similară cu cea a WordPress și automat, în care aveți o entitate comercială care dezvoltă un produs open source?

Marcy: Aș spune că da, ca Drupal. Există un precedent în tehnologie pentru a avea aceste organizații fondatoare în care este un fel de ciclu virtuos. Și lucrăm la publicarea unor documente de guvernare chiar acum pentru a ne asigura că, comunitatea noastră este foarte clară cum luăm decizii. Dar întregul obiectiv este de a menține Gatsby-ul sustenabil, astfel încât să poată continua să fie un proiect open source pe care oamenii îl pot folosi chiar și chiar dacă intră în cloud-ul Gatsby.

Marcy: Ai putea folosi alte soluții cu el dacă vrei. Și așa, avem nevoie de destule afaceri pentru a susține, precum oamenii care lucrează la ea. Și așa, sunt oarecum la mijloc, de parcă plutesc între sursa deschisă și partea comercială și încercând să mă asigur că dăm prioritate lucrurilor. Adică, după cum vă puteți imagina, jonglam cu o mulțime de lucruri cu cât de largi sunt spațiile, cu toții avem cazurile noastre de utilizare de nișă care ne plac, ne simțim foarte puternic, trebuie să facem pentru locurile noastre de muncă.

Marcy: Asta înseamnă o mulțime de cazuri de utilizare de nișă. Așadar, încercăm să jonglam, să stabilim prioritățile și să ascultăm cu adevărat comunitatea noastră despre ceea ce doare acum, ce este dureros, ce merge bine. Așadar, aceasta a fost o călătorie interesantă pentru mine personal, pentru a reveni în devREL și pentru a asculta cu adevărat comunitatea despre cum ne putem face și mai buni?

Drew: Și există o comunitate mare în jurul lui Gatsby, mulți și mulți oameni care îl folosesc?

Marcy: Există o mulțime de oameni care îl folosesc, o mulțime de colaboratori. Deci, pentru mulți oameni, ar putea fi prima dată când contribuie la sursa deschisă, cum ar fi să vină la docurile noastre și să ni se alăture pentru Hacktoberfest și lucruri de genul acesta. Așadar, a fost foarte frumos să văd ce comunitate mare are Gatsby, mai ales cu lucruri precum accesibilitatea și încercarea de a se asigura că cadrele fac tot ce pot din cutie gratuit.

Marcy: Și așa, există asta, nu știu, subset sau intersecție a accesibilității și Gatsby și acesta este locul meu fericit. Dar în comunitatea mai largă, mulți oameni învață React sau învață dezvoltarea web prin Gatsby. Și, așadar, este foarte frumos să vedem o progresie în comunitatea noastră și sperăm că vom face ca oamenii să vină să contribuie, chiar dacă este o problemă sau ceva de genul: „Hei, această legătură a fost întreruptă sau această parte a andorilor a fost confuză pentru mine. sau este depășit.”

Marcy: Chiar și doar a spune unui cadru sau unui proiect pe care îl utilizați, că ceva ar putea fi mai bun este o modalitate excelentă de a contribui, deoarece ne puteți ajuta să obținem o perspectivă asupra lucrurilor care ar putea fi îmbunătățite. Deci este o modalitate grozavă de a contribui.

Drew: Ați menționat accesibilitatea și, desigur, oamenii vă vor cunoaște ca fiind un expert în accesibilitate. 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.