Catégories
Astuces et Design

Qu'est-ce que Gatsby? – Smashing Magazine

Nous parlons de Gatsby. Qu'est-ce que c'est et comment s'intègre-t-il dans votre pile de développement Web? Drew McLellan s'entretient avec l'expert Marcy Sutton pour le découvrir.

Photo de Marcy SuttonAujourd'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? Drew McLellan s'entretient avec l'expert Marcy Sutton pour le découvrir.

Afficher les notes

Mise à jour hebdomadaire

Transcription

Drew McLellan: Elle est l'ingénieur principal de l'équipe des relations avec les développeurs de 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é à sa plate-forme Web un prix pour un travail sur l'accessibilité.

A dessiné: 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.

A dessiné: Bonjour. Marcy. Comment allez-vous?

Marcy: Je fracasse. Comment allez-vous?

A dessiné: Je suis très bon. 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 chez Smashing.

A dessiné: 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. Et j'ai travaillé sur le côté apprentissage avec la documentation et maintenant sur l'équipe Devrel, je me concentre sur le rendre aussi bon que possible, connaissant les défis d'accessibilité avec JavaScript et juste essayer de le réparer de l'intérieur.

A dessiné: Beaucoup d'entre nous connaissent, je suppose, le concept de 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 le plus gros élément 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 doit 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 où, lorsque vous utilisez des liens dans votre site Gatsby, il récupérera les ressources de cette page, donc il se chargera plus rapidement. Donc, tout est activé avec cette couche JavaScript que Gatsby vous offre. Et donc au-delà de cela, cela dépend vraiment du type 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 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 add-on dans un fichier séparé.

A dessiné: Quand je pense au fonctionnement d'un générateur de site statique, je pense au contenu des fichiers Markdown, peut-être. 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: Ça l'est, 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 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 car elles sont 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 chose 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 des 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 pour ce que nous disons, c'est du code performant avec la 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.

A dessiné: Vous avez mentionné les performances là-bas, et l'accent est mis sur les performances. 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 les performances, 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à-bas.

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

A dessiné: Quels types de performances Gatsby a-t-il mis en place pour accélérer vos sites?

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 que 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.

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

Marcy: Non, c'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 des compromis à faire, 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 quant à l'endroit où ils ont mis le curseur de leur souris. Donc, ces conversations que je trouve extrêmement fascinantes.

Marcy: Et essayer 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? Existe-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.

A dessiné: Il s'agit de récupérer préalablement quelque chose que les utilisateurs obtiennent gratuitement sur leur site. Alors, doivent-ils faire un 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 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 c'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.

A dessiné: 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 les composants de votre choix, à condition 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 de l'étagère 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. J'aime vraiment ça.

A dessiné: 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 que vous feriez une construction comme vous le feriez avec n'importe quel autre générateur de site statique?

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 CMS sans tête ou 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 plein 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 de, si j'avais un site WordPress classique, l'expérience de création et de travail avec des équipes est vraiment géniale.

Marcy: Mais il y avait des lacunes à 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 très rafraîchissant.

Marcy: Surtout quand vous pouvez toujours utiliser ces intégrations comme WordPress et continuer à travailler avec des équipes. Nous sommes donc 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.

A dessiné: L'une des grandes caractéristiques que Gatsby a fortement vanté 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 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 avec ces fichiers.

A dessiné: 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, c'est sa couche de données GraphQL 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 également de faciliter 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, il y a beaucoup de choses sur le marché que vous pourriez ramasser sans avoir à tout écrire vous-même, ce qui est assez génial.

Marcy: Et c'est agréable d'avoir la possibilité de faire des démarques. 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. Beaucoup de flexibilité.

A dessiné: 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 pourriez écrire un plugin qui permettrait de sortir les données dans le format nécessaire et de les traduire en quelque chose de plus gros que de travailler avec?

Marcy: Tu pourrais 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 toute cette API est vraiment intéressante aussi pour les équipes qui disent que vous avez plusieurs référentiels, et que vous voulez y insérer des données, il serait très répétitif d'avoir les mêmes requêtes en tout de 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 dont nous avons entendu dire que les équipes tirent vraiment beaucoup de profit en ce moment.

A dessiné: Donc, un thème dans le monde de Gatsby n'est pas un look and feel comme il le serait avec des 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 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. Oui, c'était une abstraction vraiment soignée que c'était cool de voir ce que les gens construisent et quels thèmes ils envoient, et tout ça.

