Smashing Podcast Folge 20 mit Marcy Sutton: Was ist Gatsby?

Heute sprechen wir über Gatsby. Was ist das und wie passt es in Ihren Webentwicklungs-Stack? Drew McLellan spricht mit der Expertin Marcy Sutton, um es herauszufinden.

Notizen anzeigen

• Gatsby
• Marcy auf Twitter
• Marcys persönliche Website

Wöchentliches Update

• „Machen Sie Ihre Websites mit Hilfe von Google schnell, zugänglich und sicher“
  von Dion Almaer
• „Plugin-Entwicklung in Gatsby verstehen“
  von Aleem Isiaka
• „Kleine Desktop-Apps mit Tauri und Vue.js erstellen“
  von Kelvin Omereshone
• „Panik aus E-Commerce-Versand- und Lagerbestandsbenachrichtigungen entfernen“
  von Susanne Scacca
• „CSS-Übergänge in Vuejs und Nuxtjs“
  von Timi Omoyeni

Abschrift

Drew McLellan: Sie ist die leitende Ingenieurin im Developer Relations Team bei Gatsby. Zuvor arbeitete sie an der Open-Source-Axe-Core-Bibliothek zum Testen von Barrierefreiheit und war außerdem als Barrierefreiheits-Ingenieurin bei Adobe tätig. Sie setzt sich leidenschaftlich für die Verbesserung des Internets für Menschen mit Behinderungen ein und spricht oft auf Konferenzen darüber. 2016 verlieh O'Reilly ihren Webplattformpreis für eine Arbeit im Bereich Barrierefreiheit.

Drew: Sie ist auch Co-Leiterin der Barrierefreiheit Seattle und NW Tech Women Meetups in einer lokalen Region. Wir wissen also, dass sie eine erfahrene Ingenieurin und Expertin für Barrierefreiheit ist. Aber wussten Sie, dass sie Angel Falls in ein Fass schicken will? Meine großartigen Freunde, bitte heißen Sie Marcy Sutton willkommen.

Marcy Sutton: Hallo.

Drew: Hallo. Marcy. Wie geht es dir?

Marcy: Ich schlage um. Wie geht es dir?

Drew: Mir geht es sehr gut. Danke. Ich wollte heute mit Ihnen über Gatsby sprechen. Weil es in einem Gespräch aufkam, das ich in einer früheren Folge über das Erlernen von React mit Mina Markham hatte. Mir wurde klar, dass ich Gefahr lief, den typischen Mann im Internet zu tun, eine Meinung zu etwas zu äußern, mit dem ich keine direkte Erfahrung hatte. So machen wir das also nicht bei Smashing.

Drew: Und ich möchte sicherstellen, dass wir Gatsby richtig abdecken. Und wie könnte man das besser tun, als mit jemandem zu sprechen, der sich in- und auswendig damit auskennt. Also, vorausgesetzt, ich habe vielleicht den Namen Gatsby gehört. Aber ich habe keine Ahnung, wo es beim Erstellen einer Website in den Stapel passt. Was genau ist Gatsby.

Marcy: Gatsby ist ein Website-Generator, der derzeit React verwendet. Aber es wird eine statische Website für Sie erstellen, die dann in eine vollständige React-Webanwendung rehydriert wird. Sie erhalten also wirklich das Beste aus beiden Welten mit schnellen Builds, die Sie HTML-Dateien kompilieren, die für Benutzer schnell geladen werden. Und dann erhalten Sie all diese Verbesserungen mit JavaScript, um wirklich interaktive dynamische Web-Apps zu erstellen.

Marcy: Also, es ist ein wirklich aufregender Bereich. Und ich habe auf der Lernseite mit Dokumentation gearbeitet und konzentriere mich jetzt im Devrel-Team darauf, es so gut wie möglich zu machen, und kenne die Herausforderungen der Barrierefreiheit mit JavaScript und nur versuchen, es von innen nach außen zu beheben.

Drew: Ich schätze, viele von uns werden mit dem Konzept eines statischen Site-Generators vertraut sein. Und Gatsby scheint weitgehend in diese Rolle zu passen. Aber für mich scheint es viel weiter zu gehen als die meisten SSGs. Und die meisten Website-Generatoren sind Front-End-Code-agnostisch. Es scheint, dass Sie mit Gatsby am Ende Gatsby-Code als Teil Ihrer Website ausführen. Ist das eine faire Einschätzung? Und wenn ja, was macht Gatsby tatsächlich in Ihrem Front-End?

Marcy: Ja, ich würde sagen, der größte Teil davon ist das clientseitige Routing. Also verwendet Gatsby gerade einen Reach-Router unter der Haube. Es macht eine Art eigene Implementierung. Aber das ist das Stück, wenn Sie Ihre statische Site zum ersten Mal laden, gibt es dort HTML-Dateien. Wenn also der Benutzer JavaScript aus irgendeinem Grund deaktiviert, sollte Ihre Website immer noch da sein und immer noch Inhalt haben.

Marcy: Aber wenn JavaScript aktiviert ist, findet dieser Hydratationsschritt statt, bei dem, wenn Sie Links auf Ihrer Gatsby-Site verwenden, Ressourcen von dieser Seite vorab abgerufen werden, damit sie schneller geladen werden. Das alles wird also mit dieser JavaScript-Ebene ermöglicht, die Gatsby Ihnen gibt. Darüber hinaus hängt es wirklich davon ab, was Sie auf Ihrer Website verwenden, um in diesem JavaScript-Bundle zu landen.

Marcy: Aber für Dinge, die viel Interaktivität erfordern, wie zugängliche Schnittstellen, ist das ein guter Ort. Ich persönlich genieße es wirklich, JavaScript jederzeit zur Verfügung zu haben und mein Markup einfach an einem guten Ort zu haben. Ich weiß, es ist eine Frage der Präferenz, ob Sie Ihr HTML und Ihr JavaScript und Ihr CSS alle irgendwie sauber gekoppelt haben möchten, und es gibt Raum für Variationen beim Erstellen von Gatsby

Marcy: Man muss nicht immer so etwas wie CSS und JS verwenden. Aber es geht wirklich darum, die Leistungsfähigkeit dieser dynamischen JavaScript-Ebene zu nutzen, die Ihnen zur Verfügung steht, während Sie Ihre Website schreiben. Es ist nicht wie dieses Add-On in einer separaten Datei.

Drew: Wenn ich daran denke, wie ein statischer Site-Generator normalerweise funktioniert, denke ich an Inhalte in vielleicht Markdown-Dateien. Und der Generator durchläuft diesen Inhalt und führt ihn mit Vorlagen zusammen und erstellt 10, Hunderte, Tausende von HTML-Dateien, die die Seiten Ihrer Website darstellen. Wenn ich an eine React-Site oder -App denke, denke ich eher an das Single-Page-Erlebnis, bei dem die Schnittstellen von React on the fly erstellt werden. Sie sagen also, Gatsby macht beides? Es erstellt alle Seiten und verbessert sie auch mit JavaScript?

Marcy: Das ist es, ja. Gatsby verwendet Node.js zur Build-Zeit, es geht Ihre React-Komponenten durch und kompiliert sie in HTML-Dateien. Ehrlich gesagt, als ich mir Gatsby das erste Mal ansah, wollte ich JavaScript nicht ausschalten und dachte: „In Ordnung, gibt es hier noch andere Seiten, was ist das?“ Und ich war so froh, dass Gatsby standardmäßig so funktioniert. Es erstellt erstellte Dateien aus Ihren Reaktionskomponenten, was großartig ist.

Marcy: Ich habe progressivere Verbesserungsansätze untersucht, seit es in JavaScript ist. Wenn Sie zum Beispiel etwas ausgeben möchten, das für Benutzer schrittweise verbessert wird, und wenn sie JavaScript deaktiviert haben, möchten Sie nicht all diesen fehlerhaften Code, der davon ausgeht, dass JavaScript vorhanden ist. Es gibt also einige Macken damit. Aber Sie können so etwas zumindest für Ihre Kernbenutzerströme umgehen, bei denen Sie möchten, dass jemand immer noch etwas kaufen kann, Sie müssen möglicherweise etwas Unterstützung hinzufügen und für diese Anwendungsfälle.

Marcy: Aber ich war angenehm überrascht, wie Gatsby das standardmäßig ausrollt. Es ist also eine Entscheidung, die sie getroffen haben, Websites auf diese Weise zu erstellen, und wir evaluieren dies immer. Ist es immer noch der beste Weg? Was müssen wir tun, um unseren Benutzern das zu geben, wonach sie fragen? Also führen wir intern einige Erkundungen durch, um sicherzustellen, dass Gatsby beim Erstellen einer Website die bestmögliche Arbeit leistet.

Marcy: Halten Sie also die Bündelgrößen klein und stellen Sie sicher, dass Sie für das, was wir sagen, einen leistungsfähigen Code mit Pre-Fetching eingehen müssen. Haben wir die Daten, um das zu belegen? Das ist die Art von Dingen, an denen ich als Developer Advocate sehr interessiert bin, sicherzustellen, dass das, was wir auf Websites packen und bündeln, tatsächlich benötigt wird und wirklich die beste Gatsby-Site wird, die sie machen kann.

Drew: Du hast da Leistung erwähnt, und es gibt einen großen Fokus auf Leistung. Es scheint sicherlich so, wie sich Gatsby präsentiert. Ist das ein echtes Merkmal von Gatsby oder liegt es einfach in der Natur von JAMstack-Websites?

Marcy: Ich denke, das kann eine Natur von JAMstack-Websites sein. Letztendlich kommt es darauf an, was Sie auf Ihrer Website bündeln. Unabhängig davon, welches Framework oder Tool Sie verwenden, müssen wir dennoch sorgfältig überlegen, was wir in diese Bundles für Endbenutzer packen. Aber Gatsby zielt wirklich darauf ab, Ihnen gute Standardwerte zu geben. Nicht nur für die Leistung, sondern auch für die Zugänglichkeit.

