Qu'estce que Gatsby?

Aujourd'hui, nous parlons de Gatsby. Qu'est-ce que c'est et comment s'intègre-t-il dans votre pile de développement Web?

Notes de présentation

Mise à jour hebdomadaire

Transcription

Drew McLellan: Elle est l'ingénieur principal de l'équipe des relations avec les développeurs à Gatsby. Auparavant, elle a travaillé sur la bibliothèque de tests d'accessibilité ax-core ax source, et a également travaillé en tant qu'ingénieur d'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 a décerné son prix de plate-forme Web pour un travail sur l'accessibilité.

Drew: Elle codirige également les Meetups d'accessibilité Seattle et NW Tech Women dans une région locale. Nous savons donc 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 souhaitent la bienvenue à Marcy Sutton.

Marcy Sutton: Bonjour.

Drew: Bonjour. Marcy. Comment allez-vous?

Marcy: Je suis en train de casser. Comment allez-vous?

Drew: Je vais très bien. Je vous remercie. 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 un avis sur quelque chose que je n'avais pas d'expérience directe. Ce n'est donc pas ainsi que nous faisons les choses à 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 à l'intérieur comme à l'extérieur. Donc, en supposant que j'ai peut-être entendu le nom de Gatsby. Mais je n'ai aucune idée de l'endroit où il s'intègre dans la pile lors de la création d'un site Web. Quel est 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 constructions 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 vraiment un espace passionnant pour être dedans. Et je travaille sur le côté apprentissage avec la documentation et maintenant au sein de l'équipe Devrel, je m'efforce de le rendre aussi performant que possible, en connaissant les défis d'accessibilité avec JavaScript et en essayant simplement de le résoudre de l'intérieur.

Drew: Beaucoup d'entre nous seront familiers, Je suppose, avec le concept d'un générateur de site statique. Et Gatsby semble s'inscrire largement 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 du code Gatsby fonctionnant 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 la plus grande partie de cela est le routage côté client. Donc, Gatsby utilise actuellement un routeur à portée sous le capot. Il fait en quelque sorte sa propre implémentation. Mais c'est l'élément que lorsque vous chargez votre site statique pour la première fois, il y a des fichiers HTML. Donc, si l'utilisateur désactive JavaScript pour une raison quelconque, votre site devrait toujours être là, toujours avoir du contenu.

Marcy: Mais si JavaScript est activé, c'est à ce moment que cette étape d'hydratation se produit où, lorsque vous utilisez des liens dans votre site Gatsby, il récupérera les ressources de cette page, il se chargera donc plus rapidement. Donc, tout est activé avec cette couche JavaScript que Gatsby vous offre. Et donc au-delà de cela, cela dépend vraiment de ce que vous utilisez dans votre site 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 pour être. Pour moi, j'aime vraiment avoir JavaScript à ma disposition à tout moment, et avoir mon balisage juste au bon endroit. Je sais que c'est une question de préférence, que vous souhaitiez que votre HTML et votre JavaScript et votre CSS soient bien associés et qu'il y ait de la place pour des variations dans la construction de Gatsby

Marcy: Vous n'avez pas toujours à 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 add-on dans un fichier séparé.

Drew: Quand je pense au fonctionnement d'un générateur de site statique, je pense au contenu 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 plus à 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? Il crée toutes les pages et les améliore également avec JavaScript?

Marcy: C'est vrai. 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 ne désactiverais pas JavaScript et je me disais: "D'accord, y a-t-il d'autres pages ici, qu'est-ce que c'est?" Et j'étais tellement heureux que Gatsby fonctionne de cette façon par défaut. Il créera des fichiers construits à partir de vos composants React, ce qui est génial.

Marcy: J'ai exploré des approches d'amélioration plus progressives depuis que c'est en JavaScript. Comme si vous vouliez 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 des bizarreries avec ça. 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 de la façon dont Gatsby déploie cela par défaut. Et donc, c'est un choix qu'ils ont fait pour créer des sites de cette façon, et nous l'évaluons toujours. Est-ce toujours le meilleur moyen? Que devons-nous faire pour donner à nos utilisateurs ce qu'ils demandent? Donc, nous faisons quelques explorations en interne, en cours juste pour nous assurer que Gatsby fait le meilleur travail possible pour créer un site Web.

Marcy: Donc, garder des tailles de bundle petites, et s'assurer que pour faire des compromis car ce que nous disons est un code performant avec prélecture. Comme, avons-nous les données pour sauvegarder cela? C'est le genre de chose en tant que défenseur des développeurs 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 qu'il puisse faire.

Drew: Vous y avez mentionné la performance, et l'accent est mis sur la performance. Il semble certainement d'après la façon dont Gatsby se présente. Est-ce une véritable caractéristique 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. Donc, quel que soit le cadre ou l'outil que vous utilisez, nous devons toujours réfléchir à ce que nous mettons dans ces packs pour les utilisateurs finaux. Mais Gatsby vise vraiment à vous donner de bons paramètres par défaut. Non seulement pour la performance, mais aussi pour l'accessibilité.

Marcy: Mais cela nécessite 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. Mais ensuite, en l'améliorant avec JavaScript. Il y a certainement des compromis là-dedans.

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

Drew: Quel type de fonctionnalités de performance que Gatsby a réellement mis en place pour accélérer votre

Marcy: Eh bien, avec la prélecture des liens, ce client a dit des trucs de routage, je dirais que c'est probablement le plus gros. Il est très facile de générer une application Web progressive. Donc, ayant des capacités hors ligne, vous pouvez trier et choisir ce que vous voulez en termes de choses hors ligne et de type PWA. Mais ils font vraiment partie de l'expérience initiale, comme la plupart des sites d'exemple de démarrage à partir desquels vous pourriez commencer ont des exemples d'utilisation d'un manifeste et une sorte 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 cela. La mise en cache, c'est vraiment la prélecture des liens. C'est ce que je dirais être le plus gros morceau.

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

Marcy: Non, il est basé sur l'interaction des utilisateurs. Donc, si l'utilisateur fait défiler le port View, il y a quelque chose de prélecture qui s'y produit. Si vous survolez des liens, cela vous permettra d'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électure 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 du commerce comme un utilisateur de clavier qui ne peut pas utiliser la souris et qui parcourt 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ù il place son Curseur de la souris. Donc, ces conversations que je trouve extrêmement fascinantes.

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

Drew: Il s'agit de pré-récupérer quelque chose que les utilisateurs obtiennent juste gratuitement dans leur site. Alors, doivent-ils faire un travail pour l'implémenter?

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 exploité la plate-forme Web de cette manière. Mais dans vos composants React, vous travaillez directement avec le composant de liaison Gatsby. Et cela a tous ces mécanismes pour… Il regarde quel que soit votre futur HREF, pour ce lien d'où vous voulez aller et il ira chercher des ressources à partir de ce lien et les précharger.

Marcy: Et il est uniquement interne à votre site. Donc, ça ne va pas et essayer de récupérer des choses sur d'autres sites Web. Mais cela semble plutôt bien fonctionner. Je sais que certains utilisateurs recherchent activement des moyens, comme vous devez en fait vous retirer de certaines de ces choses. Au moins le routage, sans utiliser la prélecture. Vous utilisez simplement des balises d'ancrage régulières. Et puis, vous n'obtenez pas vraiment cette fonctionnalité. Il 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 le faire 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 ce serait bien, je ne me battrais pas contre Gatsby pour faire ce genre de chose?

Marcy: Non, vous pouvez insérer tous les composants que vous voulez, tant qu'ils fonctionnent avec le runtime React. C’est vraiment sa beauté. Tout ce que vous pourriez mettre dans une application React, vous pourriez 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 retirer quoi que ce soit, des composants que vous souhaitez utiliser ou écrire les vôtres.

Marcy: Et je pense que la flexibilité est ce que les gens apprécient vraiment. Il y a la mise en garde de celui-ci utilise le runtime React. Et donc, vous devez être d'accord avec l'utilisation de react ou en utilisant ce plugin pré-React. Mais personnellement, j'aime vraiment React 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. Je l'aime vraiment.

Drew: Et comment est 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? [19659009] Marcy: Oui. Il y a 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 ensuite l'exécuter à partir de n'importe quel répertoire de votre ordinateur, mais cela réduira tout ce dont vous avez besoin pour créer un site Gatsby. Et puis vous pouvez ajouter, disons que vous vouliez utiliser WordPress comme un CMS sans tête ou une autre source de contenu.

Marcy: Vous pouvez installer des packages, des plugins pour que cela fonctionne, puis l'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 rapidement un site pour une intégration spécifique comme Drupal ou prismique ou n'importe quelle solution de CMS ou de commerce électronique ou quelque chose que je veux utiliser.

Marcy: Il y a beaucoup d'exemples . Donc, vous ne bricolez pas toujours avec des essais et des erreurs en essayant de le 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 donc, vous pouvez utiliser ces meilleures intégrations pour créer un site au lieu, si j'avais un site WordPress classique, l'expérience de création et le travail avec des équipes sont vraiment excellents.

Marcy: Mais il y avait des lacunes dans l'avant, comme la façon dont cela fonctionnerait sur un appareil mobile. Quoi d'autre? Si je voulais une solution de commerce électronique? Je pense qu'il y a des choses qui sont plus faciles à faire de nos jours, mais être capable de choisir le type de meilleures solutions que vous souhaitez pour l'authentification, ou quoi que ce soit de moderne, vous vous dites: «J'aimerais pouvoir l'utiliser. " Avec Gatsby, vous pouvez rassembler un grand nombre de ces éléments et créer un maillage de contenu assez rafraîchissant.

Marcy: Surtout quand vous pouvez toujours utiliser ces intégrations comme WordPress et continuer à travailler avec des équipes. Donc, nous sommes très enthousiasmés par 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 grandes fonctionnalités de Gatsby est fortement cette 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 qu'avez-vous. Traditionnellement, si j'utilisais quelque chose comme Jekyll ou Eleventy, ou quelque chose comme ça, je devrais le câbler moi-même pour interagir avec les API, peut-être retirer le contenu et l'écrire dans des fichiers de démarques ou des fichiers JSON, puis faire fonctionner le générateur

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

Marcy: Je pense que ce qui rend Gatsby vraiment fort dans ce domaine est son GraphQL couche de données et l'écosystème des plugins. Il est donc probable que quelqu'un ait déjà écrit un plugin 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 retirer et nous essayons de faciliter aussi l'écriture de plugins. Il a donc été vraiment intéressant d'apprendre à écrire un plugin, et l'AST ou l'arbre de syntaxe abstraite qu'il crée et le type d'apprentissage sur la façon dont tout cela fonctionne a été vraiment cool. Mais oui, je dirais qu'il y a beaucoup de choses sur le marché que vous pourriez ramasser sans avoir à tout écrire vous-même, ce qui est plutôt génial.

Marcy: Et c'est agréable d'avoir la flexibilité pour tirer en démarque. Supposons que vos développeurs souhaitent écrire la réduction de contenu de leur blog, mais l'équipe marketing n'est vraiment pas satisfaite de cela, vous pouvez combiner des sources de contenu et les source à partir de plusieurs endroits. J'ai vu des gens s'approvisionner à partir d'autres dépôts GitHub, et ils utilisent un plugin get pour extraire le contenu de démarque de cette façon.

Drew: Et je suppose que vous avez alors la possibilité d'écrire vos propres plugins pour tirer d'une source de données personnalisée. Supposons que vous ayez un système hérité et que vous souhaitiez mettre en avant un nouveau site Web agréable et brillant. Vous pouvez écrire un plugin qui extraire les données dans le format nécessaire et les traduire en quelque chose qui devient plus gros que le travail 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ées. Et vous pouvez distribuer ces thèmes sur NPM.

Marcy: Et puis, leur version et vous pouvez les extraire. Et cette API entière est vraiment intéressante aussi pour les équipes qui disent que vous avez plusieurs dépôts, et que vous voulez tirer des données dans ceux-ci, il serait très répétitif d'avoir les mêmes requêtes dans tous ces repos dans le même code. Donc, pour sécher un peu les choses et ne pas vous répéter autant. Vous pouvez utiliser ces abstractions appelées thèmes, pour trier en quelque sorte la distribution autour de cette logique ou code qui activerait ce plugin source. Donc, il y a ce genre de couches d'abstractions que vous pouvez construire en plus que nous avons entendu dire que les équipes en retirent beaucoup en ce moment.

Drew: Donc, un thème dans le monde de Gatsby n'est pas pas un look and feel comme ce serait avec des CMS comme WordPress.

Marcy: Oui, je veux dire, c'est possible, mais ce n'est pas tout. Donc, nommer les choses est très difficile. Mais les thèmes que j'ai vraiment apprécié d'apprendre sur la flexibilité et la possibilité de le faire, oui, vous pouvez inclure du code d'interface utilisateur. Mais il pourrait également y avoir du code de langage de requête. Mais le fait qu'il soit en quelque sorte regroupé, le rend facile à distribuer. Ouais, ça a été une abstraction vraiment soignée que c'était cool de voir ce que les gens construisent et quels thèmes ils expédient, et tout ça.

Drew: Ouais, je peux imaginer que cela mènerait à quelque chose d'assez innovant utilisations 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 particulièrement créatif?

Marcy: Ouais. Eh bien, en termes de thèmes, je veux dire, l'un des premiers que j'ai lu à propos d'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écuple vraiment votre sourcing et votre contenu, ce qui permet aux équipes de tirer un thème à utiliser sur plusieurs référentiels.

Marcy: Je dirais que c'est le plus intéressant pour moi juste à cause de ce que je peux imaginer comme permettant, les anciennes équipes sur lesquelles nous devions trouver du contenu, nous étions tellement limitées et où ce code pouvait vivre et à quel point il pouvait être reproductible. Et donc, voir une solution maintenant où les équipes sont comme, "Oh, cela fonctionne très bien." Et c'était même l'été dernier, ou comme c'était une étude de cas il y a quelque temps.

Marcy: Donc 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éploieront de grandes améliorations au cours des 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 de blog comme les thèmes de base que nous proposons de Gatsby.

Marcy: Je sais qu'ils l'utilisent en interne pour créer une de nos propres annonces de produits, ou des améliorations de produits qui être annoncé ici dans les prochaines semaines. Donc, beaucoup de trucs sympas se passent avec des thèmes Gatsby, et des gens qui vendent leurs propres thèmes et entrées. Je pense que c'est aussi très intéressant.

Drew: Il y a un peu de marché qui surgit autour de Gatsby.

Marcy: Il y en a, oui.

Drew: Y a-t-il un sorte de formation en ligne et ce genre de choses si quelqu'un veut… Si quelqu'un décide qu'il va vraiment entrer à Gatsby et qu'il doit l'apprendre rapidement? Y a-t-il des endroits où ils peuvent aller avec ce genre d'information est disponible?

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 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 que vérifiez les dates si vous trouvez quelque chose. Nous mettons toujours à jour activement les Gatsby Doc, certaines des vidéos tierces plus anciennes et d'autres 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 notre propre personnel.

Marcy: Parce qu'il y en a tellement avec le nombre d'options d'approvisionnement de contenu et de cas d'utilisation. C’est un espace très large. 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 aux premiers stades, venez-vous d'autres technologies et vous avez juste besoin d'en savoir plus sur ce qu'est cette chose React.

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

Marcy: Et parce que beaucoup de matériaux avec Gatsby, il utilise React. Donc, c'est un très gros saut pour commencer avec ça. Donc, je voulais vraiment revenir en arrière et prendre les mesures pour aller jusqu'au bout de la construction avec React et Gatsby. C'était donc vraiment bien. Et je suis ravi de continuer sur cette voie, afin qu'il y ait plus de matériel pour les débutants et plus de choses pour aider les gens à comprendre comment construire un site avec Gatsby car beaucoup de ces compétences sont transférables à d'autres frameworks.

Drew: L'une des grandes questions qui se posera à toute personne qui envisage de créer une sorte de sites de projet client à l'aide de Gatsby, l'une des grandes questions qui va se poser est de gérer le contenu et de mettre des choses devant 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 est-ce que Gatsby a quelque chose dans son écosystème qui permettrait aux gens d'éditer du contenu de quelque façon que ce soit?

Marcy: Oui, je dirais qu'avoir un CMS ou quelque chose peut améliorer les relations d'équipe. J'ai été dans ces cas d'utilisation où les équipes de développement aiment: "Apprenez simplement le HTML". Et vous voyez cette glaçure de la part du client du genre: "Non, je ne peux pas croire que vous venez de dire cela." 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: Comme si vous ne pouviez tout simplement pas gérer le marketing GitHub, et que cela pouvait fonctionner parfois, mais pas tout le temps. Et donc, avoir une infrastructure de prévisualisation et de construction améliore cela, et c'est là que l'espace produit du cloud Gatsby entre en jeu. 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 payant.

Marcy: Mais nous avons cela, comme l'open source et l'écosystème de produits se réunissent pour que Gatsby peut, 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é évolue avec cela. C'est donc à ce niveau 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 builds rapidement et déployer. Et donc, il y a des solutions du côté cloud de Gatsby en particulier, et puis partout où il existe un moyen open source pour 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 à ces besoins d'équipe.

Marcy: Oui, je dirais que vous avez besoin d'un moyen de prévisualiser vos modifications CMS parce que c'est comme cette gratification instantanée. Vous ne voulez pas attendre une heure pour qu'une version affiche du contenu.

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

Marcy: Oui, oui. Et donc, cela fait partie du compromis du découplage, votre CMS sans tête, qui peut avoir eu, comme WordPress, vous pouvez 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 est logique. Mais vous, en tant que membre de l'équipe, vous devez être capable de faire votre travail à la vitesse à laquelle vous êtes rapidement habitué.

Marcy: Et donc, c'est là que Gatsby prévisualise, les builds Gatsby entrent en jeu pour redonner ce front-end aux équipes afin qu'elles puissent collaborer, prendre des décisions, faire livrer quelque chose. Cela a donc vu le jour au cours de la dernière année, obtenant de plus en plus de fonctionnalités et d'améliorations en tout temps et que certaines équipes ont vraiment commencé à voir augmenter la vitesse.

Marcy: Et comme nous le découvrons comme, "D'accord, si cette construction va lentement, pourquoi?" C'est généralement parce que le site est vraiment très gros. Nous nous sommes donc beaucoup concentrés sur les améliorations pour les grands sites et sur l'amélioration de ces flux de travail collaboratifs en équipe. C'est une grande priorité de l'équipe en ce moment.

Drew: Donc, le cloud Gatsby est, je suppose, au cœur de son 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 CDN réel. Il s'intègre aux CDN comme Fastly, Netlify. Il existe de nombreux fournisseurs différents que vous pouvez connecter et certains gratuitement. Vous pouvez faire beaucoup de choses gratuitement, ce qui est assez génial. Je viens de le faire l'autre jour lors de notre dernière session de création de sites Web Gatsby, nous utilisons Gatsby cloud et Netlify pour créer notre site.

Marcy: Et cela vous permet de rendre les sites Gatsby plus rapides spécifiquement, car il en a améliorations. Il n'a qu'à créer 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 faire parce qu'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 qui veulent le faire aussi vite que possible. 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, le cloud Gatsby ferait votre build, et ce serait alors juste déployez-le sur quelque chose comme Netlify ou vraisemblablement sur toute une gamme d'endroits différents.

Marcy: Oui. Oui, ça le sera. Et donc, c'est le morceau de Netlify qu'il utiliserait alors lors du téléchargement de ces packages construits. Fichiers créés. 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 y a toujours cette étape de téléchargement pour le sortir 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 ratée. Et donc, c'est une chose nécessaire à ajouter, c'est de pouvoir faire ces aperçus collaboratifs et obtenir des approbations et tout cela.

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

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

Marcy: Vous pouvez utiliser d'autres solutions avec lui si tu veux. Et donc, nous avons besoin de suffisamment d’affaires pour soutenir, comme les personnes qui y travaillent. And so, I’m kind of in between, like I float in between the open source and commercial side and trying to make sure that we’re prioritizing things. I mean, as you could imagine, we’re juggling a lot of things with how broad the spaces like, we all have our niche use cases that we like, feel really strongly about, we need to do for our jobs.

Marcy: That adds up to be a lot of niche use cases. So, we try to juggle and prioritize and really listen to our community about what hurts right now, what’s painful, what’s going well. And so, that’s been an interesting journey to get for me personally to get back into devREL and really be listening to the community about, how can we make us be even better?

Drew: And is there a big community around Gatsby lots and lots of people using it?

Marcy: There are a lot of people using it, a lot of contributors. So for a lot of folks, it might be their first time contributing to open source like coming over to our docks and joining us for Hacktoberfest and things like that. And so, it has been really neat to see what a big community Gatsby does have, especially with things like accessibility and trying to make sure that frameworks do all they can out of the box for free.

Marcy: And so, there’s this, I don’t know, subset or intersection of accessibility and Gatsby and that’s my happy place. But the broader community, a lot of people learn React or learn web development through Gatsby. And so, that’s really neat to see a progression through our community, and hopefully we get people to come contribute, even if it’s an issue or something of like, “Hey, this link was broken or this part of the docks was confusing to me or it’s outdated.”

Marcy: Like even just telling a framework or a project that you use, that something could be better is a great way to contribute, because you can help us gain insight into the things that could use improvement. So that’s a great way to contribute.

Drew: You mentioned accessibility and of course, people will know you as being an accessibility expert. 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.

(il)