Smashing Podcast Épisode 20 Avec Marcy Sutton : Qu'est-ce que Gatsby ?

Aujourd'hui, on parle de Gatsby. De quoi s'agit-il et comment s'intègre-t-il dans votre pile de développement Web ? Drew McLellan s'entretient avec l'experte Marcy Sutton pour le savoir.

Afficher les remarques

• Gatsby
• Marcy sur Twitter
• Site personnel de Marcy

Mise à jour hebdomadaire

• "Rendez vos sites rapides, accessibles et sécurisés avec l'aide de Google"
  par Dion Almaer
• "Comprendre le développement de plugins dans Gatsby"
  par Aleem Isiaka
• "Créer de minuscules applications de bureau avec Tauri et Vue.js"
  par Kelvin Omereshone
• "Suppression de la panique des alertes d'expédition et d'inventaire du commerce électronique"
  par Suzanne Scacca
• "Transitions CSS dans Vuejs et Nuxtjs"
  par Timi Omoyeni

Transcription

Drew McLellan : Elle est l'ingénieur principal de l'équipe des relations avec les développeurs chez Gatsby. Auparavant, elle a travaillé sur la bibliothèque de tests d'accessibilité open source axe-core et a également travaillé comme ingénieure en accessibilité chez Adobe. Elle est passionnée par l'amélioration du Web pour les personnes handicapées et en parle souvent lors de conférences. En 2016, O'Reilly lui a décerné le prix de la plateforme Web pour un travail sur l'accessibilité.

Drew : Elle co-dirige également les rencontres d'accessibilité Seattle et NW Tech Women Meetups dans une région locale. Donc, nous savons qu'elle est une ingénieure qualifiée et une experte en accessibilité. Mais saviez-vous qu'elle veut l'envoyer Angel Falls dans un tonneau ? Mes amis fracassants, veuillez accueillir Marcy Sutton.

Marcy Sutton : Bonjour.

Drew : Bonjour. Marcy. Comment vas-tu?

Marcy : Je suis fracassant. Comment vas-tu?

Drew : Je vais très bien. Merci. Je voulais vous parler aujourd'hui de Gatsby. Parce que cela est apparu dans une conversation que j'avais sur un épisode précédent sur l'apprentissage de React avec Mina Markham. J'ai réalisé que j'étais en danger de faire l'homme typique sur Internet de donner une opinion sur quelque chose dont je n'avais aucune expérience directe. Ce n'est donc pas comme ça que nous procédons chez Smashing.

Drew : Et je veux m'assurer que nous couvrons correctement Gatsby. Et quelle meilleure façon de le faire que de parler à quelqu'un qui le connaît de fond en comble. Donc, en supposant que j'ai peut-être entendu le nom de Gatsby. Mais je n'ai aucune idée de sa place dans la pile lors de la création d'un site Web. C'est quoi exactement Gatsby.

Marcy : Gatsby est un générateur de site Web, il utilise actuellement React. Mais cela créera pour vous un site Web statique qui se réhydratera ensuite en une application Web React complète. Ainsi, vous obtenez vraiment le meilleur des deux mondes avec des versions rapides que vous compilez des fichiers HTML qui se chargeront rapidement pour les utilisateurs. Et puis vous obtenez toutes ces améliorations avec JavaScript pour créer des applications Web dynamiques vraiment interactives.

Marcy : Donc, c'est un espace vraiment excitant. Et j'ai travaillé du côté de l'apprentissage avec la documentation et maintenant dans l'équipe Devrel, je me concentre sur le fait de le rendre aussi bon que possible, en connaissant les défis d'accessibilité avec JavaScript et juste essayer de le réparer de l'intérieur.

Drew : Beaucoup d'entre nous connaissent, je suppose, le concept d'un générateur de site statique. Et Gatsby semble largement s'inscrire dans ce rôle. Mais pour moi, il semble que cela va beaucoup plus loin que la plupart des SSG. Et la plupart des générateurs de sites sont indépendants du code frontal. Il semble qu'avec Gatsby, vous vous retrouvez avec le code Gatsby exécuté dans le cadre de votre site. Est-ce une évaluation juste? Et si oui, quel genre de choses Gatsby fait-il réellement dans votre front-end ?

Marcy : Oui, je dirais que le plus gros élément est le routage côté client. Donc, Gatsby utilise actuellement un routeur sous le capot. Il fait en quelque sorte sa propre implémentation. Mais c'est la pièce que lorsque vous chargez votre site statique pour la première fois, il y a des fichiers HTML là-bas. Ainsi, si l'utilisateur désactive JavaScript pour une raison quelconque, votre site devrait toujours être là, avoir toujours du contenu.

Marcy : Mais si JavaScript est activé, c'est à ce moment-là que cette étape d'hydratation se produit lorsque, lorsque vous utilisez des liens dans votre site Gatsby, il ira pré-récupérer les ressources de cette page, de sorte qu'il se chargera plus rapidement. Donc, tout cela est activé avec cette couche JavaScript que Gatsby vous donne. Et donc au-delà de cela, cela dépend vraiment de ce que vous utilisez sur votre site qui se retrouvera dans ce bundle JavaScript.

Marcy : Mais pour les choses qui utilisent beaucoup d'interactivité, comme les interfaces accessibles, c'est un bon endroit où être. Pour moi, j'apprécie vraiment d'avoir JavaScript à ma disposition à tout moment, et d'avoir mon balisage juste au bon endroit. Je sais que c'est une question de préférence, si vous voulez que votre HTML et votre JavaScript et votre CSS soient parfaitement couplés et qu'il y ait de la place pour des variations dans la construction de Gatsby

Marcy : Vous n'avez pas toujours besoin d'utiliser quelque chose comme CSS et JS. Mais il s'agit vraiment d'obtenir la puissance de cette couche JavaScript dynamique, à votre disposition pendant que vous écrivez votre site Web. Ce n'est pas comme cet ajout dans un fichier séparé.

Drew : Quand je pense au fonctionnement habituel d'un générateur de site statique, je pense au contenu dans peut-être des fichiers Markdown. Et le générateur parcourt ce contenu et le fusionne avec des modèles et crée des dizaines, des centaines, des milliers de fichiers HTML, qui sont les pages de votre site Web. Quand je pense à un site ou à une application React, je pense davantage à l'expérience d'une seule page où les interfaces sont créées par React à la volée. Donc, vous dites que Gatsby fait les deux ? C'est créer toutes les pages et aussi les améliorer avec JavaScript ?

Marcy : C'est vrai, oui. Gatsby utilisera Node.js au moment de la construction, il passera en revue vos composants React et les compilera dans des fichiers HTML. Honnêtement, la première fois que j'ai regardé Gatsby, je n'ai pas désactivé JavaScript et je me suis dit: "D'accord, y a-t-il d'autres pages ici, qu'est-ce que c'est?" Et j'étais si heureux que Gatsby fonctionne de cette façon par défaut. Il créera des fichiers construits à partir de vos composants de réaction, ce qui est génial.

Marcy : J'ai exploré des approches d'amélioration plus progressives car c'est en JavaScript. Comme quoi si vous voulez sortir quelque chose progressivement amélioré pour les utilisateurs, où s'ils ont désactivé JavaScript, vous ne voulez pas tout ce code cassé qui suppose que JavaScript est là. Il y a donc quelques bizarreries avec cela. Mais vous pouvez contourner ce genre de choses au moins pour vos flux d'utilisateurs principaux où vous voulez que quelqu'un puisse toujours acheter quelque chose, vous devrez peut-être ajouter un support et pour ces cas d'utilisation.

Marcy : Mais j'ai été agréablement surpris par la façon dont Gatsby le déploie par défaut. Et donc, c'est un choix qu'ils ont fait de construire des sites de cette façon, et nous l'évaluons toujours. Est-ce encore le meilleur moyen ? Que devons-nous faire pour donner à nos utilisateurs ce qu'ils demandent ? Donc, nous faisons quelques explorations en interne, juste pour nous assurer que Gatsby fait du mieux qu'il peut pour créer un site Web.

Marcy : Donc, en gardant des tailles de bundle petites, et en s'assurant que pour faire des compromis pour ce que nous disons, c'est un code performant avec préchargement. Comme, avons-nous les données pour sauvegarder cela? En tant que défenseur des développeurs, c'est le genre de chose qui m'intéresse beaucoup, c'est de s'assurer que ce que nous emballons et regroupons sur les sites Web est réellement nécessaire et fera vraiment le meilleur site Gatsby possible.

Drew : Vous avez mentionné la performance ici, et l'accent est mis sur la performance. Cela semble certainement de la façon dont Gatsby se présente. Est-ce une véritable fonctionnalité de Gatsby ou est-ce simplement la nature des sites Web JAMstack ?

Marcy: Je pense que cela peut être une nature des sites Web JAMstack. En fin de compte, cela dépendra de ce que vous regroupez sur votre site Web. Ainsi, quel que soit le framework ou l'outil que vous utilisez, nous devons toujours être attentifs à ce que nous mettons dans ces bundles pour les utilisateurs finaux. Mais Gatsby vise vraiment à vous donner de bons paramètres par défaut. Non seulement pour les performances, mais aussi pour l'accessibilité.

Marcy : Mais cela demande toujours une évaluation, nous devons toujours nous assurer que si nous avons ajouté quelque chose, il est toujours performant. Mais oui, en obtenant cette charge utile initiale de fichiers statiques, ils se chargent rapidement. Beaucoup plus rapide que le site WordPress classique que j'avais l'habitude d'avoir. Mais ensuite, améliorez-le avec JavaScript. Il y a certainement des compromis là-bas.

Marcy : Mais ça marche très bien, beaucoup de gens, ils aiment vraiment leurs sites Gatsby. Donc, c'était amusant de travailler dessus à plein temps et d'apprendre les tenants et les aboutissants d'un framework JavaScript comme Gatsby.

Drew : Quel type de fonctionnalités de performance Gatsby a-t-il mis en place pour accélérer vos sites ?

Marcy : Eh bien, avec la pré-extraction des liens, ce client a dit des trucs de routage, je dirais que c'est probablement le plus gros. Faciliter la création d'une application Web progressive. Ainsi, ayant des capacités hors ligne, vous pouvez en quelque sorte choisir ce que vous voulez en termes de contenu hors ligne et de type PWA. Mais ils font vraiment partie de l'expérience initiale, comme beaucoup d'exemples de sites de démarrage à partir desquels vous pourriez commencer ont des exemples d'utilisation d'un manifeste et de création de cette version moderne de votre site Web.

Marcy : Vraiment, c'est comme ne pas envoyer de code dont vous n'avez pas besoin. C'est une grande partie de celui-ci. La mise en cache, c'est vraiment la pré-extraction des liens. C'est ce que je dirais est le plus gros morceau de celui-ci.

Drew : C'est donc là que le site anticipe réellement où l'utilisateur va aller. Est-ce aussi intelligent que cela ou pré-récupère-t-il tout sur la page ou ?

Marcy : Non, c'est basé sur l'interaction de l'utilisateur. Donc, si l'utilisateur fait défiler le port View, il y a quelque chose de pré-récupération qui s'y passe. Si vous passez la souris sur les liens, cela va en quelque sorte estimer qu'il y a de fortes chances que vous accédiez à cette page. Nous avons discuté en interne, eh bien, je suppose, open source pour savoir si cette pré-extraction devrait également se produire sur le focus du clavier, de sorte que l'intersection de l'accessibilité et des performances est très intéressante.

Marcy: Il y a des compromis là-bas, comme si un utilisateur de clavier qui ne peut pas utiliser la souris et qui tabule sur chaque lien pour naviguer, devrait-il vraiment récupérer du contenu pour chacun d'entre eux, car un utilisateur de souris pourrait être un peu plus sélectif sur l'endroit où ils placent le curseur de leur souris. Donc, ces conversations que je trouve extrêmement fascinantes.

Marcy : Et en essayant de réfléchir aux données dont nous avons besoin pour valider ces hypothèses également. Alors oui, ça a été super intéressant d'examiner ces valeurs par défaut et quelles améliorations pouvons-nous apporter et vraiment vérifier la quantité de données que cela récupère ? Est-ce vraiment une bonne chose ? Juste pour accélérer un peu ? Ou c'est assez rapide sans ça ? Existe-t-il des solutions alternatives que nous pourrions utiliser dans le cadre du plaisir de travailler sur un cadre, car nous sommes en mesure d'évaluer tous ces compromis.

Drew : Il s'agit de prérécupérer quelque chose que les utilisateurs obtiennent gratuitement sur leur site. Alors doivent-ils faire du travail pour le mettre en œuvre?

Marcy : Vous l'obtenez gratuitement en utilisant le lien Gatsby. C'est donc un composant fourni avec Gatsby et lorsque vous l'utilisez, il génère des balises d'ancrage. Votre HTML est donc du vrai HTML et vous avez ainsi exploité la plate-forme Web. Mais dans vos composants React, vous travaillez directement avec le composant de lien Gatsby. Et cela a tous ces mécanismes pour… Il regarde quel que soit votre futur HREF, pour ce lien vers lequel vous voulez aller et il ira chercher des ressources à partir de ce lien et les préchargera.

Marcy : Et c'est uniquement interne à votre site. Donc, il ne s'agit pas d'essayer d'aller chercher des choses sur d'autres sites Web. Mais ça semble plutôt bien fonctionner. Je sais que certains utilisateurs recherchent activement des moyens, comme vous devez en fait vous désinscrire de certaines de ces choses. Au moins le routage, sans utiliser le préchargement. Vous utilisez simplement des balises d'ancrage régulières. Et puis vous n'obtenez pas vraiment cette fonctionnalité. C'est assez facile d'utiliser autre chose. Mais certaines des discussions que nous avons portent sur le routage côté client et sur la façon de l'optimiser au mieux. Et donc, c'est aussi un espace vraiment intéressant.

Drew : Dans quelle mesure devez-vous travailler au sein de l'écosystème Gatsby pour savoir si je voulais avoir mon propre composant de lien ? Est-ce que ça irait parfaitement, je ne me battrais pas contre Gatsby pour faire ce genre de choses ?

Marcy : Non, vous pouvez insérer les composants de votre choix, tant qu'ils fonctionnent avec l'environnement d'exécution React. C'est vraiment la beauté de celui-ci. Tout ce que vous pourriez mettre dans une application React, vous pourriez le mettre dans une application Gatsby. Il y a même un plugin pré-React. Il existe donc des alternatives au travail avec Gatsby. Mais j'aime la façon dont vous pouvez extraire n'importe quel composant prêt à l'emploi que vous souhaitez utiliser ou écrire le vôtre.

Marcy : Et je pense que la flexibilité est ce que les gens apprécient vraiment. Il y a la mise en garde qu'il utilise le runtime React. Et donc, vous devez accepter d'utiliser React ou d'utiliser ce plugin pré-React. Mais personnellement, j'aime beaucoup réagir et JSX pour travailler avec l'accessibilité et les modèles, en particulier avec les crochets React. Donc, pouvoir utiliser la cabane sur mon site Gatsby est tellement cool. J'aime vraiment ça.

Drew : Et comment se passe le processus de construction d'un site Gatsby qui est vraisemblablement un module de nœud que vous pouvez simplement installer et vous feriez une construction comme vous le feriez avec n'importe quel autre générateur de site statique ?

Marcy : Oui. Il existe une CLI que vous installez globalement. Et je suppose que c'est si vous voulez l'installer globalement. C'est ce que nous recommandons, car vous pouvez alors l'exécuter à partir de n'importe quel répertoire de votre ordinateur, mais il affichera tout ce dont vous avez besoin pour créer un site Gatsby. Et puis vous pouvez ajouter, disons que vous vouliez utiliser WordPress comme CMS sans tête ou une autre source de contenu.

Marcy : Vous pouvez installer des packages, des plugins pour que cela fonctionne, puis les intégrer à votre site. Il existe également des démarreurs et des thèmes que vous pouvez utiliser pour être opérationnel plus rapidement. Je les ai utilisés si je veux tester quelque chose ou démarrer un site rapidement pour une intégration spécifique comme Drupal ou prismique ou n'importe quelle solution CMS ou eCommerce ou quelque chose que je veux utiliser.

Marcy : Il y a beaucoup d'exemples. Donc, vous n'êtes pas toujours en train de bricoler avec des essais et des erreurs pour essayer de comprendre, mais c'est en quelque sorte ces blocs de construction que vous pouvez assembler et créer… C'est ce que nous appelons le maillage de contenu. Et ainsi, vous pouvez utiliser ces meilleures intégrations pour créer un site au lieu de, si j'avais un site WordPress classique, l'expérience de création et le travail en équipe sont vraiment formidables.

Marcy : Mais il y avait des lacunes dans le front-end, comme la façon dont cela fonctionnerait sur un appareil mobile. Quoi d'autre? Si je voulais une solution eCommerce ? Je pense qu'il y a certaines choses qui sont plus faciles à faire de nos jours, mais être capable de choisir le type de meilleures solutions que vous voulez pour l'authentification, ou quoi que ce soit de moderne, vous vous dites : « J'aimerais pouvoir utiliser ça. ” Avec Gatsby, vous pouvez rassembler beaucoup de ces éléments et créer ce maillage de contenu de manière plutôt rafraîchissante.

Marcy : Surtout quand vous pouvez toujours utiliser ces intégrations comme WordPress et continuer à travailler avec des équipes. Nous sommes donc ravis de cette nouvelle façon de travailler où vous pouvez choisir toutes les technologies que vous aimez ou qui fonctionnent pour votre équipe.

Drew : L'une des principales fonctionnalités de Gatsby est sa capacité à extraire des données ou du contenu à partir d'une variété de sources différentes. Vous avez mentionné des choses comme WordPress et Drupal, et ainsi de suite. Traditionnellement, si j'utilisais quelque chose comme Jekyll ou Eleventy, ou quelque chose comme ça, j'aurais besoin de le câbler moi-même pour interagir avec les API, peut-être extraire le contenu et l'écrire dans des fichiers de démarquage ou des fichiers JSON, puis faire fonctionner le générateur avec ces fichiers.

Drew : Ce serait donc une sorte de processus en deux étapes, pourrait-on utiliser quelque chose comme le bit source, dont nous avons parlé dans un épisode précédent qui fait ce genre de chose ? Dois-je bien comprendre que Gatsby a juste cette capacité native à consommer différentes sources d'une manière que d'autres générateurs de sites statiques n'ont tout simplement pas ?

Marcy : Je pense que ce qui rend Gatsby vraiment fort dans ce domaine, c'est sa couche de données GraphQL et l'écosystème de plugins. Il y a donc de fortes chances que quelqu'un ait déjà écrit un plug-in pour la source de données que vous souhaitez créer. Et sinon, il y a probablement quelque chose de proche. Mais utiliser GraphQL, c'est en quelque sorte le sous-fonctionnement de celui-ci. La couche qui rend toutes ces intégrations possibles utilise GraphQL.

Marcy : Et donc, il y a beaucoup de possibilités pour ce que vous pourriez tirer et nous essayons aussi de faciliter l'écriture de plugins. Donc ça a été vraiment chouette d'apprendre comment écrire un plugin, et l'AST ou l'arbre de syntaxe abstraite qu'il crée et d'apprendre comment tout cela fonctionne a été vraiment cool. Mais oui, je dirais qu'il y a beaucoup de choses sur l'étagère que vous pourriez ramasser sans avoir à tout écrire vous-même, ce qui est plutôt génial.

Marcy : Et c'est bien d'avoir la possibilité d'appliquer des démarques. Supposons que vos développeurs souhaitent rédiger leur démarque de contenu de blog, mais que l'équipe marketing n'est vraiment pas satisfaite de cela, vous pouvez combiner des sources de contenu et les obtenir à partir de plusieurs endroits. J'ai vu des gens s'approvisionner à partir d'autres référentiels GitHub, et ils utilisent un plugin get pour extraire le contenu de démarque de cette façon. Beaucoup de flexibilité.

Drew : Et je suppose que vous avez alors la possibilité d'écrire vos propres plugins à extraire d'une source de données personnalisée. Supposons que vous ayez un système hérité et que vous souhaitiez y ajouter un nouveau site Web agréable et brillant. Vous pourriez écrire un plugin qui extrairait les données dans n'importe quel format nécessaire et les traduirait en quelque chose qui devient plus gros que de travailler avec ?

Marcy : Vous pourriez oui. Et donc, les plugins permettent cela. Et puis il y a cette abstraction en plus de cela, que nous appelons les thèmes de Gatsby. Et ce ne sont pas seulement du code d'interface utilisateur, mais il peut s'agir de requêtes GraphQL, de configurations qui configurent un plugin, donc c'est comme un plugin avec une sorte d'utilisation regroupée. Et vous pouvez distribuer ces thèmes sur NPM.

Marcy : Et puis, leur version et vous pouvez les intégrer. Et toute cette API est également très intéressante pour les équipes qui disent que vous avez plusieurs référentiels et que vous souhaitez y extraire des données. Il serait très répétitif d'avoir les mêmes requêtes. dans tous ces dépôts dans le même code. Alors, pour sécher un peu les choses et ne pas trop se répéter. Vous pouvez utiliser ces abstractions appelées thèmes, pour trier autour de cette logique ou du code qui activerait ce plugin source. Donc, il y a ce genre de couches d'abstractions que vous pouvez construire dessus et dont nous avons entendu dire que les équipes tirent vraiment beaucoup de profit en ce moment.

Drew : Donc, un thème dans le monde de Gatsby n'a pas l'apparence d'un CMS comme WordPress.

Marcy : Ouais, je veux dire, ça peut mais ce n'est pas tout. Donc, nommer les choses est très difficile. Mais les thèmes que j'ai vraiment aimé apprendre sur la flexibilité et pouvoir, oui, vous pouvez inclure du code d'interface utilisateur. Mais il pourrait également y avoir un code de langage de requête qui y figure. Mais le fait qu'il soit en quelque sorte regroupé facilite la distribution. Ouais, ça a été une très belle abstraction que c'était cool de voir ce que les gens construisent et quels thèmes ils proposent, et tout ça.

Drew : Oui, je peux imaginer que cela conduirait à des utilisations assez innovantes de Gatsby. Avez-vous vu quelque chose qui a été, en particulier qui a attiré votre attention sur le fait que les clients font cela de manière particulièrement créative ?

Marcy : Ouais. Eh bien, en termes de thèmes, je veux dire, l'un des premiers que j'ai lu, il y a une étude de cas sur le blog Gatsby, je pense d'Apollo. Et ils ont écrit un site de documentation utilisant des thèmes Gatsby et qui utilisait un plugin get source. Et donc, cela découple vraiment votre sourcing et votre contenu, ce qui permet aux équipes de tirer un thème à utiliser sur plusieurs dépôts.

Marcy: Je dirais que c'est le plus intéressant pour moi juste à cause de ce que je peux imaginer qu'il permet comme, les équipes passées où j'étais où nous devions trouver du contenu, nous étions tellement limités et où ce code pouvait vivre et comment répétable il pourrait être. Et donc, voir une solution maintenant où les équipes se disent: "Oh, ça marche très bien." Et c'était même l'été dernier, ou comme ça c'était une étude de cas il y a quelque temps.

Marcy : Depuis, les API se sont améliorées et toute une équipe travaille sur les thèmes de Gatsby. Et je sais qu'ils déploient de grandes améliorations dans les prochaines semaines. Donc, je ne veux pas voler leur tonnerre, mais il y a des trucs sympas avec des thèmes. Ils ont révisé certains des thèmes du blog comme les thèmes principaux que nous proposons de Gatsby.

Marcy : Je sais qu'ils l'utilisent en interne pour construire certaines de nos propres annonces de produits, ou des améliorations de produits qui seront annoncées ici dans les prochaines semaines. Donc, il se passe beaucoup de choses sympas avec les thèmes Gatsby, et les gens vendent leurs propres thèmes et starters. Je pense que c'est vraiment intéressant aussi.

Drew : Il y a un petit marché qui se développe autour de Gatsby.

Marcy : Oui, oui.

Drew : Existe-t-il une sorte de formation en ligne et ce genre de choses si quelqu'un veut… Si quelqu'un décide qu'il va vraiment se lancer dans Gatsby et qu'il doit l'apprendre rapidement ? Y a-t-il des endroits où ils peuvent aller avec ce genre d'informations disponibles ?

Marcy : Une tonne ? Oui. Il y a certainement le site de Gatsby Doc, qui est gatsbyjs.org/doc. Et nous avons des tutoriels, et j'ai fait des diffusions en direct presque chaque semaine pour des trucs de Gatsby. Il y a une tonne d'éducateurs qui ont du matériel Gatsby sur YouTube et diverses plateformes d'apprentissage. Egghead, je pense que certains de mes coéquipiers de Gatsby ont aussi des vidéos egghead.

Marcy : Donc, il y a une tonne de choses là-bas. Je dirais de vérifier les dates dessus si vous trouvez quelque chose. Nous mettons toujours activement à jour les Gatsby Doc, certaines des vidéos tierces plus anciennes et les choses qui peuvent, vérifiez les dates sur celles-ci car nous ne pouvons pas surveiller chaque ressource d'apprentissage pour la mise à jour. Il est difficile de suivre le rythme de notre propre personnel.

Marcy : Parce qu'il y a tellement de choses à voir avec le nombre d'options d'approvisionnement en contenu et de cas d'utilisation. C'est un espace très vaste. Mais il y a tellement de matériel d'apprentissage là-bas, et une tonne de façons de commencer que vous pouvez en quelque sorte essayer de trouver des choses comme selon où vous vous trouvez sur votre spectre d'apprentissage. Êtes-vous au début, venez-vous d'autres technologies et vous avez juste besoin d'apprendre ce qu'est ce truc React.

Marcy : Vous pouvez en quelque sorte choisir les matériaux qui fonctionneront pour vous en fonction de l'endroit où vous vous trouvez. J'ai récemment suivi un cours via des flux en direct appelé Gatsby Web Creators, où nous sommes allés du HTML, CSS et JavaScript débutant jusqu'à la création de notre premier site Gatsby. Nous venons de terminer cela vendredi. Et donc, ça a été vraiment chouette de revenir au début.

Marcy : Et parce que beaucoup de matériaux avec Gatsby, il utilise React. Donc, c'est un assez grand saut pour commencer avec ça. Donc, je voulais vraiment revenir en arrière et prendre les mesures nécessaires pour construire des choses avec React et Gatsby. Donc c'était vraiment chouette. Et je suis ravi de continuer sur cette voie, afin qu'il y ait plus de matériel pour débutants et plus de choses pour aider les gens à comprendre comment créer un site avec Gatsby, car beaucoup de ces compétences sont transférables à d'autres frameworks.

Drew : L'une des grandes questions qui va se poser à tous ceux qui envisagent de créer des types de sites de projets clients à l'aide de Gatsby, l'une des grandes questions qui va se poser concerne la gestion du contenu et la présentation d'éléments à un client. Vous avez déjà mentionné comment Gatsby peut se connecter à différents systèmes de gestion de contenu. Est-ce la principale méthode que vous mettriez en place pour répondre à cette question? Ou Gatsby a-t-il quelque chose dans son écosystème qui permettrait aux gens de modifier le contenu de quelque manière que ce soit ?

Marcy : Oui, je dirais qu'avoir un CMS ou quelque chose comme ça peut rendre ces relations d'équipe beaucoup plus efficaces. J'ai été dans ces cas d'utilisation où les équipes de développement aiment, "Il suffit d'apprendre le HTML." Et vous voyez cette glaçure du client du genre "Non, je ne peux pas croire que vous venez de dire ça." Donc, avoir un système où les gens peuvent faire de leur mieux de la manière qui leur convient le mieux est super, super important.

Marcy : Par exemple, vous ne pouvez tout simplement pas gérer le marketing GitHub, et vous pouvez travailler de temps en temps, mais pas tout le temps. Et donc, avoir comme une infrastructure de prévisualisation et de construction améliore cela, et c'est là que l'espace de produit cloud Gatsby entre en quelque sorte dans la mêlée. Il existe des moyens de faire un aperçu. Sans le côté cloud payant et le cloud Gatsby a un niveau gratuit pour les projets personnels, donc tout n'est pas payé.

Marcy : Mais nous avons ceci, comme l'open source et l'écosystème de produits qui se rejoignent pour que Gatsby puisse, en tant qu'organisation fondatrice, gagner suffisamment d'argent pour maintenir le cadre open source, le maintenir en bonne santé et faire en sorte que notre communauté continue de fonctionner. . C'est donc en quelque sorte là que ce côté commercial open source se réunit et permet vraiment certains de ces flux de travail dont les équipes ont besoin.

Marcy : Certaines choses comme obtenir des aperçus rapides, obtenir des versions rapidement et déployées. Et donc, il existe des solutions spécifiquement du côté du cloud Gatsby, et ensuite, partout où il existe un moyen open source de faire fonctionner Gatsby comme avec un serveur de prévisualisation ou quelque chose, nous essayons de documenter cela et de nous assurer que notre communauté sait ce qui est quoi et comment répondre aux besoins de l'équipe.

Marcy : Oui, je dirais que vous avez besoin d'un moyen de prévisualiser les modifications apportées à votre CMS, car c'est comme une gratification instantanée. Vous ne voulez pas attendre une heure pour une version pour voir du contenu.

Drew : Alors c'est intéressant. Le service cloud Gatsby vous donne la possibilité d'utiliser un service CMS sans tête, où vous travaillez simplement avec le contenu, mais vous n'avez aucune visualisation de ce à quoi il ressemblerait sur votre site vous permet d'avoir un aperçu de la façon dont cela travaillerait. Est-ce correct?

Marcy : C'est ça, ouais. Et donc, cela fait partie du compromis du découplage, votre CMS sans tête, qui peut avoir eu, comme WordPress, vous pourriez simplement rechercher le front-end, mais nous lui donnons un nouveau front-end, et potentiellement en tirant d'autres sources et d'autres choses que WordPress ne connaît pas. Et donc, le découpler de cette manière a du sens. Mais vous, en tant que membre de l'équipe, vous devez toujours être capable de faire votre travail à la vitesse à laquelle vous êtes rapidement habitué.

Marcy : Et donc, c'est là que l'aperçu de Gatsby, les builds de Gatsby entrent en jeu pour redonner ce front-end aux équipes afin qu'elles puissent collaborer, qu'elles puissent prendre des décisions, faire expédier quelque chose. Cela a donc vu le jour l'année dernière, avec toujours plus de fonctionnalités et d'améliorations et nous avons entendu certaines équipes qui commencent vraiment à voir des augmentations de vitesse.

Marcy : Et alors que nous nous disions : « D'accord, si cette version est lente, pourquoi ? » C'est généralement parce que le site est vraiment très grand. Nous nous sommes donc beaucoup concentrés sur les améliorations pour les grands sites et sur l'amélioration de ces workflows d'équipe et collaboratifs. C'est une grande priorité de l'équipe en ce moment.

Drew : Donc, le cloud Gatsby est, je suppose qu'en son cœur se trouve un service d'hébergement. Est-ce un CDN pour déployer vos sites Gatsby avec une charge de fonctionnalités et de fonctionnalités spécifiques à Gatsby autour de lui ?

Marcy : Je l'appellerais plutôt un produit de livraison continue, car ce n'est pas un véritable CDN. Il s'intègre aux CDN comme Fastly, Netlify. Il existe de nombreux fournisseurs différents que vous pouvez connecter et certains d'entre eux sont gratuits. Vous pouvez faire beaucoup de choses gratuitement, ce qui est plutôt génial. Je viens de le faire l'autre jour lors de notre dernière session de créateurs Web Gatsby, nous utilisons le cloud Gatsby et Netlify pour créer notre site.

Marcy : Et cela vous permet de rendre les sites Gatsby plus rapides en particulier, car il a ces améliorations. Il n'a qu'à construire un seul type de site. Donc, il y a des améliorations que le cloud Gatsby peut apporter, qu'aucune autre plate-forme ne peut apporter, car ils essaient d'aimer prendre en charge tous ces différents types de sites Web et ils les font tous très bien.