Marcy: Aber das erfordert immer eine Bewertung, wir müssen immer sicherstellen, dass, wenn wir etwas hinzugefügt haben, es immer noch leistungsfähig ist. Aber ja, wenn Sie diese anfängliche Nutzlast statischer Dateien erhalten, werden sie schnell geladen. Viel schneller als die klassische WordPress-Site, die ich früher hatte. Aber dann mit JavaScript erweitern. Da gibt es sicher einige Kompromisse.

Marcy: Aber es funktioniert wirklich gut, viele Leute mögen ihre Gatsby-Seiten wirklich. Es hat also Spaß gemacht, Vollzeit daran zu arbeiten und die Besonderheiten eines JavaScript-Frameworks wie Gatsby zu lernen.

Drew: Welche Art von Leistungsmerkmalen hat Gatsby tatsächlich eingeführt, um Ihre Websites zu beschleunigen?

Marcy: Nun, mit dem Pre-Fetching für Links, sagte dieser Client, Routing-Zeug, ich würde sagen, das ist wahrscheinlich das Größte. So ist es wirklich einfach, eine progressive Web-App zu erstellen. Wenn Sie also einige Offline-Funktionen haben, können Sie in Bezug auf Offline- und PWA-Inhalte auswählen, was Sie möchten. Aber sie machen diesen Teil der ersten Erfahrung wirklich aus, wie viele der Starter-Beispielseiten, von denen Sie vielleicht starten, Beispiele für die Verwendung eines Manifests und die Art, diese moderne Version Ihrer Website zu erstellen.

Marcy: Wirklich, es ist wie kein Versandcode, den Sie nicht brauchen. Das ist ein großer Teil davon. Caching, das ist wirklich das Pre-Fetching für Links. Das ist, was ich sagen würde, das größte Stück davon.

Drew: Das ist also der Ort, an dem die Site tatsächlich antizipiert, wohin der Benutzer gehen wird. Ist es so intelligent oder ruft es alles auf der Seite vorab ab oder?

Marcy: Nein, es basiert auf der Benutzerinteraktion. Wenn der Benutzer also den Ansichtsport nach unten scrollt, findet dort etwas Vorabruf statt. Wenn Sie den Mauszeiger über Links bewegen, wird geschätzt, dass die Wahrscheinlichkeit ziemlich hoch ist, dass Sie zu dieser Seite gelangen. Wir haben intern darüber gesprochen, na ja, ich denke, Open Source zu, ob dieses Pre-Fetching auch beim Tastaturfokus stattfinden sollte, so dass diese Schnittmenge von Zugänglichkeit und Leistung sehr interessant ist.

Marcy: Es gibt einige Kompromisse, wie zum Beispiel sollte ein Tastaturbenutzer, der die Maus nicht benutzen kann und durch jeden Link navigiert, wirklich Inhalte für jeden einzelnen davon abrufen, da ein Mausbenutzer möglicherweise etwas selektiver ist darüber, wo sie ihren Mauszeiger platzieren. Also, diese Gespräche finde ich extrem faszinierend.

Marcy: Und wenn wir uns überlegen, welche Daten wir brauchen, um diese Annahmen zu validieren. Also ja, es war super interessant, sich diese Standardeinstellungen anzusehen und welche Verbesserungen können wir vornehmen und wirklich prüfen, wie viele Daten das abruft? Ist das wirklich gut so? Nur um es ein bisschen zu beschleunigen? Oder geht es auch ohne schnell genug? Gibt es alternative Lösungen, die wir als Teil des Spaßes an der Arbeit an einem Framework verwenden könnten, weil wir in der Lage sind, all diese Kompromisse zu bewerten?

Drew: Das ist ein Vorabruf von etwas, das Benutzer einfach kostenlos auf ihrer Website erhalten. Müssen sie also etwas tun, um es umzusetzen?

Marcy: Du bekommst es kostenlos über den Gatsby-Link. Es handelt sich also um eine Komponente, die mit Gatsby geliefert wird, und wenn Sie diese verwenden, gibt sie Anker-Tags aus. Ihr HTML ist also echtes HTML, und Sie haben die Webplattform auf diese Weise genutzt. Aber in Ihren React-Komponenten arbeiten Sie direkt mit der Gatsby-Link-Komponente. Und das hat all diese Mechanismen für … Es betrachtet, was auch immer Ihr zukünftiges HREF sein wird, für diesen Link, zu dem Sie gehen möchten, und es wird gehen und Ressourcen von diesem Link holen und sie vorab laden.

Marcy: Und es ist nur intern auf Ihrer Seite. Es geht also nicht los und versucht, Dinge auf anderen Websites abzurufen. Aber es scheint ganz gut zu funktionieren. Ich weiß, dass einige Benutzer aktiv nach Möglichkeiten suchen, wie Sie sich tatsächlich von einigen dieser Dinge abmelden müssen. Zumindest Routing, ohne das Pre-Fetching zu verwenden. Sie verwenden einfach normale Anker-Tags. Und dann bekommt man diese Funktionalität nicht wirklich. Es ist ziemlich einfach, etwas anderes zu verwenden. Aber einige der Diskussionen, die wir führen, drehen sich um clientseitiges Routing und darum, wie man das bestmöglich macht. Das ist also auch ein wirklich interessanter Raum.