A dessiné: Oui, je peux imaginer que cela conduirait à des utilisations assez innovantes de Gatsby. Avez-vous vu quelque chose qui s'est passé, 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 dissocie 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 simplement en raison de ce que je peux imaginer comme permettant, par le passé, des équipes sur lesquelles nous devions trouver du contenu, nous étions tellement limités et où ce code pouvait vivre et à quel point il pouvait être reproduit. être. 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: Depuis lors, les API se sont améliorées et toute une équipe travaille sur les thèmes 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 principaux que nous proposons de Gatsby.

Marcy: Je sais qu'ils l'utilisent en interne pour créer certaines de nos propres annonces de produits, ou des améliorations de produits qui seront annoncées ici au cours des deux 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.

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

Marcy: Oui, oui.

A dessiné: Y a-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 entrer à Gatsby et qu'il doit l'apprendre rapidement? Existe-t-il des lieux de course où ils peuvent aller avec ce type d'informations?

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 de 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 a tellement de choses avec le nombre d'options de sourcing 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'apprendre à quoi ressemble cette chose React.

Marcy: Vous pouvez trier et choisir les matériaux qui vous conviennent en fonction de votre situation actuelle. 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 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 créer un site avec Gatsby, car beaucoup de ces compétences sont transférables à d'autres cadres.

A dessiné: L'une des grandes questions qui va se poser pour quiconque envisage de créer une sorte de sites de projets clients à 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 Gatsby a-t-il quelque chose dans son écosystème qui permettrait aux gens d'éditer du contenu de quelque manière que ce soit?

Marcy: Ouais, je dirais qu'avoir un CMS ou quelque chose peut rendre ces relations d'équipe beaucoup plus efficaces. 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 de temps en temps 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 cloud payant et le cloud Gatsby a un niveau gratuit pour les projets personnels, donc tout n'est pas payé.

Marcy: Mais nous avons cela, comme l'open source et l'écosystème de produits se réunissent 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é évolue avec cela. C'est donc 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 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 aux besoins de l'équipe.

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

A dessiné: 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. Est-ce correct?

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 toujours être en mesure de faire votre travail à la vitesse à laquelle vous êtes rapidement habitué.

Marcy: Et c'est donc là que Gatsby prévisualise, les versions de Gatsby interviennent pour redonner ce front-end aux équipes afin qu'elles puissent collaborer, prendre des décisions, faire livrer quelque chose. Donc, cela a surgi l'année dernière, obtenant toujours plus de fonctionnalités et d'améliorations et que certaines équipes commencent vraiment à voir une augmentation de la vitesse.

Marcy: Et comme nous pensons: "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.

A dessiné: Donc, le cloud Gatsby est, je suppose, en son cœur 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?

Marcy: Je dirais que c'est plutôt un produit à 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 a ces améliorations. Il n'a qu'à créer un seul type de site. Il y a donc 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 plateformes.

A dessiné: Ainsi, le cloud Gatsby ferait votre build, et il le déploierait alors simplement sur quelque chose comme Netlify ou vraisemblablement 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 faire sortir sur un CDN, celui que vous avez choisi.

Marcy: Mais oui, il semble que les équipes aiment vraiment cette capacité de 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.

A dessiné: Donc, le cloud Gatsby est fourni en tant que service par la société Gatsby, et il y a aussi le projet open source Gatsby. 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 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 l'objectif global est de maintenir Gatsby durable, afin qu'il puisse continuer à être un projet open source que les gens peuvent utiliser sans jamais même entrer dans le cloud Gatsby.

Marcy: Vous pouvez utiliser d'autres solutions si vous le souhaitez. Et donc, nous avons besoin de suffisamment d’affaires pour soutenir, comme les personnes qui y travaillent. Et donc, je suis en quelque sorte entre les deux, comme si je flottais entre l'open source et le côté commercial et essayais de nous assurer que nous priorisions les choses. Je veux dire, comme vous pouvez l'imaginer, nous jonglons avec la largeur des espaces, nous avons tous nos cas d'utilisation de niche que nous aimons, qui nous tiennent vraiment à cœur, que nous devons faire pour notre travail.

Marcy: Cela représente beaucoup de cas d'utilisation de niche. Donc, nous essayons de jongler avec les priorités et d'écouter vraiment notre communauté sur ce qui fait mal en ce moment, ce qui est douloureux, ce qui se passe bien. Et donc, ça a été un voyage intéressant pour moi de me remettre personnellement dans devREL et d'écouter vraiment la communauté, comment pouvons-nous nous rendre encore meilleurs?

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