Marcy : Mais pour Gatsby, si c'est tout ce que vous construisez, et il y a pas mal d'agences, qui sont toutes sur Gatsby, et elles veulent le faire aussi vite qu'elles le peuvent. C'est donc là que le cloud Gatsby peut apporter des améliorations de performances spécifiquement pour Gatsby, car il n'a pas à se soucier des autres plates-formes.

Drew : Donc, Gatsby cloud ferait votre build, et il le déploierait ensuite simplement sur quelque chose comme Netlify ou vraisemblablement dans toute une gamme d'endroits différents.

Marcy : Oui. Oui, ce sera le cas. Et donc, c'est le morceau de Netlify qu'il utiliserait alors pour télécharger ces packages construits. Fichiers construits. Il n'utilise pas leurs builds, donc les builds se produisent sur l'infrastructure cloud de Gatsby, et c'est là que de nombreuses augmentations de vitesse peuvent se produire. Et puis il reste encore cette étape de téléchargement pour le transférer vers un CDN, celui que vous avez choisi.

Marcy : Mais oui, il semble que les équipes aiment vraiment cette capacité à voir. Je veux dire, c'est une fonctionnalité que vous auriez manquée. Et donc, c'est une chose nécessaire à rajouter, c'est d'être capable de faire ces aperçus collaboratifs et d'obtenir des approbations et tout ça.

Drew : Donc, le cloud Gatsby est fourni en tant que service par la société Gatsby, et il y a aussi Gatsby, le projet open source. S'agit-il d'une relation similaire à celle de WordPress et automatique, où vous avez une entité commerciale développant un produit open source ?

Marcy : Je dirais oui, comme Drupal. Il y a un précédent dans la technologie pour avoir ces organisations fondatrices où c'est une sorte de cercle vertueux. Et nous travaillons actuellement à la publication de documents sur la gouvernance pour nous assurer que, c'est très clair pour notre communauté, comment nous prenons des décisions. Mais tout l'objectif est de garder Gatsby durable, afin qu'il puisse continuer à être un projet open source que les gens peuvent utiliser sans même entrer dans le cloud Gatsby.

Marcy : Vous pouvez utiliser d'autres solutions si vous le souhaitez. Et donc, nous avons besoin d'assez d'affaires pour soutenir, comme les gens qui y travaillent. Et donc, je suis un peu entre les deux, comme si je flottais entre l'open source et le côté commercial et j'essaie de m'assurer que nous priorisons les choses. Je veux dire, comme vous pouvez l'imaginer, nous jonglons avec beaucoup de choses avec la largeur des espaces, nous avons tous nos cas d'utilisation de niche que nous aimons, que nous ressentons vraiment fortement, que nous devons faire pour notre travail.

Marcy : Cela représente de nombreux cas d'utilisation de niche. Donc, nous essayons de jongler et de prioriser et d'écouter vraiment notre communauté sur ce qui fait mal en ce moment, ce qui est douloureux, ce qui va bien. Et donc, cela a été un voyage intéressant pour moi personnellement pour revenir dans devREL et vraiment écouter la communauté sur, comment pouvons-nous nous rendre encore meilleurs ?

Drew : Et y a-t-il une grande communauté autour de Gatsby, beaucoup de gens l'utilisent ?

Marcy : Il y a beaucoup de gens qui l'utilisent, beaucoup de contributeurs. Donc, pour beaucoup de gens, c'est peut-être la première fois qu'ils contribuent à l'open source, comme venir sur nos quais et nous rejoindre pour Hacktoberfest et des choses comme ça. Et donc, c'était vraiment bien de voir ce qu'a une grande communauté Gatsby, en particulier avec des choses comme l'accessibilité et en essayant de s'assurer que les frameworks font tout ce qu'ils peuvent gratuitement.

Marcy : Et donc, il y a ce, je ne sais pas, sous-ensemble ou intersection de l'accessibilité et de Gatsby et c'est mon endroit heureux. Mais dans la communauté au sens large, beaucoup de gens apprennent React ou apprennent le développement Web via Gatsby. Et donc, c'est vraiment bien de voir une progression dans notre communauté, et j'espère que nous amènerons les gens à contribuer, même si c'est un problème ou quelque chose comme "Hé, ce lien a été rompu ou cette partie des quais m'a déroutée ou il est obsolète.

Marcy : Par exemple, même simplement dire à un framework ou à un projet que vous utilisez, que quelque chose pourrait être amélioré est un excellent moyen de contribuer, car vous pouvez nous aider à mieux comprendre les choses qui pourraient être améliorées. C'est donc une excellente façon de contribuer.

Drew : Vous avez mentionné l'accessibilité et bien sûr, les gens vous connaîtront comme étant un expert en accessibilité. And they might be surprised to see you working with sort of fully featured front end framework like React, thinking that perhaps the two don't really go together. Is that always the case at JavaScript heavy front ends are worth less accessible?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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