Drew: Wie eng müssen Sie innerhalb des Gatsby-Ökosystems zusammenarbeiten, wenn ich meine eigene Link-Komponente haben möchte? Wäre das völlig in Ordnung, würde ich nicht gegen Gatsby kämpfen, um so etwas zu tun?

Marcy: Nein, Sie können beliebige Komponenten einfügen, solange sie mit der React-Laufzeitumgebung funktionieren. Das ist wirklich das Schöne daran. Alles, was Sie in eine React-App einbauen könnten, könnten Sie in eine Gatsby-App einbauen. Es gibt sogar ein Pre-React-Plugin. Es gibt also einige Alternativen zur Arbeit mit Gatsby. Aber ich finde es toll, wie Sie beliebige Komponenten von der Stange, die Sie verwenden möchten, einbinden oder Ihre eigenen schreiben können.

Marcy: Und ich denke, dass Flexibilität das ist, was die Leute wirklich genießen. Es gibt die Einschränkung, dass es die React-Laufzeit verwendet. Daher müssen Sie damit einverstanden sein, React oder dieses Pre-React-Plugin zu verwenden. Aber ich persönlich mag React und JSX sehr, weil sie mit Zugänglichkeit und Vorlagen arbeiten, insbesondere mit React-Hooks. Es ist einfach so cool, die Hütte in meiner Gatsby-Site nutzen zu können. Ich mag es wirklich.

Drew: Und wie ist der Prozess zum Erstellen einer Gatsby-Site, die vermutlich ein Knotenmodul ist, das Sie einfach installieren können, und Sie würden einen Build erstellen, wie Sie es mit jedem anderen statischen Site-Generator tun würden?

Marcy: Ja. Es gibt eine CLI, die Sie global installieren. Und ich denke, es ist, ob Sie es global installieren möchten. Das empfehlen wir, denn dann können Sie es von jedem Verzeichnis auf Ihrem Computer ausführen, aber es wird alles herunterziehen, was Sie zum Erstellen einer Gatsby-Site benötigen. Und dann können Sie hinzufügen, sagen Sie, Sie wollten WordPress als kopfloses CMS oder eine andere Inhaltsquelle verwenden.

Marcy: Sie können Pakete und Plugins installieren, damit das funktioniert, und es dann in Ihre Website integrieren. Es gibt auch einige Starter und Themen, mit denen Sie schneller loslegen können. Ich habe diese verwendet, wenn ich etwas testen oder schnell eine Website für eine bestimmte Integration wie Drupal oder Prismic oder eine CMS- oder E-Commerce-Lösung oder etwas, das ich verwenden möchte, starten möchte.

Marcy: Es gibt viele Beispiele. Sie basteln also nicht immer mit Trial-and-Error herum, um es herauszufinden, sondern es sind diese Bausteine, die Sie zusammensetzen und erstellen können ... Wir nennen das Content Mesh. Und so können Sie diese besten Integrationen verwenden, um eine Website zu erstellen, anstatt, wenn ich eine klassische WordPress-Website hätte, die Autorenerfahrung und die Arbeit mit Teams wirklich großartig ist.

Marcy: Aber es gab Mängel im Frontend, wie es zum Beispiel auf einem mobilen Gerät funktionieren würde. Was sonst? Wenn ich eine E-Commerce-Lösung wollte? Ich denke, es gibt einige Dinge, die heutzutage einfacher zu machen sind, aber wenn Sie in der Lage sind, die beste Lösung für die Authentifizierung auszuwählen, oder was auch immer diese moderne Sache ist, denken Sie: „Ich wünschte, ich könnte das verwenden. ” Mit Gatsby können Sie viele dieser Dinge zusammenführen und diese Art des Aufbaus von Content-Meshs ziemlich erfrischend machen.

Marcy: Vor allem, wenn Sie diese Integrationen wie WordPress noch verwenden und immer noch mit Teams arbeiten können. Wir freuen uns also sehr über diese neue Arbeitsweise, bei der Sie alle Technologien auswählen können, die Ihnen gefallen oder die für Ihr Team funktionieren.

Drew: Eines der großen Features, die Gatsby stark anpreist, ist die Fähigkeit, Daten oder Inhalte aus einer Vielzahl unterschiedlicher Quellen zu beziehen. Sie haben Dinge wie WordPress und Drupal erwähnt, und was haben Sie. Traditionell, wenn ich etwas wie Jekyll oder Eleventy oder ähnliches verwende, müsste ich das selbst verkabeln, um mit APIs zu interagieren, vielleicht Inhalte herunterziehen und in Markdown-Dateien oder JSON-Dateien schreiben und dann den Generator zum Laufen bringen mit diesen Dateien.

Drew: Es wäre also eine Art zweistufiger Prozess, könnte so etwas wie Source Bit verwenden, das wir in einer früheren Episode behandelt haben, die so etwas macht? Verstehe ich richtig, dass Gatsby genau diese native Fähigkeit hat, verschiedene Quellen auf eine Weise zu nutzen, wie es andere Generatoren statischer Sites einfach nicht tun?