Marcy: Il y a beaucoup de gens qui l'utilisent, beaucoup de contributeurs. Donc, pour beaucoup de gens, ce pourrait être leur première fois à contribuer à l'open source comme venir sur nos quais et nous rejoindre pour le Hacktoberfest et des choses comme ça. Et donc, il a été vraiment intéressant de voir ce qu'une grande communauté a Gatsby, en particulier avec des choses comme l'accessibilité et en essayant de s'assurer que les frameworks font tout ce qu'ils peuvent hors de la boîte gratuitement.

Marcy: Et donc, il y a ceci, je ne sais pas, sous-ensemble ou intersection de l'accessibilité et de Gatsby et c'est mon endroit heureux. Mais 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 à travers notre communauté, et j'espère que nous amènerons des 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é ou c'est dépassé. "

Marcy: Comme même dire simplement un cadre ou un projet que vous utilisez, que quelque chose pourrait être mieux est un excellent moyen de contribuer, car vous pouvez nous aider à mieux comprendre les choses qui pourraient être améliorées. C’est donc un excellent moyen de contribuer.

A dessiné: Vous avez mentionné l'accessibilité et bien sûr, les gens vous connaîtront comme étant un expert en accessibilité. Et ils pourraient être surpris de vous voir travailler avec une sorte de framework frontal complet comme React, pensant que peut-être les deux ne vont pas vraiment ensemble. Est-ce toujours le cas chez les frontaux JavaScript qui valent moins accessibles?

Marcy: Eh bien, je souhaite que ce ne soit pas le cas. Mais je pense que les données ont montré que de nombreux sites Web qui utilisent des cadres frontaux sont moins accessibles que ceux qui n'en utilisent pas. Un projet qui me vient à l'esprit est le Web a Million. Et en fait, j'ai un article de blog, je rafraîchis le site Gatsby pour voir si mon article de blog a encore été lancé. Mais Webbing à travers le Web un million de ce projet, ils ont utilisé leur outil Wave automatisé pour explorer les 1 million de pages d'accueil et les évaluer pour certaines violations d'accessibilité.

Marcy: Et ce fut des résultats vraiment déprimants. Comme ils l'ont fait deux fois maintenant, je pense, et je pense que ça a empiré. Donc, ce n'est pas génial, mais je ne pense pas que vous puissiez vraiment pointer vers un seul framework, car il y a beaucoup de sites qui n'utilisent pas de frameworks qui ont beaucoup de problèmes d'accessibilité. Donc, c'est une sorte de problème industriel plus large, vraiment une société.

Marcy: Et donc, pour moi, travaillant sur un cadre Web complet, j'ai vu comme une opportunité d'essayer de sensibiliser davantage à l'accessibilité dans le courant dominant. Et donc, c'était une décision intentionnelle de ma part d'aller essayer d'avoir un impact sur beaucoup de sites comme travailler sur un seul site est cool. Vous pouvez résoudre des problèmes vraiment intéressants. Pour moi, je voulais plaider l'accessibilité de manière beaucoup plus large et essayer de rendre les cadres les meilleurs possible de l'intérieur.

Marcy: Donc, même si quelque chose est difficile en ce moment, essayer de jouer à ce long jeu du genre: «D'accord, de quelles normes Web pouvons-nous parler? Quelles améliorations du cadre pouvons-nous faire pour que si c'est un peu difficile, comme ne pas simplement y renoncer. » Donc, même si je sais que c'est… je ne sais pas, JavaScript est un ennemi, j'ai l'impression que j'aime ça. Vous avez besoin de JavaScript pour rendre les interfaces utilisateur accessibles, vous n'avez qu'à le faire.

Marcy: Donc, j'essaie d'aimer chevaucher ces points de vue et de faire la bonne chose tout en écoutant mes collègues activistes et amis un peu comme nous faire avancer en tant qu'industrie. Et puis à l'intérieur, je peux être le messager et la personne qui pourrait essayer de concilier certains de ces énormes compromis et questions éthiques sur ce que nous construisons?

Marcy: C'est donc difficile, mais j'aime beaucoup, car j'ai un impact à faire sur le Web. Et donc, le framework web. Beaucoup de gens construisent des sites Gatsby. Cela semble donc être un bon endroit pour essayer d'avoir un impact.

A dessiné: Vous avez mentionné brièvement que Gatsby utilise actuellement React. Existe-t-il un avenir possible où Gatsby pourrait fonctionner avec d'autres frameworks, recevoir une version vue de Gatsby?

