Smashing Podcast Episode 20 z Marcy Sutton: Co to jest Gatsby?

Opublikowany: 2022-03-10
Szybkie podsumowanie ↬ Mówimy o Gatsbym. Co to jest i jak pasuje do twojego stosu programistycznego? Drew McLellan rozmawia z ekspertem Marcy Sutton, aby się dowiedzieć.

Dziś mówimy o Gatsbym. Co to jest i jak pasuje do twojego stosu programistycznego? Drew McLellan rozmawia z ekspertem Marcy Sutton, aby się dowiedzieć.

Pokaż notatki

  • Gatsby
  • Marcy na Twitterze
  • Osobista strona internetowa Marcy

Cotygodniowa aktualizacja

  • „Uczyń swoje witryny szybkimi, dostępnymi i bezpiecznymi z pomocą Google”
    autorstwa Diona Almaera
  • „Zrozumienie tworzenia wtyczek w Gatsby”
    autor: Aleem Isiaka
  • „Tworzenie aplikacji Tiny Desktop za pomocą Tauri i Vue.js”
    autorstwa Kelvina Omereshone
  • „Usuwanie paniki z alertów dotyczących wysyłki i zapasów w handlu elektronicznym”
    przez Suzanne Scacca
  • „Przejścia CSS w Vuejs i Nuxtjs”
    przez Timiego Omoyeni

Transkrypcja

Zdjęcie Marcy Sutton Drew McLellan: Jest głównym inżynierem w zespole Developer Relations w Gatsby. Wcześniej pracowała nad biblioteką testów ułatwień dostępu typu open source axe-core, a także pracowała jako inżynier ds. ułatwień dostępu w firmie Adobe. Pasjonuje się ulepszaniem sieci dla osób niepełnosprawnych i często mówi o tym na konferencjach. W 2016 roku O'Reilly przyznała jej nagrodę platformy internetowej za pracę w zakresie dostępności.

Drew: Współprowadzi również spotkania poświęcone dostępności Seattle i NW Tech Women Meetups w lokalnym regionie. Wiemy więc, że jest wykwalifikowanym inżynierem i ekspertem od dostępności. Ale czy wiesz, że chce wysłać Angel Falls w beczce? Moi miażdżący przyjaciele, proszę powitajcie Marcy Sutton.

Marcy Sutton: Witam.

Drew: Witam. Marcy. Jak się masz?

Marcy: Rozwalam. Jak się masz?

Drew: Jestem bardzo dobry. Dziękuję Ci. Chciałem dziś z tobą porozmawiać o Gatsbym. Ponieważ pojawił się w rozmowie, którą prowadziłem w poprzednim odcinku o nauce React z Miną Markham. Zdałem sobie sprawę, że grozi mi zrobienie typowego mężczyzny w Internecie polegającego na wyrażeniu opinii na temat czegoś, z czym nie miałem bezpośredniego doświadczenia. Więc nie tak robimy rzeczy w Smashing.

Drew: I chcę się upewnić, że odpowiednio pokryjemy Gatsby'ego. A czy jest lepszy sposób, aby to zrobić, niż porozmawiać z kimś, kto zna to na wylot. Zakładając więc, że być może słyszałem nazwisko Gatsby. Ale nie mam pojęcia, gdzie pasuje do stosu podczas budowania strony internetowej. Czym dokładnie jest Gatsby.

Marcy: Gatsby to generator stron internetowych, obecnie korzysta z Reacta. Ale stworzy dla Ciebie statyczną stronę internetową, która następnie przekształci się w pełną aplikację internetową React. Więc naprawdę czerpiesz to, co najlepsze z obu światów, dzięki szybkim kompilacjom, w których kompilujesz pliki HTML, które szybko ładują się dla użytkowników. A potem otrzymujesz wszystkie te ulepszenia dzięki JavaScript, aby tworzyć naprawdę interaktywne, dynamiczne aplikacje internetowe.

Marcy: To naprawdę ekscytująca przestrzeń. Pracuję nad uczeniem się z dokumentacją, a teraz w zespole Devrel skupiam się na tym, aby była tak dobra, jak to tylko możliwe, znając wyzwania związane z dostępnością w JavaScript i po prostu próbuję to naprawić od środka.

Drew: Myślę, że wielu z nas jest zaznajomionych z koncepcją generatora stron statycznych. A Gatsby wydaje się być ogólnie dopasowany do tej roli. Ale wydaje mi się, że idzie o wiele dalej niż większość SSG. Większość generatorów witryn jest niezależna od kodu frontonu. Wygląda na to, że w przypadku Gatsby otrzymujesz kod Gatsby działający jako część Twojej witryny. Czy to uczciwa ocena? A jeśli tak, to jakie rzeczy faktycznie robi Gatsby w twoim interfejsie?

Marcy: Tak, powiedziałbym, że największym elementem jest routing po stronie klienta. Tak więc Gatsby używa teraz routera zasięgu pod maską. Robi coś w rodzaju własnej implementacji. Ale to jest fragment, w którym po pierwszym załadowaniu statycznej witryny znajdują się tam pliki HTML. Tak więc, jeśli użytkownik z jakiegoś powodu wyłączy JavaScript, Twoja witryna powinna nadal tam być, nadal zawierać treść.

Marcy: Ale jeśli JavaScript jest włączony, wtedy ten etap nawadniania ma miejsce, gdy użyjesz linków w swojej witrynie Gatsby, pobierze ona zasoby z tej strony, więc będzie się ładować szybciej. To wszystko jest włączone dzięki tej warstwie JavaScript, którą daje Gatsby. Poza tym to naprawdę zależy od tego, czego używasz w swojej witrynie, co trafi do tego pakietu JavaScript.

Marcy: Ale dla rzeczy, które wykorzystują dużo interaktywności, takich jak dostępne interfejsy, to dobre miejsce. Dla mnie naprawdę lubię mieć dostęp do JavaScript przez cały czas, a mój znacznik jest po prostu w dobrym miejscu. Wiem, że to kwestia preferencji, czy chcesz, aby Twój HTML, JavaScript i CSS były starannie połączone i jest miejsce na wariacje w budowaniu Gatsby'ego

Marcy: Nie zawsze musisz używać czegoś takiego jak CSS i JS. Ale tak naprawdę chodzi o to, aby uzyskać moc tej dynamicznej warstwy JavaScript, która jest dostępna podczas pisania witryny. To nie jest taki dodatek w osobnym pliku.

Drew: Kiedy myślę o tym, jak zwykle działa generator stron statycznych, myślę o zawartości być może w plikach Markdown. Generator działa przez tę treść i łączy ją z szablonami i tworzy dziesiątki, setki, tysiące plików HTML, które są stronami Twojej witryny. Kiedy myślę o witrynie lub aplikacji React, myślę bardziej o doświadczeniu na jednej stronie, w którym interfejsy są tworzone przez React w locie. Więc mówisz, że Gatsby robi obie te rzeczy? Tworzy wszystkie strony, a także ulepsza je za pomocą JavaScript?

Marcy: Tak, tak. Gatsby użyje Node.js w czasie kompilacji, przejrzy twoje komponenty React i skompiluje je do plików HTML. Co, szczerze mówiąc, za pierwszym razem, gdy spojrzałem na Gatsby'ego, nie wyłączyłem JavaScript i pomyślałem: „W porządku, czy są tu inne strony, co to jest?” I bardzo się ucieszyłem, że Gatsby domyślnie działa w ten sposób. Utworzy zbudowane pliki z twoich komponentów React, co jest niesamowite.

Marcy: Zbadałem bardziej progresywne podejścia do ulepszania, ponieważ jest to w JavaScript. Na przykład, jeśli chcesz wypisać coś stopniowo ulepszanego dla użytkowników, gdzie jeśli mają wyłączoną obsługę JavaScript, nie chcesz całego tego zepsutego kodu, który zakłada, że ​​JavaScript tam jest. Więc jest z tym kilka dziwactw. Ale możesz obejść takie rzeczy, przynajmniej w przypadku podstawowych przepływów użytkowników, w których chcesz, aby ktoś nadal mógł coś kupić, może być konieczne dodanie wsparcia i dla tych przypadków użycia.

Marcy: Ale byłem mile zaskoczony, że Gatsby domyślnie to rozwija. Tak więc jest to wybór, którego dokonali, aby tworzyć witryny w ten sposób, a my zawsze go oceniamy. Czy to nadal najlepszy sposób? Co musimy zrobić, aby dać naszym użytkownikom to, o co proszą? Tak więc prowadzimy wewnętrzne poszukiwania, aby upewnić się, że Gatsby wykonuje najlepszą pracę, jaką może, przy tworzeniu strony internetowej.

Marcy: Zatem utrzymywanie małych rozmiarów pakietów i upewnianie się, że kompromisy dla tego, co mówimy, to wydajny kod z pobieraniem z wyprzedzeniem. Na przykład, czy mamy dane, aby to zrobić? Mnie bardzo interesuje, jako rzecznika programistów, upewnienie się, że to, co pakujemy i łączymy na stronach internetowych, jest rzeczywiście potrzebne i naprawdę stworzy najlepszą witrynę Gatsby, jaką może stworzyć.

Drew: Wspomniałeś tam o występie i jest duży nacisk na wydajność. Z pewnością wynika to ze sposobu, w jaki prezentuje się Gatsby. Czy to prawdziwa cecha Gatsby, czy jest to po prostu natura witryn JAMstack?

Marcy: Myślę, że może to być natura stron internetowych JAMstack. Ostatecznie sprowadzi się to do tego, co umieszczasz w swojej witrynie. Tak więc, bez względu na to, jakiego frameworka lub narzędzia używasz, nadal musimy być ostrożni w tym, co umieszczamy w tych pakietach dla użytkowników końcowych. Ale Gatsby naprawdę ma na celu zapewnienie dobrych wartości domyślnych. Nie tylko pod względem wydajności, ale także dostępności.

Marcy: Ale to zawsze wymaga oceny, zawsze musimy się upewnić, że jeśli coś dodamy, to nadal jest skuteczne. Ale tak, po otrzymaniu początkowej zawartości plików statycznych, ładują się szybko. Dużo szybciej niż klasyczna strona WordPress, którą miałem kiedyś. Ale potem ulepsz go za pomocą JavaScript. Na pewno są tam pewne kompromisy.

Marcy: Ale to działa naprawdę dobrze, wielu ludzi naprawdę lubi swoje strony Gatsby. Tak więc fajnie było pracować nad tym w pełnym wymiarze godzin i poznawać tajniki frameworka JavaScript, takiego jak Gatsby.

Drew: Jakie funkcje wydajnościowe właśnie wprowadził Gatsby, aby przyspieszyć działanie twoich witryn?

Marcy: Cóż, z prefetching dla linków, ten klient powiedział rzeczy o routingu, powiedziałbym, że to prawdopodobnie największe. Ułatwienie generowania progresywnej aplikacji internetowej. Tak więc, mając pewne możliwości offline, możesz wybrać to, co chcesz, jeśli chodzi o rzeczy offline i typu PWA. Ale naprawdę stanowią część początkowego doświadczenia, tak jak wiele początkowych witryn przykładowych, od których możesz zacząć, ma przykłady użycia manifestu i rodzaj tworzenia nowoczesnej wersji Twojej witryny.

Marcy: Naprawdę, to tak, jakby nie wysyłać kodu, którego nie potrzebujesz. To duża część tego. Buforowanie, to tak naprawdę wstępne pobieranie linków. Powiedziałbym, że to największa część tego.

Drew: A więc to jest miejsce, w którym witryna faktycznie przewiduje, dokąd zmierza użytkownik. Czy jest tak inteligentny, czy może z wyprzedzeniem pobiera wszystko na stronie, czy?

Marcy: Nie, opiera się na interakcji użytkownika. Tak więc, jeśli użytkownik przewinie port widoku, dzieje się coś, co się tam dzieje. Jeśli najedziesz kursorem na linki, oszacuje to, że istnieje spora szansa, że ​​możesz przejść do tej strony. Rozmawialiśmy wewnętrznie, cóż, myślę, że open source o tym, czy to wstępne pobieranie powinno odbywać się również na klawiaturze, więc skrzyżowanie dostępności i wydajności jest bardzo interesujące.

Marcy: Istnieje kilka kompromisów, na przykład użytkownik klawiatury, który nie może używać myszy i przechodzi przez każdy link, aby nawigować, czy to naprawdę powinno pobierać zawartość dla każdego z nich, ponieważ użytkownik myszy może być nieco bardziej selektywny o tym, gdzie umieścili kursor myszy. Tak więc te rozmowy są dla mnie niezwykle fascynujące.

Marcy: I próbując zastanowić się, jakich danych potrzebujemy, aby potwierdzić te założenia. Więc tak, bardzo interesujące było przyjrzenie się tym wartościom domyślnym i jakie ulepszenia możemy wprowadzić i naprawdę sprawdzanie, ile danych jest pobieranych? Czy to naprawdę dobra rzecz? Żeby trochę przyspieszyć? A może jest wystarczająco szybki bez tego? Czy istnieją alternatywne rozwiązania, które moglibyśmy wykorzystać w ramach zabawy z pracą nad frameworkiem, ponieważ jesteśmy w stanie ocenić wszystkie te kompromisy.

Drew: To jest pobieranie z wyprzedzeniem czegoś, co użytkownicy po prostu otrzymują za darmo w swojej witrynie. Czy więc muszą wykonać jakąś pracę, aby to wdrożyć?

Marcy: Dostajesz to za darmo, korzystając z linku Gatsby. Jest to więc komponent, który jest dostarczany z Gatsby i kiedy go używasz, wyświetla znaczniki kotwicy. Więc Twój HTML to prawdziwy HTML iw ten sposób wykorzystałeś platformę internetową. Ale w swoich komponentach React pracujesz bezpośrednio z komponentem łącza Gatsby. I to ma wszystkie te mechanizmy dla… Patrzy na to, co będzie twoim przyszłym HREF, dla tego linku, do którego chcesz się udać, a on pójdzie i pobierze zasoby z tego linku i wstępnie je załaduje.

Marcy: I to tylko w Twojej witrynie. Więc nie działa i nie próbuje pobierać rzeczy na innych stronach internetowych. Ale wydaje się, że działa całkiem nieźle. Wiem, że niektórzy użytkownicy aktywnie szukają sposobów, na przykład musisz zrezygnować z niektórych z tych rzeczy. Przynajmniej routing, bez pobierania z wyprzedzeniem. Po prostu używasz zwykłych znaczników kotwicy. A wtedy tak naprawdę nie dostajesz tej funkcjonalności. Używanie czegoś innego jest całkiem łatwe. Ale niektóre dyskusje, które prowadzimy, dotyczą routingu po stronie klienta i tego, jak zrobić to najlepiej. A więc to też jest naprawdę ciekawa przestrzeń.

Drew: Jak blisko musisz pracować z ekosystemem Gatsby, jeśli chcę mieć własny komponent łącza? Czy to byłoby w porządku, nie walczyłbym przeciwko Gatsby'emu, żeby zrobić coś takiego?

Marcy: Nie, możesz umieścić dowolne komponenty, o ile działają one ze środowiskiem wykonawczym React. To jest naprawdę piękno tego. Wszystko, co możesz umieścić w aplikacji React, możesz umieścić w aplikacji Gatsby. Jest nawet wtyczka Pre-React. Istnieje więc kilka alternatyw dla pracy z Gatsbym. Ale uwielbiam to, jak możesz wyciągnąć wszystko, z półek, których chcesz użyć lub napisać własne.

Marcy: I myślę, że ludzie naprawdę lubią elastyczność. Istnieje zastrzeżenie, że używa środowiska wykonawczego React. Musisz więc zaakceptować użycie React lub tej wtyczki pre-React. Ale osobiście bardzo lubię React i JSX do pracy z ułatwieniami dostępu i szablonami, zwłaszcza z hakami React. Tak więc możliwość korzystania z chaty na mojej stronie Gatsby jest po prostu świetna. Naprawdę to lubie.

Drew: A jak przebiega proces budowania witryny Gatsby, która prawdopodobnie jest modułem węzła, który można po prostu zainstalować i wykonać kompilację tak, jak w przypadku dowolnego innego statycznego generatora witryn?

Marcy: Tak. Istnieje CLI, który instalujesz globalnie. I chyba chodzi o to, czy chcesz go zainstalować globalnie. To właśnie zalecamy, ponieważ możesz go uruchomić z dowolnego katalogu na swoim komputerze, ale pobierze wszystko, czego potrzebujesz, aby zbudować witrynę Gatsby. A potem możesz dodać, powiedzmy, że chcesz używać WordPressa jako bezgłowego CMS lub innego źródła treści.

Marcy: Możesz zainstalować pakiety, wtyczki, aby to działało, a następnie zintegrować je ze swoją witryną. Istnieje również kilka przystawek i motywów, których możesz użyć, aby szybciej zacząć działać. Używałem ich, jeśli chcę coś przetestować lub szybko uruchomić witrynę pod kątem konkretnej integracji, takiej jak Drupal, pryzmat lub jakiekolwiek inne rozwiązanie CMS lub eCommerce lub coś, czego chcę użyć.

Marcy: Jest wiele przykładów. Więc nie zawsze majstrujesz przy próbach i błędach, próbując to rozgryźć, ale to coś w rodzaju tych klocków, które możesz poskładać i stworzyć… To jest to, co nazywamy siatką treści. Możesz więc użyć tych najlepszych w integracjach ras, aby stworzyć witrynę, zamiast, gdybym miał klasyczną witrynę WordPress, doświadczenie tworzenia i praca z zespołami jest naprawdę świetne.

Marcy: Ale we front-endzie były pewne niedociągnięcia, na przykład to, jak działa na urządzeniu mobilnym. Co jeszcze? Gdybym chciał rozwiązania eCommerce? Myślę, że w dzisiejszych czasach jest kilka rzeczy, które są łatwiejsze do zrobienia, ale mając możliwość wybrania najlepszych rozwiązań do uwierzytelniania, których potrzebujesz, lub cokolwiek to jest nowoczesne, możesz powiedzieć: „Chciałbym móc tego użyć. ” Dzięki Gatsby możesz połączyć wiele z tych rzeczy i sprawić, że ten sposób budowania treści będzie całkiem odświeżający.

Marcy: Zwłaszcza, gdy nadal możesz korzystać z integracji takich jak WordPress i nadal pracować z zespołami. Jesteśmy więc bardzo podekscytowani nowym sposobem pracy, w którym możesz wybrać wszystkie technologie, które lubisz lub działają dla Twojego zespołu.

Drew: Jedną z głównych cech, które Gatsby mocno zachwala, jest zdolność do pobierania danych lub treści z różnych źródeł. Wspomniałeś o takich rzeczach, jak WordPress i Drupal, i co masz. Tradycyjnie, gdybym używał czegoś takiego jak Jekyll lub Eleveny, lub coś takiego, musiałbym sam to podłączyć, aby wchodzić w interakcje z API, być może ściągnąć zawartość i zapisać ją w plikach przecen lub plikach JSON, a następnie uruchomić generator z tymi plikami.

Drew: Więc byłby to proces dwuetapowy, czy można użyć czegoś takiego jak bit źródłowy, który omówiliśmy w poprzednim odcinku, który robi takie rzeczy? Czy dobrze rozumiem, że Gatsby ma właśnie tę natywną zdolność do korzystania z różnych źródeł w sposób, którego inne statyczne generatory witryn po prostu nie mają?

Marcy: Myślę, że to, co sprawia, że ​​Gatsby jest naprawdę mocny w tej dziedzinie, to warstwa danych GraphQL i ekosystem wtyczek. Tak więc są szanse, że ktoś już napisał wtyczkę do dowolnego źródła danych, które chcesz zbudować. A jeśli nie, to prawdopodobnie jest coś bliskiego. Ale korzystanie z GraphQL jest rodzajem jego działania. Warstwą, która umożliwia wszystkie te integracje, jest użycie GraphQL.

Marcy: A więc istnieje wiele możliwości tego, co możesz wciągnąć, a my staramy się ułatwić pisanie wtyczek. Więc to była naprawdę fajna nauka o tym, jak napisać wtyczkę, a AST lub abstrakcyjne drzewo składni, które tworzy, i rodzaj uczenia się o tym, jak to wszystko działa, było naprawdę fajne. Ale tak, powiedziałbym, że jest wiele rzeczy z półki, które można podnieść bez konieczności pisania wszystkiego samemu, co jest całkiem niesamowite.

Marcy: I fajnie jest mieć elastyczność, by wprowadzać przeceny. Załóżmy, że twoi programiści chcą pisać przecenę treści na swoim blogu, ale zespół marketingowy naprawdę nie jest z tego zadowolony, możesz łączyć źródła treści i pozyskiwać je z wielu miejsc. Widziałem ludzi, którzy pozyskują rzeczy z innych repozytoriów GitHub i używają wtyczki get, aby w ten sposób pobrać zawartość przecen. Duża elastyczność.

Drew: I myślę, że masz wtedy możliwość napisania własnych wtyczek, które będą pobierane z niestandardowego źródła danych. Załóżmy, że masz jakiś starszy system i chcesz umieścić na nim ładną, błyszczącą nową stronę internetową. Możesz napisać wtyczkę, która będzie pobierać dane w dowolnym wymaganym formacie i przetłumaczyć je na coś, co stanie się większe niż praca?

Marcy: Mógłbyś tak. A więc wtyczki to umożliwiają. Do tego dochodzi jeszcze abstrakcja, którą nazywamy motywami Gatsby'ego. I to nie jest tylko kod interfejsu użytkownika, ale mogą to być zapytania GraphQL, konfiguracje, które konfigurują wtyczkę, więc jest to wtyczka z powiązanymi funkcjami. I możesz rozpowszechniać te motywy na NPM.

Marcy: A potem ich wersja i możesz je wciągnąć. Całe API jest również bardzo interesujące dla zespołów, które twierdzą, że masz wiele repozytoriów i chcesz do nich pobierać dane, bardzo powtarzalne byłoby posiadanie tych samych zapytań we wszystkich tych repozytoriach w tym samym kodzie. Tak więc, żeby trochę wyschnąć i nie powtarzać się tak często. Możesz użyć tych abstrakcji zwanych motywami, aby w pewnym sensie rozpowszechniać logikę lub kod, który umożliwiłby tę wtyczkę źródłową. Są więc takie warstwy abstrakcji, które można na nich oprzeć, o których słyszeliśmy, że zespoły naprawdę wiele czerpią w tej chwili.

Drew: Tak więc motyw w świecie Gatsby'ego nie wygląda tak, jak w przypadku CMS, takiego jak WordPress.

Marcy: Tak, to znaczy, może, ale to nie wszystko. Tak więc nazywanie rzeczy jest bardzo trudne. Ale motywy, które naprawdę podobały mi się, ucząc się o elastyczności i możliwości, tak, możesz dołączyć trochę kodu interfejsu użytkownika. Ale może tam być również kod języka zapytań. Ale fakt, że są one w pewnym sensie połączone, ułatwia ich dystrybucję. Tak, to była naprawdę fajna abstrakcja, że ​​fajnie było zobaczyć, co ludzie budują i jakie motywy wysyłają, i tak dalej.

Drew: Tak, mogę sobie wyobrazić, że doprowadziłoby to do całkiem innowacyjnych zastosowań Gatsby'ego. Czy widziałeś coś, co już się wydarzyło, w szczególności przykuło twoją uwagę, że klienci robią to szczególnie kreatywnie?

Marcy: Tak. Cóż, jeśli chodzi o tematy, to znaczy, jeden z pierwszych, o których czytałem, jest studium przypadku na blogu Gatsby, myślę, że od Apollo. Napisali stronę z dokumentacją, używając motywów Gatsby i używali wtyczki get source. I tak naprawdę oddziela to źródło i zawartość, dzięki czemu zespoły mogą pobrać motyw do użycia w wielu repozytoriach.

Marcy: Powiedziałbym, że jest to dla mnie najbardziej interesujące tylko z powodu tego, co mogę sobie wyobrazić, np. Zespoły, w których byłem, gdzie musieliśmy pozyskiwać treści, byliśmy po prostu tak ograniczeni, gdzie ten kod mógł istnieć i jak powtarzalny mogłoby być. I tak, widząc rozwiązanie teraz, w którym zespoły mówią: „Och, to działa świetnie”. I to było nawet zeszłego lata, albo tak było jakiś czas temu.

Marcy: Od tego czasu API uległo poprawie i cały zespół pracuje nad motywami Gatsby'ego. I wiem, że w ciągu najbliższych kilku tygodni wprowadzą kilka dużych ulepszeń. Więc nie chcę kraść ich grzmotu, ale z motywami jest kilka fajnych rzeczy. Zmienili niektóre motywy bloga, takie jak główne motywy, które oferujemy od Gatsby.

Marcy: Wiem, że używają go wewnętrznie do tworzenia niektórych naszych własnych ogłoszeń dotyczących produktów lub ulepszeń produktów, które zostaną ogłoszone tutaj w ciągu najbliższych kilku tygodni. Tak więc wiele fajnych rzeczy dzieje się z motywami Gatsby, a ludzie sprzedają własne motywy i przystawki. Myślę, że to też jest naprawdę interesujące.

Drew: Wokół Gatsby wyrasta trochę targowiska.

Marcy: Tak, tak.

Drew: Czy jest jakieś szkolenie online i tego typu rzeczy, jeśli ktoś chce… Jeśli ktoś zdecydował, że naprawdę zamierza dostać się do Gatsby i musi się tego szybko nauczyć? Czy są dostępne miejsca, do których mogą udać się z tego rodzaju informacjami?

Marcy: Mnóstwo tego? TAk. Zdecydowanie istnieje strona Gatsby Doc, czyli gatsbyjs.org/doc. Mamy też tutoriale i prawie co tydzień robię transmisje na żywo z materiałów Gatsby'ego. Jest mnóstwo nauczycieli, którzy mają materiały Gatsby na YouTube i na różnych platformach edukacyjnych. Egghead, myślę, że niektórzy z moich kolegów z drużyny z Gatsby mają również filmy z Egghead.

Marcy: Tak więc jest tam mnóstwo rzeczy. Powiedziałbym, że jeśli coś znajdziesz, sprawdź daty na nim. Zawsze aktywnie aktualizujemy Gatsby Doc, niektóre starsze filmy osób trzecich i rzeczy, które mogą, sprawdzaj daty w tych materiałach, ponieważ nie możemy monitorować wszystkich zasobów edukacyjnych pod kątem aktualizacji. Trudno nadążyć za własnym personelem.

Marcy: Ponieważ jest tak wiele opcji pozyskiwania treści i przypadków użycia. To bardzo szeroka przestrzeń. Ale jest tak dużo materiałów do nauki i mnóstwo sposobów na rozpoczęcie, że możesz spróbować znaleźć rzeczy, takie jak w zależności od tego, gdzie jesteś w swoim spektrum uczenia się. Czy jesteś na początkowych etapach, czy pochodzisz z innych technologii i po prostu musisz dowiedzieć się, czym jest ta rzecz React.

Marcy: Możesz wybrać, które materiały będą dla ciebie pasować, w zależności od tego, gdzie jesteś. Ostatnio robiłem kurs poprzez transmisje na żywo o nazwie Gatsby Web Creators, gdzie przeszliśmy całą drogę od początkującego HTML, CSS i JavaScript do stworzenia naszej pierwszej witryny Gatsby. Właśnie zakończyliśmy to w piątek. Tak więc naprawdę fajnie było wrócić do początku.

Marcy: A ponieważ Gatsby ma dużo materiałów, używa Reacta. Tak więc na początek jest to całkiem spory skok. Tak więc naprawdę chciałem wrócić i podjąć kroki, aby przejść przez całą drogę do budowania rzeczy z Reactem i Gatsbym. Więc to było naprawdę fajne. Jestem podekscytowany kontynuacją tej drogi, aby było więcej materiałów dla początkujących i więcej rzeczy, które pomogą ludziom zrozumieć, jak zbudować witrynę z Gatsby, ponieważ wiele z tych umiejętności można przenieść na inne frameworki.

Drew: Jednym z głównych pytań, które nasuną się każdemu, kto myśli o tworzeniu stron z projektami dla klientów za pomocą Gatsby'ego, jest jedno z głównych pytań, które się pojawią, dotyczy zarządzania treścią i przedstawiania rzeczy klientowi. Wspomniałeś już, jak Gatsby może łączyć się z różnymi systemami zarządzania treścią. Czy jest to główna metoda, którą zastosowałbyś, aby poradzić sobie z tym pytaniem? A może Gatsby ma w swoim ekosystemie coś, co umożliwiłoby ludziom edytowanie treści w jakikolwiek sposób?

Marcy: Tak, powiedziałbym, że posiadanie CMS lub czegoś takiego może sprawić, że te relacje zespołowe będą działać dużo lepiej. Byłem w takich przypadkach, w których zespoły programistów lubią „Po prostu naucz się HTML”. I widzisz tę glazurę od klienta w stylu: „Nie, nie mogę uwierzyć, że to powiedziałeś”. Tak więc posiadanie systemu, w którym ludzie mogą wykonywać swoją najlepszą pracę w sposób, który najbardziej im odpowiada, jest super, super ważne.

Marcy: Po prostu nie możesz poradzić sobie z marketerem GitHub i możesz działać przez jakiś czas, ale nie przez cały czas. I tak, posiadanie takiej jak podgląd i infrastruktura kompilacji sprawia, że ​​jest to lepsze, i właśnie tam wkracza do walki przestrzeń produktów w chmurze Gatsby. Są sposoby na zrobienie podglądu. Bez płatnej strony chmury i chmura Gatsby ma bezpłatną warstwę dla projektów osobistych, więc nie wszystko jest płatne.

Marcy: Ale mamy to, takie jak open source i ekosystem produktów, które łączą się, aby Gatsby jako organizacja założycielska mógł zarobić wystarczająco dużo pieniędzy, aby utrzymać ramy open source, utrzymać to w dobrym stanie i utrzymać naszą społeczność w ruchu wraz z tym . W ten sposób łączy się komercyjna strona open source i naprawdę umożliwia niektóre z tych przepływów pracy, których potrzebują zespoły.

Marcy: Niektóre rzeczy, takie jak szybkie podglądy, szybkie udostępnianie i wdrażanie kompilacji. I tak, istnieją rozwiązania w szczególności po stronie chmury Gatsby, a gdziekolwiek istnieje sposób open source, aby Gatsby działał jak serwer podglądu lub coś takiego, staramy się to udokumentować i upewnić się, że nasza społeczność wie, co jest i jak służyć tym potrzebom zespołu.

Marcy: Tak, powiedziałbym, że potrzebujesz jakiegoś sposobu na podgląd zmian w CMS, ponieważ to jest jak natychmiastowa gratyfikacja. Nie chcesz czekać godzinę na kompilację, aby zobaczyć jakąś zawartość.

Drew: Więc to jest interesujące. Usługa w chmurze Gatsby daje Ci możliwość korzystania z bezgłowej usługi CMS, w której po prostu pracujesz z treścią, ale nie masz wizualizacji tego, jak wyglądałaby w Twojej witrynie, co pozwala uzyskać podgląd tego, jak to pracowałbym. Czy to prawda?

Marcy: Tak, tak. Jest to więc część kompromisu polegającego na odsprzęganiu, bezgłowym CMS, który mógł mieć, podobnie jak WordPress, po prostu sprawdzić interfejs, ale dajemy mu nowy interfejs i potencjalnie wciągamy inne źródła i inne rzeczy, o których WordPress nie wie. Tak więc oddzielenie go w ten sposób ma sens. Ale nadal, jako członek zespołu, musisz być w stanie wykonywać swoją pracę z szybkością, do której szybko się przyzwyczaiłeś.

Marcy: I tu właśnie pojawia się wersja zapoznawcza Gatsby'ego, kompilacje Gatsby'ego, aby oddać ten fronton zespołom, aby mogły współpracować, podejmować decyzje, dostarczać coś. Tak więc pojawiło się to w zeszłym roku, przez cały czas zyskując więcej funkcji i ulepszeń, i że słyszeliśmy od niektórych zespołów, które naprawdę zaczynają zauważać wzrost prędkości.

Marcy: I jak się domyślamy: „Ok, jeśli ta kompilacja idzie wolno, dlaczego tak jest?” Zwykle dzieje się tak dlatego, że witryna jest naprawdę duża. Dlatego dużo skupiliśmy się na ulepszeniach dużych witryn i naprawdę ulepszyliśmy te zespołowe, wspólne przepływy pracy. W tej chwili jest to bardzo ważne dla zespołu.

Drew: Więc chmura Gatsby jest, myślę, że jej sercem jest usługa hostingowa. Czy jest to CDN do wdrażania witryn Gatsby z mnóstwem specyficznych funkcji Gatsby i funkcji wokół niego?

Marcy: Nazwałbym to bardziej produktem o ciągłej dostawie, ponieważ nie jest to rzeczywisty CDN. Integruje się z sieciami CDN, takimi jak Fastly, Netlify. Jest wielu różnych dostawców, z którymi możesz się połączyć, a niektórzy z nich za darmo. Możesz wiele zrobić za darmo, co jest całkiem niesamowite. Właśnie to zrobiłem pewnego dnia w naszej ostatniej sesji twórców stron internetowych Gatsby, używamy chmury Gatsby i Netlify do budowy naszej strony.

Marcy: I umożliwia szybsze tworzenie witryn Gatsby, ponieważ ma te ulepszenia. Wystarczy zbudować jeden rodzaj witryny. Jest więc kilka ulepszeń, które może wprowadzić chmura Gatsby, których nie może wprowadzić żadna inna platforma, ponieważ starają się wspierać wszystkie te różne typy stron internetowych i robią je bardzo dobrze.

Marcy: Ale dla Gatsby'ego, jeśli to wszystko, co budujesz, i jest całkiem sporo agencji, które zajmują się Gatsbym i chcą zrobić to tak szybko, jak tylko mogą. W tym miejscu chmura Gatsby może wprowadzić pewne ulepszenia wydajności specjalnie dla Gatsby, ponieważ nie musi się martwić o żadne inne platformy.

Drew: Tak więc chmura Gatsby wykonałaby twoją kompilację, a następnie po prostu wdrożyłaby ją w czymś takim jak Netlify lub prawdopodobnie w całej gamie różnych miejsc.

Marcy: Tak. Tak, będzie. I tak jest to kawałek Netlify, którego używałby wtedy, gdy przesyłał te zbudowane pakiety. Zbudowane pliki. Nie używa ich kompilacji, więc kompilacje mają miejsce w infrastrukturze chmur Gatsby i tam może nastąpić znaczny wzrost prędkości. A potem jest jeszcze krok przesyłania, aby przesłać go do CDN, niezależnie od tego, który wybierzesz.

Marcy: Ale tak, wygląda na to, że zespoły naprawdę uwielbiają tę umiejętność widzenia. Chodzi mi o funkcjonalność, której byś przegapił. A więc konieczne jest dodanie z powrotem, aby móc wykonać te wspólne podglądy i uzyskać podpisy i tak dalej.

Drew: Chmura Gatsby jest dostarczana jako usługa firmy Gatsby, a także Gatsby jest projektem open source. Czy jest to podobny rodzaj relacji do WordPressa i automatu, gdzie masz komercyjny podmiot opracowujący produkt open source?

Marcy: Powiedziałbym, że tak, jak Drupal. W technologii istnieje precedens, by organizacje założycielskie miały swój rodzaj pozytywnego cyklu. Pracujemy teraz nad opublikowaniem dokumentacji dotyczącej zarządzania, aby upewnić się, że nasza społeczność jest bardzo jasna, w jaki sposób podejmujemy decyzje. Ale głównym celem jest utrzymanie Gatsby w sposób zrównoważony, aby mógł nadal być projektem open source, z którego ludzie mogą korzystać, nawet jeśli dostaną się do chmury Gatsby.

Marcy: Jeśli chcesz, możesz użyć innych rozwiązań. A więc potrzebujemy wystarczająco dużo biznesu, aby utrzymać się, jak ludzie, którzy nad nim pracują. I tak jestem pośrodku, jakbym wahał się między stroną open source a komercyjną i staram się upewnić, że priorytetowo traktujemy sprawy. To znaczy, jak możesz sobie wyobrazić, żonglujemy wieloma rzeczami z tym, jak szerokie są przestrzenie, wszyscy mamy swoje niszowe przypadki użycia, które lubimy, czujemy się naprawdę mocno, musimy zrobić dla naszej pracy.

Marcy: To w sumie wiele niszowych przypadków użycia. Dlatego staramy się żonglować, ustalać priorytety i naprawdę słuchać naszej społeczności o tym, co teraz boli, co jest bolesne, co idzie dobrze. To była ciekawa podróż, aby osobiście wrócić do devREL i naprawdę słuchać społeczności o tym, jak możemy sprawić, że będziemy jeszcze lepsi?

Drew: A czy wokół Gatsby'ego jest duża społeczność, z której korzysta wiele osób?

Marcy: Wielu ludzi z niego korzysta, wielu współpracowników. Więc dla wielu ludzi może to być ich pierwszy wkład w open source, jak przyjście do naszych doków i dołączenie do nas na Hacktoberfest i tym podobne. Tak więc naprawdę fajnie było zobaczyć, co robi duża społeczność Gatsby, zwłaszcza w kwestiach takich jak dostępność i próba upewnienia się, że frameworki robią wszystko, co w ich mocy, od razu po wyjęciu z pudełka.

Marcy: A więc jest to, nie wiem, podzbiór lub przecięcie dostępności i Gatsby'ego i to jest moje szczęśliwe miejsce. Ale w szerszej społeczności wiele osób uczy się React lub uczy się tworzenia stron internetowych za pośrednictwem Gatsby. A więc naprawdę fajnie jest widzieć postęp w naszej społeczności i miejmy nadzieję, że zachęcimy ludzi do udziału, nawet jeśli jest to problem lub coś w stylu: „Hej, ten link został uszkodzony lub ta część doków była dla mnie myląca lub jest przestarzały”.

Marcy: Na przykład samo powiedzenie frameworkowi lub projektowi, którego używasz, że coś mogłoby być lepsze, to świetny sposób na wniesienie wkładu, ponieważ możesz pomóc nam uzyskać wgląd w rzeczy, które można poprawić. To świetny sposób, by wnieść swój wkład.

Drew: Wspomniałeś o dostępności i oczywiście ludzie będą cię znać jako eksperta od dostępności. 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.