Marcy: Ich denke, was Gatsby in diesem Bereich wirklich stark macht, ist seine GraphQL-Datenschicht und das Plugin-Ökosystem. Es besteht also die Möglichkeit, dass jemand bereits ein Plugin für die Datenquelle geschrieben hat, die Sie erstellen möchten. Und wenn nicht, gibt es wahrscheinlich etwas in der Nähe. Aber die Verwendung von GraphQL ist eine Art Unterfunktion. Die Ebene, die all diese Integrationen ermöglicht, ist die Verwendung von GraphQL.

Marcy: Es gibt also viele Möglichkeiten, was man hineinziehen könnte, und wir versuchen, es auch einfach zu machen, Plugins zu schreiben. Es war also wirklich toll zu lernen, wie man ein Plugin schreibt, und den AST oder abstrakten Syntaxbaum, den es erstellt, und irgendwie zu lernen, wie das alles funktioniert, war wirklich cool. Aber ja, ich würde sagen, es gibt eine Menge Dinge von der Stange, die man nehmen könnte, ohne alles selbst schreiben zu müssen, was ziemlich großartig ist.

Marcy: Und es ist schön, die Flexibilität zu haben, Abschriften einzuziehen. Angenommen, Ihre Entwickler möchten Abschriften für ihre Blog-Inhalte schreiben, aber das Marketingteam ist damit wirklich nicht zufrieden. Sie könnten Inhaltsquellen kombinieren und sie von mehreren Stellen beziehen. Ich habe Leute gesehen, die Dinge aus anderen GitHub-Repositorys bezogen haben, und sie verwenden ein Get-Plug-in, um auf diese Weise Markdown-Inhalte abzurufen. Viel Flexibilität.

Drew: Und ich denke, Sie haben dann die Möglichkeit, Ihre eigenen Plugins zu schreiben, um sie aus einer benutzerdefinierten Datenquelle zu ziehen. Angenommen, Sie haben ein veraltetes System und möchten eine schöne, glänzende neue Website darauf setzen. Sie könnten ein Plugin schreiben, das die Daten in jedem beliebigen Format ausgibt, das benötigt wird, und es in etwas übersetzen, das größer wird als die Arbeit?

Marcy: Könntest du ja. Plugins ermöglichen dies. Und dann gibt es noch diese Abstraktion, die wir Gatsby-Themen nennen. Und das sind nicht nur Benutzeroberflächencodes, sondern es könnten GraphQL-Abfragen sein, Konfigurationen, die ein Plugin einrichten, also ist es wie ein Plugin mit einer Art gebündelter Nutzung. Und Sie können diese Themen auf NPM verteilen.

Marcy: Und dann, ihre Version und Sie können sie einbinden. Und diese ganze API ist auch wirklich interessant für Teams, die sagen, dass Sie mehrere Repos haben und Daten in diese ziehen möchten, es wäre sehr repetitiv, dieselben Abfragen zu haben in all diesen Repos im selben Code. Also, um die Dinge etwas abzutrocknen und sich nicht so oft zu wiederholen. Sie können diese als Themen bezeichneten Abstraktionen verwenden, um diese Logik oder diesen Code, der dieses Quell-Plugin aktivieren würde, zu verteilen. Es gibt also diese Art von Abstraktionsschichten, die Sie darauf aufbauen können, von denen wir gehört haben, dass Teams im Moment wirklich viel davon haben.

Drew: Ein Thema in der Gatsby-Welt sieht also nicht so aus, wie es bei CMS wie WordPress der Fall wäre.

Marcy: Ja, ich meine, es kann, aber das ist nicht alles, was es ist. Es ist also sehr schwierig, Dinge zu benennen. Aber Themen, bei denen ich wirklich Spaß daran hatte, etwas über die Flexibilität zu lernen und in der Lage zu sein, ja, Sie könnten etwas Code für die Benutzeroberfläche einfügen. Aber es könnte auch einen Abfragesprachencode geben, der dort hineinpasst. Aber die Tatsache, dass es irgendwie gebündelt ist, macht es einfach zu verteilen. Ja, es war eine wirklich nette Abstraktion, dass es cool war zu sehen, was die Leute bauen und welche Themen sie versenden, und all das.

Drew: Ja, ich kann mir vorstellen, dass es zu einigen ziemlich innovativen Anwendungen von Gatsby führen würde. Haben Sie etwas gesehen, das Ihnen besonders aufgefallen ist, dass Kunden das besonders kreativ machen?

Marcy: Ja. Nun, in Bezug auf Themen, ich meine, eines der ersten, von dem ich gelesen habe, ist eine Fallstudie im Gatsby-Blog, ich glaube von Apollo. Und sie haben eine Dokumentationsseite geschrieben, die Gatsby-Themen verwendet und die ein Get-Source-Plugin verwendet. Und so entkoppelt es Ihr Sourcing und Ihre Inhalte wirklich, sodass Teams ein Thema zur Verwendung in mehreren Repos abrufen können.

Marcy: Ich würde sagen, das ist für mich am interessantesten, nur weil ich mir vorstellen kann, wie es ermöglicht wird, frühere Teams, in denen ich war, wo wir Inhalte beschaffen mussten, wir waren einfach so begrenzt und wo dieser Code leben konnte und wie wiederholbar es könnte sein. Und jetzt sehen wir eine Lösung, bei der Teams sagen: „Oh, das funktioniert großartig.“ Und das war sogar letzten Sommer, oder so ähnlich, war vor einiger Zeit eine Fallstudie.

Marcy: Seitdem haben sich die APIs verbessert, und es gibt ein ganzes Team, das an Gatsby-Themen arbeitet. Und ich weiß, dass sie in den nächsten Wochen einige große Verbesserungen einführen werden. Also, ich möchte ihnen nicht den Donner stehlen, aber es gibt einige nette Sachen, die mit Themen kommen. Sie haben einige der Blogthemen überarbeitet, wie die Kernthemen, die wir von Gatsby anbieten.

Marcy: Ich weiß, dass sie es intern verwenden, um einige unserer eigenen Produktankündigungen oder Produktverbesserungen zu erstellen, die hier in den nächsten Wochen angekündigt werden. Also, viele coole Sachen, die mit Gatsby-Themen passieren, und Leute, die ihre eigenen Themen und Vorspeisen verkaufen. Ich finde das auch sehr interessant.

Drew: Um Gatsby herum entsteht eine Art Marktplatz.

Marcy: Das gibt es, ja.

Drew: Gibt es irgendeine Art von Online-Training und solche Dinge, wenn jemand möchte … Wenn jemand beschließt, dass er wirklich in Gatsby einsteigen würde und er es schnell lernen müsste? Gibt es Lauforte, an die sie mit dieser Art von Informationen gehen können?

Marcy: Eine Tonne davon? Jawohl. Da ist definitiv die Seite von Gatsby Doc, nämlich gatsbyjs.org/doc. Und wir haben Tutorials und ich mache fast jede Woche Live-Streams für Gatsby-Sachen. Es gibt eine Menge Pädagogen, die Gatsby-Material auf YouTube und verschiedenen Lernplattformen haben. Egghead, ich glaube, einige meiner Teamkollegen von Gatsby haben auch Egghead-Videos.

Marcy: Also, es gibt eine Menge Zeug da draußen. Ich würde sagen, überprüfen Sie die Daten darauf, wenn Sie etwas finden. Wir aktualisieren immer aktiv die Gatsby-Dokumente, einige der älteren Videos von Drittanbietern und andere Dinge, überprüfen Sie die Daten auf diesen, da wir nicht jede einzelne Lernressource auf Aktualisierung überwachen können. Es ist schwer, mit unserem eigenen Personal Schritt zu halten.

Marcy: Weil es einfach so viele Content-Sourcing-Optionen und Anwendungsfälle gibt. Es ist ein sehr weiter Raum. Aber es gibt so viel Lernmaterial und eine Menge Möglichkeiten, um loszulegen, dass Sie versuchen können, Dinge zu finden, je nachdem, wo Sie sich in Ihrem Lernspektrum befinden. Bist du in der Anfangsphase, kommst du aus anderen Technologien und musst nur lernen, was dieses React-Ding ist.

Marcy: Sie können sich aussuchen, welche Materialien für Sie funktionieren, je nachdem, wo Sie sich gerade befinden. Ich habe kürzlich einen Kurs über Live-Streams namens Gatsby Web Creators gemacht, bei dem wir den ganzen Weg von HTML, CSS und JavaScript für Anfänger bis hin zur Erstellung unserer ersten Gatsby-Site gegangen sind. Das haben wir gerade am Freitag abgeschlossen. Und so war es wirklich nett, den ganzen Weg zurück zum Anfang zu gehen.

Marcy: Und weil es viele Materialien mit Gatsby gibt, verwendet es React. Es ist also ein ziemlich großer Sprung, damit anzufangen. Also wollte ich wirklich zurückgehen und die Schritte unternehmen, um den ganzen Weg zum Erstellen von Dingen mit React und Gatsby zu gehen. Das war also wirklich ordentlich. Und ich freue mich darauf, diesen Weg fortzusetzen, damit es mehr Anfängermaterial und mehr Dinge gibt, die den Leuten helfen, zu verstehen, wie man eine Website mit Gatsby erstellt, weil viele dieser Fähigkeiten auf andere Frameworks übertragbar sind.

Drew: Eine der großen Fragen, die sich jedem stellen wird, der darüber nachdenkt, mit Gatsby eine Art Website für Kundenprojekte zu erstellen. Sie haben bereits erwähnt, wie Gatsby sich mit verschiedenen Content-Management-Systemen verbinden kann. Ist das die primäre Methode, die Sie einsetzen würden, um mit dieser Frage umzugehen? Oder hat Gatsby etwas in seinem Ökosystem, das es den Menschen ermöglichen würde, Inhalte in irgendeiner Weise zu bearbeiten?

Marcy: Ja, ich würde sagen, ein CMS oder so etwas kann diese Teambeziehungen viel besser funktionieren lassen. Ich war in solchen Anwendungsfällen, in denen die Entwicklerteams sagten: „Lernen Sie einfach HTML.“ Und Sie sehen diese Glasur vom Kunden wie: „Nein, ich kann nicht glauben, dass Sie das gerade gesagt haben.“ Es ist also super, super wichtig, ein System zu haben, in dem die Leute ihre beste Arbeit so erledigen können, wie es ihnen am besten passt.

Marcy: Als ob Sie einfach nicht mit dem Vermarkter GitHub umgehen könnten und vielleicht manchmal arbeiten, aber nicht immer. Eine Vorschau- und Build-Infrastruktur macht das besser, und hier kommt der Cloud-Produktbereich von Gatsby ins Spiel. Es gibt Möglichkeiten, eine Vorschau zu erstellen. Ohne die kostenpflichtige Cloud-Seite hat Gatsby Cloud eine kostenlose Stufe für persönliche Projekte, also ist nicht alles bezahlt.

Marcy: Aber wir haben dies, wie Open Source und das Produkt-Ökosystem, die irgendwie zusammenkommen, damit Gatsby als Gründungsorganisation genug Geld verdienen kann, um das Open-Source-Framework aufrechtzuerhalten, es gesund zu halten und unsere Community damit am Laufen zu halten . Das ist also der Punkt, an dem diese kommerzielle Open-Source-Seite zusammenkommt und einige dieser Workflows wirklich ermöglicht, die Teams brauchen.

Marcy: Einige Dinge wie das Erhalten schneller Vorschauen, das schnelle Veröffentlichen und Bereitstellen von Builds. Und so gibt es Lösungen speziell auf der Gatsby-Cloud-Seite, und wo immer es eine Open-Source-Möglichkeit gibt, Gatsby zum Arbeiten zu bringen, wie mit einem Vorschauserver oder so, versuchen wir, das zu dokumentieren und sicherzustellen, dass unsere Community weiß, was was ist und wie diesen Teambedürfnissen dienen.

Marcy: Ja, ich würde sagen, Sie brauchen eine Möglichkeit, eine Vorschau Ihrer CMS-Änderungen anzuzeigen, weil es wie diese sofortige Befriedigung ist. Sie möchten nicht eine Stunde auf einen Build warten, um Inhalte zu sehen.

Drew: Das ist also interessant. Der Gatsby-Clouddienst gibt Ihnen die Möglichkeit, einen Headless-CMS-Dienst zu verwenden, bei dem Sie nur mit dem Inhalt arbeiten, aber keine Visualisierung dessen haben, wie er auf Ihrer Website aussehen würde, sodass Sie eine Vorschau davon erhalten können würde funktionieren. Ist das richtig?

Marcy: Das ist es, ja. Und so ist es Teil des Kompromisses der Entkopplung, Ihr Headless-CMS, das vielleicht hatte, wie WordPress, Sie könnten einfach das Frontend nachschlagen, aber wir geben ihm ein neues Frontend und ziehen möglicherweise andere Quellen hinzu und andere Dinge, die WordPress nicht kennt. Es macht also Sinn, es auf diese Weise zu entkoppeln. Trotzdem müssen Sie als Teammitglied in der Lage sein, Ihre Arbeit in der Geschwindigkeit zu erledigen, an die Sie sich schnell gewöhnt haben.

Marcy: Und hier kommen die Gatsby-Vorschau, Gatsby-Builds ins Spiel, um den Teams dieses Frontend zurückzugeben, damit sie zusammenarbeiten, Entscheidungen treffen und etwas versenden können. Das ist also im letzten Jahr entstanden, hat immer mehr Funktionen und Verbesserungen bekommen und wir haben von einigen Teams gehört, die wirklich anfangen, Geschwindigkeitssteigerungen zu sehen.

Marcy: Und wenn wir herausfinden, „Okay, wenn dieser Build langsam vorangeht, warum ist das so?“ Das liegt normalerweise daran, dass die Seite wirklich sehr, sehr groß ist. Wir haben uns also stark auf Verbesserungen für große Websites konzentriert und diese teamorientierten, kollaborativen Arbeitsabläufe wirklich verbessert. Es ist derzeit ein großer Fokus des Teams.

Drew: Die Gatsby-Cloud ist also, ich denke, ihr Herzstück ist ein Hosting-Service. Handelt es sich um ein CDN zum Bereitstellen Ihrer Gatsby-Sites mit einer Menge Gatsby-spezifischer Funktionen und Features drumherum?

Marcy: Ich würde es eher als Continuous-Delivery-Produkt bezeichnen, weil es kein echtes CDN ist. Es lässt sich in CDNs wie Fastly und Netlify integrieren. Es gibt viele verschiedene Anbieter, die Sie anschließen können, und einige davon kostenlos. Sie können viel kostenlos tun, was ziemlich großartig ist. Ich habe es neulich in unserer letzten Gatsby-Web-Creator-Sitzung getan, wir verwenden Gatsby Cloud und Netlify, um unsere Website zu erstellen.

Marcy: Und es ermöglicht Ihnen, speziell Gatsby-Seiten schneller zu machen, weil es diese Verbesserungen hat. Es muss nur eine Art von Website erstellt werden. Es gibt also einige Verbesserungen, die Gatsby Cloud machen kann, die keine andere Plattform machen kann, weil sie versuchen, all diese verschiedenen Arten von Websites zu unterstützen, und sie machen sie alle sehr gut.

Marcy: Aber für Gatsby, wenn das alles ist, was du baust, und es gibt ziemlich viele Agenturen, die alle auf Gatsby setzen, und sie wollen es so schnell wie möglich machen. An dieser Stelle kann die Gatsby-Cloud einige Leistungsverbesserungen speziell für Gatsby vornehmen, da sie sich nicht um andere Plattformen kümmern muss.

Drew: Die Gatsby-Cloud würde also Ihren Build erstellen und ihn dann einfach auf etwas wie Netlify oder vermutlich an einer ganzen Reihe von verschiedenen Orten bereitstellen.

Marcy: Ja. Ja, das wird es. Und so ist es das Teil von Netlify, das es dann verwenden würde, wenn es diese gebauten Pakete hochlädt. Erstellte Dateien. Es verwendet nicht ihre Builds, also finden die Builds auf der Gatsby-Cloud-Infrastruktur statt, und dort können einige große Geschwindigkeitssteigerungen stattfinden. Und dann gibt es noch diesen Upload-Schritt, um es zu einem CDN zu bringen, welches auch immer Sie gewählt haben.

Marcy: Aber ja, es scheint, als würden Teams diese Fähigkeit zu sehen wirklich lieben. Ich meine, es ist eine Funktionalität, die Sie vermisst hätten. Und das ist eine notwendige Sache, die wieder hinzugefügt werden muss, um diese kollaborativen Vorschauen zu machen und Abzeichnungen und all das zu erhalten.

Drew: Gatsby Cloud wird also als Service von Gatsby, dem Unternehmen, bereitgestellt, und es gibt auch Gatsby, das Open-Source-Projekt. Ist das eine ähnliche Art von Beziehung wie WordPress und Automatic, wo Sie eine kommerzielle Einheit haben, die ein Open-Source-Produkt entwickelt?

Marcy: Ich würde sagen ja, wie Drupal. Es gibt Präzedenzfälle in der Technologie, diese Gründungsorganisationen zu haben, in denen es eine Art positiver Kreislauf ist. Und wir arbeiten gerade daran, einige Governance-Dokumentationen zu veröffentlichen, um sicherzustellen, dass unserer Community klar ist, wie wir Entscheidungen treffen. Aber das gesamte Ziel ist es, Gatsby nachhaltig zu halten, damit es weiterhin ein Open-Source-Projekt sein kann, das die Leute verwenden können, um sogar in die Gatsby-Cloud einzusteigen.

Marcy: Sie könnten andere Lösungen damit verwenden, wenn Sie möchten. Und deshalb brauchen wir genug Geschäft, um zu überleben, wie die Leute, die daran arbeiten. Und so bin ich irgendwie dazwischen, als ob ich zwischen der Open-Source- und der kommerziellen Seite schwebe und versuche sicherzustellen, dass wir die Dinge priorisieren. Ich meine, wie Sie sich vorstellen können, jonglieren wir mit vielen Dingen, wie breit die Räume sind, wir alle haben unsere Nischenanwendungsfälle, die wir mögen, die wir wirklich stark fühlen, die wir für unsere Arbeit tun müssen.

Marcy: Das summiert sich auf viele Nischenanwendungsfälle. Also versuchen wir zu jonglieren und Prioritäten zu setzen und unserer Community wirklich zuzuhören, wenn es darum geht, was gerade weh tut, was schmerzt, was gut läuft. Das war also eine interessante Reise für mich persönlich, um wieder in devREL einzusteigen und der Community wirklich zuzuhören, wie wir uns noch besser machen können?

Drew: Und gibt es rund um Gatsby eine große Community, die von vielen, vielen Leuten benutzt wird?

Marcy: Es gibt viele Leute, die es benutzen, viele Mitwirkende. Für viele Leute ist es also vielleicht das erste Mal, dass sie zu Open Source beitragen, wie zum Beispiel zu unseren Docks zu kommen und uns zum Hacktoberfest und so weiter zu begleiten. Und so war es wirklich schön zu sehen, was für eine große Community Gatsby hat, besonders mit Dingen wie Barrierefreiheit und dem Versuch, sicherzustellen, dass Frameworks alles tun, was sie können, und zwar kostenlos.

Marcy: Und da ist diese, ich weiß nicht, Teilmenge oder Schnittmenge von Zugänglichkeit und Gatsby, und das ist mein glücklicher Ort. Aber in der breiteren Community lernen viele Leute React oder Webentwicklung durch Gatsby. Es ist also wirklich schön, einen Fortschritt in unserer Community zu sehen, und hoffentlich bringen wir Leute dazu, einen Beitrag zu leisten, auch wenn es sich um ein Problem handelt oder so etwas wie „Hey, dieser Link war defekt oder dieser Teil der Docks war für mich verwirrend oder es ist veraltet.“

Marcy: Als ob Sie einfach nur einem Framework oder einem Projekt, das Sie verwenden, mitteilen, dass etwas besser sein könnte, ist eine großartige Möglichkeit, einen Beitrag zu leisten, da Sie uns dabei helfen können, Einblick in die Dinge zu erhalten, die verbessert werden könnten. Das ist also eine großartige Möglichkeit, einen Beitrag zu leisten.

Drew: Du hast Barrierefreiheit erwähnt, und natürlich werden die Leute dich als Experten für Barrierefreiheit kennen. 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.