Marcy: J'aimerais que. J'en ai certainement parlé. Il y a un plugin pré-réactif, comme je l'ai mentionné plus tôt. Vous pouvez donc échanger cela. Je pense qu'une grande partie de ce dont nous parlons est la durabilité des projets, essayer de faire le bon choix, ce ne sont pas des choix faciles à faire. Ce n’est pas comme arracher et recommencer. Il y a beaucoup de préoccupations qui vont avec. Cela va en profondeur.

Marcy: C'est donc quelque chose dont nous parlons activement. Et je n'ai vraiment rien de spécifique à partager pour le moment. Mais nous avons bientôt des réunions internes pour parler de ce genre de choses. Donc, cela est en cours de discussion, et j'aimerais avoir un aperçu de la vue, ce serait incroyable. Mais comme vous pouvez l'imaginer, il y a des défis intéressants qui viennent avec cela, et nous voulons nous assurer que c'est la bonne décision afin que nous ne soyons pas comme, je ne sais pas, emprunter un chemin et ne pas le faire fonctionner pour quoi que ce soit raison, alors nous maintenons deux cadres, comme comment pouvons-nous rendre cela réellement réaliste en termes de ce que nous pouvons maintenir et faire réussir pour une communauté open source?

A dessiné: J'ai donc tout appris sur Gatsby. Qu'avez-vous appris récemment sur Marcy?

Marcy: Eh bien, j'aurais aimé que ce soit mieux mais l'équilibre vie professionnelle / vie J'ai appris, pour moi, malheureusement, je suis comme un cycle d'épuisement professionnel. Et donc, j’ai l’impression d’apprendre continuellement la leçon sur la façon d’être productif, surtout cette année en 2020. Il y a une chose après une autre. Donc, en essayant de me concentrer vraiment sur où je veux aller dans ma carrière, qu'est-ce qui me rend heureux?

Marcy: Comment puis-je soutenir, et nous parlons de durabilité. Par exemple, comment puis-je maintenir ma propre vie après une carrière où j'ai vraiment poussé dur sur l'accessibilité en particulier, comme: «D'accord, comment puis-je prendre un peu de recul et m'assurer que ce que je mets là-bas, ce que je fais est significatif, vaut l'énergie. " Vous voyez, beaucoup de mes leçons ont été en quelque sorte cette intersection du travail et de la vie et d'essayer de tirer le meilleur parti du temps qui a été … Je ne sais pas pour vous, mais cela a été assez stressant pour beaucoup de gens, y compris moi.

A dessiné: Ça a été très, très stressant. Nous traversons des moments très difficiles, n'est-ce pas?

Marcy: Yeah Yeah. Je veux dire, nous avons tellement de raisons d'être reconnaissants dans cette industrie, d'avoir des opportunités et des compétences que vous pouvez appliquer. Voir beaucoup de licenciements dans notre industrie, vraiment essayer de prendre des décisions qui reflètent où nous en sommes et pas seulement passer par les motions. C'était donc un grand facteur de motivation pour les créateurs de sites Web de Gatsby: «Wow, il y a beaucoup d'enfants d'âge scolaire qui ne sont pas à l'école cette année, ce serait vraiment cool de voir le résultat de tourner les yeux de certains enfants vers le développement Web.»

Marcy: Comme quand j'étais en septième année, et quelqu'un est venu dans une de mes classes pour parler de photojournalisme. J'étais comme, "je veux être un photojournaliste." Cela a donc fonctionné. J'ai reçu des commentaires de quelqu'un qui a dit: "Mon élève de septième année apprend de vous, et maintenant il est vraiment enthousiasmé par le code." Donc, c'était vraiment une bonne chose d'y consacrer de l'énergie, à une époque où, ce n'était pas quelque chose auquel j'aurais nécessairement pensé avant d'être dans ces circonstances en 2020.

Marcy: Donc, vraiment essayer d'être comme agile et de faire des choix qui reflètent ce que je veux aller et ce qui se passe.

A dessiné: Si vous, l'auditeur, souhaitez en savoir plus sur Marcy, vous pouvez la trouver sur Twitter où elle est @marcysutton et retrouver toutes ses dernières actualités sur son site Web personnel, marcysutton.com. Et bien sûr, vous pouvez découvrir comment démarrer avec Gatsby sur Gatsbyjs.org. Merci de vous joindre à nous aujourd'hui Marcy, avez-vous des mots d'adieu?

Marcy: Profitez-en où que ce soit.

Smashing Editorial(il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *