Smashing Podcast Episódio 20 Com Marcy Sutton: O que é Gatsby?

Hoje vamos falar de Gatsby. O que é e como ele se encaixa na sua pilha de desenvolvimento web? Drew McLellan fala com a especialista Marcy Sutton para descobrir.

Mostrar notas

• Gatsby
• Márcia no Twitter
• Site pessoal de Marcy

Atualização semanal

• “Torne seus sites rápidos, acessíveis e seguros com a ajuda do Google”
  por Dion Almaer
• “Compreendendo o desenvolvimento de plugins no Gatsby”
  por Aleem Isiaka
• “Criando aplicativos de desktop minúsculos com Tauri e Vue.js”
  por Kelvin Omereshone
• “Removendo o pânico dos alertas de envio e estoque de comércio eletrônico”
  por Suzanne Scacca
• “Transições CSS em Vuejs e Nuxtjs”
  por Timi Omoyeni

Transcrição

Drew McLellan: Ela é a engenheira líder da equipe de Relações com Desenvolvedores da Gatsby. Anteriormente, ela trabalhou na biblioteca de testes de acessibilidade axe-core de código aberto e também trabalhou como engenheira de acessibilidade na Adobe. Ela é apaixonada por melhorar a web para pessoas com deficiência e frequentemente fala sobre isso em conferências. Em 2016, O'Reilly deu seu prêmio de plataforma web por um trabalho em acessibilidade.

Drew: Ela também co-lidera os Meetups de Acessibilidade em Seattle e NW Tech Women em uma região local. Então, sabemos que ela é uma engenheira qualificada e especialista em acessibilidade. Mas você sabia que ela quer enviar Angel Falls em um barril? Meus amigos esmagadores, por favor, dêem as boas-vindas a Marcy Sutton.

Marcy Sutton: Olá.

Drew: Olá. Márcia. Como você está?

Marcy: Estou arrasando. Como você está?

Drew: Estou muito bem. Obrigada. Eu queria falar com você hoje sobre Gatsby. Porque surgiu em uma conversa que eu estava tendo em um episódio anterior sobre aprender React com Mina Markham. Percebi que corria o risco de fazer o típico homem da internet de dar uma opinião sobre algo que eu não tinha experiência direta. Então não é assim que fazemos as coisas no Smashing.

Drew: E eu quero ter certeza de que cobrimos Gatsby adequadamente. E que melhor maneira de fazer isso do que falar com alguém que sabe por dentro e por fora. Então, presumindo que talvez eu tenha ouvido o nome Gatsby. Mas não tenho ideia de onde ele se encaixa na pilha ao criar um site. O que exatamente é Gatsby.

Marcy: Gatsby é um gerador de sites, atualmente usa React. Mas ele criará um site estático para você que será reidratado em um aplicativo Web React completo. Assim, você realmente obtém o melhor dos dois mundos com compilações rápidas que compilam arquivos HTML que serão carregados rapidamente para os usuários. E então você obtém todo esse aprimoramento com JavaScript para criar aplicativos da Web dinâmicos realmente interativos.

Marcy: Então, é um espaço realmente empolgante para se estar. E tenho trabalhado no lado do aprendizado com documentação e agora na equipe Devrel, estou focado em torná-lo o melhor possível, conhecendo os desafios de acessibilidade com JavaScript e apenas tentando consertá-lo de dentro para fora.

Drew: Muitos de nós estarão familiarizados, eu acho, com o conceito de um gerador de site estático. E Gatsby parece se encaixar amplamente nesse papel. Mas para mim, parece que vai muito mais longe do que a maioria dos SSG's. E a maioria dos geradores de sites são independentes de código de front-end. Parece que com o Gatsby, você acaba com o código Gatsby rodando como parte do seu site. É uma avaliação justa? E se sim, que tipo de coisas Gatsby está realmente fazendo em seu front-end?

Marcy: Sim, eu diria que a maior parte disso é o roteamento do lado do cliente. Então, Gatsby agora está usando o roteador de alcance sob o capô. Ele faz uma espécie de sua própria implementação. Mas essa é a parte que quando você carrega seu site estático pela primeira vez, há arquivos HTML lá. Portanto, se o usuário desativar o JavaScript por algum motivo, seu site ainda deve estar lá, ainda ter conteúdo.

Marcy: Mas se o JavaScript estiver habilitado, é quando essa etapa de hidratação acontece onde, quando você usa links em seu site Gatsby, ele pré-busca recursos dessa página, então carrega mais rápido. Então, tudo isso está habilitado com essa camada JavaScript que Gatsby oferece a você. E, além disso, realmente depende do que você está usando em seu site que vai acabar nesse pacote JavaScript.

Marcy: Mas para coisas que usam muita interatividade, como interfaces acessíveis, é um bom lugar para se estar. Para mim, eu realmente gosto de ter JavaScript disponível para mim o tempo todo, e ter minha marcação em um bom lugar. Eu sei que é uma questão de preferência, se você quer seu HTML e seu JavaScript e seu CSS bem acoplados e há espaço para variações na construção do Gatsby

Marcy: Você nem sempre precisa usar algo como CSS e JS. Mas trata-se realmente de obter o poder dessa camada JavaScript dinâmica, disponível para você enquanto você está escrevendo seu site. Não é como este complemento em um arquivo separado.

Drew: Quando penso em como um gerador de site estático geralmente funciona, estou pensando em conteúdo em talvez arquivos Markdown. E o gerador percorre esse conteúdo e o mescla com modelos e cria 10s, centenas, milhares de arquivos HTML, que são as páginas do seu site. Quando penso em um site ou aplicativo React, estou pensando mais na experiência de página única onde as interfaces são criadas pelo React na hora. Então, você está dizendo que Gatsby faz as duas coisas? Está criando todas as páginas e também aprimorando com JavaScript?

Márcia: É, sim. Gatsby usará Node.js em tempo de compilação, ele passará por cima de seus componentes React e os compilará em arquivos HTML. O que, honestamente, na primeira vez que olhei para Gatsby, não desativei o JavaScript e fiquei tipo: “Tudo bem, há outras páginas aqui, o que é isso?” E fiquei tão feliz que Gatsby funciona dessa maneira por padrão. Ele criará arquivos construídos a partir de seus componentes react, o que é incrível.

Marcy: Eu explorei abordagens de aprimoramento mais progressivas, já que é em JavaScript. Como se você quiser produzir algo progressivamente aprimorado para os usuários, onde, se eles tiverem o JavaScript desativado, você não quer todo esse código quebrado que assume que o JavaScript está lá. Portanto, há algumas peculiaridades com ele. Mas você pode contornar esse tipo de coisa pelo menos para seus fluxos de usuários principais, onde você deseja que alguém ainda possa comprar algo, talvez seja necessário adicionar algum suporte e para esses casos de uso.

Marcy: Mas eu fiquei agradavelmente surpresa com a forma como Gatsby lança isso por padrão. E assim, é uma escolha que eles fizeram para construir sites dessa maneira, e estamos sempre avaliando isso. Ainda é o melhor caminho? O que precisamos fazer para dar aos nossos usuários o que eles estão pedindo? Então, estamos fazendo algumas explorações internamente, em andamento, apenas para garantir que Gatsby esteja fazendo o melhor trabalho possível na construção de um site.

Marcy: Portanto, mantenha os tamanhos dos pacotes pequenos e certifique-se de que, para fazer compensações, o que dizemos seja código de desempenho com pré-busca. Tipo, temos os dados para fazer backup disso? Esse é o tipo de coisa que eu estou super interessado como um defensor do desenvolvedor, é ter certeza de que o que estamos empacotando e agrupando em sites é realmente necessário e realmente fará o melhor site Gatsby que ele pode fazer.

Drew: Você mencionou desempenho lá, e há um grande foco no desempenho. Certamente parece pela forma como Gatsby se apresenta. Essa é uma característica real do Gatsby ou é apenas a natureza dos sites JAMstack?

Marcy: Eu acho que pode ser uma natureza dos sites JAMstack. Em última análise, tudo se resume ao que você está agrupando em seu site. Portanto, não importa qual estrutura ou ferramenta você esteja usando, ainda temos que pensar no que estamos colocando nesses pacotes para os usuários finais. Mas Gatsby realmente tem como objetivo fornecer bons padrões. Não apenas pelo desempenho, mas também pela acessibilidade.

Marcy: Mas isso sempre exige avaliação, sempre temos que ter certeza de que, se adicionamos algo, ainda é bom. Mas sim, obtendo essa carga inicial de arquivos estáticos, eles carregam rapidamente. Muito mais rápido que o site WordPress clássico que eu costumava ter. Mas, em seguida, aprimorando-o com JavaScript. Existem alguns trade offs lá, com certeza.

Marcy: Mas funciona muito bem, muitas pessoas gostam muito dos sites do Gatsby. Então, tem sido divertido trabalhar nele em tempo integral e aprender os prós e contras de uma estrutura JavaScript como Gatsby.

Drew: Que tipo de recursos de desempenho apenas Gatsby realmente colocou em prática para acelerar seus sites?

Marcy: Bem, com a pré-busca de links, esse cliente disse coisas de roteamento, eu diria que é provavelmente o maior. Tornando muito fácil gerar um aplicativo da web progressivo. Portanto, tendo alguns recursos offline, você pode escolher o que deseja em termos de coisas do tipo offline e PWA. Mas eles realmente fazem parte da experiência inicial, como muitos dos sites de exemplo iniciais dos quais você pode começar têm exemplos de uso de um manifesto e meio que fazem essa versão moderna do seu site.

Marcy: Realmente, é como não enviar um código que você não precisa. Essa é uma grande parte disso. Cache, isso é realmente a pré-busca de links. Isso é o que eu diria que é o maior pedaço dele.

Drew: Então é aqui que o site está realmente antecipando para onde o usuário irá. É tão inteligente assim ou pré-busca tudo na página ou?

Marcy: Não, é baseado na interação do usuário. Portanto, se o usuário rolar para baixo na porta View, há algo de pré-busca que acontece lá. Se você passar o mouse sobre os links, ele estimará que há uma boa chance de você ir para essa página. Temos conversado internamente, bem, eu acho, código aberto para saber se essa pré-busca deve acontecer no foco do teclado também, de modo que a interseção de acessibilidade e desempenho é muito interessante.

Marcy: Existem algumas desvantagens, como um usuário de teclado que não pode usar o mouse e está navegando em todos os links para navegar, se isso realmente estiver buscando conteúdo para cada um deles, porque um usuário de mouse pode ser um pouco mais seletivo sobre onde eles colocam o cursor do mouse. Então, essas conversas eu acho extremamente fascinantes.

Marcy: E tentando pensar em quais dados precisamos para validar essas suposições também. Então, sim, tem sido super interessante olhar para esses padrões e quais melhorias podemos fazer e realmente verificar quantos dados isso está buscando? Isso é realmente uma coisa boa? Só para acelerar um pouco? Ou é rápido o suficiente sem isso? Existem soluções alternativas que poderíamos usar como parte da diversão de trabalhar em uma estrutura, pois podemos avaliar todas essas compensações.

Drew: Isso é uma pré-busca de algo que os usuários obtêm gratuitamente em seu site. Então eles têm que fazer algum trabalho para implementá-lo?

Marcy: Você pode obtê-lo gratuitamente usando o link Gatsby. Então é um componente que vem com o Gatsby e quando você usa isso, ele gera tags âncora. Portanto, seu HTML é HTML real e você aproveitou a plataforma da Web dessa maneira. Mas em seus componentes React, você está trabalhando diretamente com o componente de link Gatsby. E isso tem todos esses mecanismos para... Olha para qualquer que seja o seu futuro HREF, para aquele link de onde você quer ir e ele vai pegar recursos desse link e pré-carregá-los.

Marcy: E é apenas interno ao seu site. Portanto, não está saindo e tentando buscar coisas em outros sites. Mas parece funcionar muito bem. Eu sei que alguns usuários estão procurando ativamente maneiras, como se você realmente tivesse que optar por não participar de algumas dessas coisas. Pelo menos roteamento, não usando a pré-busca. Você acabou de usar tags de âncora regulares. E então você realmente não obtém essa funcionalidade. É muito fácil usar outra coisa. Mas algumas das discussões que estamos tendo são sobre roteamento do lado do cliente e como fazer disso o melhor possível. E assim, esse é um espaço muito interessante também.

Drew: Quão próximo você precisa trabalhar dentro do ecossistema Gatsby em termos de se eu quisesse ter meu próprio componente de link? Isso seria completamente bom, eu não estaria lutando contra Gatsby para fazer esse tipo de coisa?

Marcy: Não, você pode inserir os componentes que quiser, desde que funcionem com o tempo de execução do React. Essa é realmente a beleza disso. Qualquer coisa que você pudesse colocar em um aplicativo React, você poderia colocar em um aplicativo Gatsby. Existe até um plugin pré-React. Portanto, existem algumas alternativas para trabalhar com Gatsby. Mas eu amo como você pode puxar qualquer coisa, os componentes prontos que você quer usar ou escrever seus próprios.

Marcy: E eu acho que flexibilidade é o que as pessoas realmente gostam. Há a ressalva de que ele usa o tempo de execução do React. E assim, você tem que estar bem em usar o react ou usar este plugin pré-React. Mas pessoalmente, gosto muito de react e JSX para trabalhar com acessibilidade e templates, especialmente com hooks React. Então, poder usar a cabana no meu site Gatsby é muito legal. Eu realmente gosto.

Drew: E como é o processo de construção de um site Gatsby que é presumivelmente um módulo de nó que você pode instalar e fazer uma construção como faria com qualquer outro gerador de site estático?

Márcia: Sim. Há uma CLI que você instala globalmente. E acho que é se você deseja instalá-lo globalmente. Isso é o que recomendamos, porque assim você pode executá-lo em qualquer diretório do seu computador, mas ele puxará o que você precisar para construir um site Gatsby. E então você pode adicionar, digamos que você queria usar o WordPress como um CMS headless ou alguma outra fonte de conteúdo.

Marcy: Você pode instalar pacotes, plugins para fazer isso funcionar e depois integrá-los ao seu site. Há também alguns iniciantes e temas que você pode usar para começar a trabalhar mais rapidamente. Eu os usei se quiser testar algo ou iniciar um site rapidamente para uma integração específica, como Drupal ou prismic ou qualquer solução de CMS ou comércio eletrônico ou algo que eu queira usar.

Marcy: Há muitos exemplos. Portanto, você nem sempre está mexendo com tentativa e erro tentando descobrir, mas são meio que esses blocos de construção que você pode juntar e criar... É o que chamamos de malha de conteúdo. E assim, você pode usar essas melhores integrações para criar um site em vez de, se eu tivesse um site WordPress clássico, a experiência de criação e trabalho com equipes é realmente ótima.

Marcy: Mas havia falhas no front-end, como como funcionaria em um dispositivo móvel. O quê mais? Se eu quisesse uma solução de comércio eletrônico? Acho que há algumas coisas que são mais fáceis de fazer hoje em dia, mas poder escolher qualquer tipo de melhor solução que você queira para autenticação, ou o que quer que seja essa coisa moderna, você pensa: “Eu gostaria de poder usar isso. ” Com o Gatsby, você pode reunir muitas dessas coisas e criar essa maneira de construção de malha de conteúdo que é bastante refrescante.

Marcy: Especialmente quando você ainda pode usar essas integrações como o WordPress e ainda trabalhar com equipes. Portanto, estamos muito empolgados com essa nova maneira de trabalhar, na qual você pode escolher todas as tecnologias de que gosta ou que funcionam para sua equipe.

Drew: Um dos grandes recursos que Gatsby tem apresentado fortemente é essa capacidade de extrair dados ou conteúdo de uma variedade de fontes diferentes. Você mencionou coisas como WordPress e Drupal, e o que você tem. Tradicionalmente, se eu estivesse usando algo como Jekyll ou Eleventy, ou algo assim, precisaria conectar isso sozinho para interagir com as APIs, talvez puxar o conteúdo e escrevê-lo em arquivos de marcação ou arquivos JSON e, em seguida, fazer o gerador funcionar com esses arquivos.

Drew: Então seria uma espécie de processo de duas etapas, poderia usar algo como o bit de origem, que abordamos em um episódio anterior que faz esse tipo de coisa? Eu entendo corretamente que Gatsby tem apenas essa capacidade nativa de consumir fontes diferentes de uma forma que outros geradores de sites estáticos, simplesmente não o fazem?

Marcy: Acho que o que torna o Gatsby realmente forte nessa área é sua camada de dados GraphQL e o ecossistema de plugins. Portanto, é provável que alguém já tenha escrito um plug-in para qualquer fonte de dados que você deseja construir. E se não, provavelmente há algo próximo. Mas usar o GraphQL é meio que o funcionamento dele. A camada que possibilita todas essas integrações é usando o GraphQL.

Marcy: E assim, há muitas possibilidades para o que você pode usar e nós tentamos tornar mais fácil escrever plugins também. Então tem sido muito legal aprender sobre como escrever um plugin, e o AST ou Abstract Syntax Tree que ele cria e meio que aprender sobre como tudo isso funciona tem sido muito legal. Mas sim, eu diria que há muitas coisas na prateleira que você pode pegar sem ter que escrever tudo sozinho, o que é incrível.

Marcy: E é bom ter a flexibilidade de fazer descontos. Digamos que seus desenvolvedores querem escrever o markdown do conteúdo do blog, mas a equipe de marketing não está realmente feliz com isso, você pode combinar fontes de conteúdo e obtê-las de vários lugares. Eu vi pessoas adquirindo coisas de outros repositórios do GitHub, e eles usam um plugin get para puxar o conteúdo de markdown dessa maneira. Muita flexibilidade.

Drew: E acho que você tem a opção de escrever seus próprios plugins para extrair de uma fonte de dados personalizada. Digamos que você tenha um sistema legado e queira colocar um site novo e bonito na frente dele. Você poderia escrever um plug-in que obteria os dados em qualquer formato necessário e traduzi-los em algo maior do que trabalhar?

Marcy: Pode sim. E assim, os plugins permitem isso. E depois há essa abstração em cima disso, que chamamos de temas de Gatsby. E esses não são apenas o código da interface do usuário, mas podem ser consultas GraphQL, configurações que configuram um plug-in, então é como um plug-in com o uso agrupado. E você pode distribuir esses temas no NPM.

Marcy: E então, a versão deles e você pode puxá-los. E toda essa API também é muito interessante para equipes que dizem que você tem vários repositórios e deseja inserir dados neles, seria muito repetitivo ter as mesmas consultas em todos esses repositórios no mesmo código. Então, para secar um pouco as coisas e não se repetir tanto. Você pode usar essas abstrações chamadas temas, para distribuir em torno dessa lógica ou código que habilitaria esse plug-in de origem. Então, há esse tipo de camadas de abstrações que você pode construir em cima delas, das quais ouvimos dizer que as equipes estão realmente tirando muito proveito agora.

Drew: Então, um tema no mundo Gatsby não é uma aparência que seria com CMS como o WordPress.

Marcy: Sim, quero dizer, pode, mas não é só isso. Então, nomear as coisas é muito difícil. Mas os temas que eu realmente gostei de aprender sobre apenas a flexibilidade e poder, sim, você pode incluir algum código de interface do usuário. Mas pode haver algum código de linguagem de consulta que vá lá também. Mas o fato de ser meio que agrupado facilita a distribuição. Sim, tem sido uma abstração muito legal que tem sido legal ver o que as pessoas estão construindo e quais temas estão lançando, e tudo isso.

Drew: Sim, posso imaginar que isso levaria a alguns usos bastante inovadores de Gatsby. Você já viu alguma coisa, em particular, que chamou sua atenção de que os clientes estão fazendo isso de forma particularmente criativa?

Márcia: Sim. Bem, em termos de temas, quer dizer, um dos primeiros que eu li sobre há um estudo de caso no blog do Gatsby, acho que do Apollo. E eles escreveram um site de documentação usando temas do Gatsby e que usava um plugin get source. E assim, ele realmente dissocia sua fonte e seu conteúdo, fazendo com que as equipes possam usar um tema para usar em vários repositórios.

Marcy: Eu diria que isso é o mais interessante para mim apenas por causa do que posso imaginar permitindo, equipes anteriores em que eu estava onde tínhamos que fornecer conteúdo, éramos tão limitados e onde esse código poderia viver e quão repetível Poderia ser. E assim, ver uma solução agora em que as equipes pensam: “Ah, isso funciona muito bem”. E isso foi mesmo no verão passado, ou assim foi um estudo de caso há algum tempo.

Marcy: Desde então, as APIs vêm melhorando, e há uma equipe inteira trabalhando nos temas do Gatsby. E eu sei que eles estão lançando algumas grandes melhorias nas próximas semanas. Então, eu não quero roubar o trovão deles, mas há algumas coisas legais vindo com temas. Eles estão reformulando alguns dos temas do blog, como os temas centrais que oferecemos de Gatsby.

Marcy: Eu sei que eles estão usando internamente para construir alguns dos nossos próprios anúncios de produtos, ou melhorias de produtos que serão anunciadas aqui nas próximas semanas. Então, muitas coisas legais acontecendo com temas de Gatsby, e pessoas vendendo seus próprios temas e iniciais. Eu acho isso muito interessante também.

Drew: Há um mercado surgindo em torno de Gatsby.

Marcy: Tem sim.

Drew: Existe algum tipo de treinamento online e esse tipo de coisa, se alguém quiser... Se alguém decidisse que realmente iria entrar em Gatsby e precisava aprender rápido? Existem lugares onde eles podem ir com esse tipo de informação disponível?

Marcy: Uma tonelada disso? sim. Há definitivamente o site do Gatsby Doc, que é gatsbyjs.org/doc's. E nós temos tutoriais, e eu tenho feito transmissões ao vivo quase toda semana para coisas do Gatsby. Há uma tonelada de educadores que têm material de Gatsby no YouTube e em várias plataformas de aprendizado. Egghead, acho que alguns dos meus companheiros de Gatsby também têm vídeos de egghead.

Marcy: Então, há uma tonelada de coisas por aí. Eu diria para verificar as datas se você encontrar algo. Estamos sempre atualizando ativamente os Gatsby Docs, alguns dos vídeos de terceiros mais antigos e coisas que podem, verifique as datas neles porque não podemos monitorar todos os recursos de aprendizado para atualização. É difícil acompanhar nossa própria equipe.

Marcy: Porque há tantas opções de fonte de conteúdo e casos de uso. É um espaço muito amplo. Mas há tanto material de aprendizado por aí, e uma tonelada de maneiras de começar que você pode tentar encontrar coisas como dependendo de onde você está no seu espectro de aprendizado. Você está nos estágios iniciais, você está vindo de outras tecnologias e você só precisa aprender como o que é essa coisa do React.

Marcy: Você pode escolher quais materiais funcionarão para você com base em onde você está. Eu tenho feito um curso recentemente através de transmissões ao vivo chamado Gatsby Web Creators, onde percorremos todo o caminho desde HTML, CSS e JavaScript para iniciantes até a criação do nosso primeiro site Gatsby. Acabamos de concluir isso na sexta-feira. E assim, tem sido muito legal voltar ao início.

Marcy: E porque muitos materiais com Gatsby, ele usa React. Então, é um salto muito grande para começar com isso. Então, eu realmente queria voltar e dar os passos para chegar até a construção de coisas com React e Gatsby. Então isso foi muito legal. E estou animado para continuar nesse caminho, para que haja mais material para iniciantes e mais coisas para ajudar as pessoas a entender como construir um site com Gatsby porque muitas dessas habilidades são portáveis ​​para outros frameworks.

Drew: Uma das grandes questões que surgirão para quem está pensando em construir sites de projetos de clientes usando o Gatsby, uma das grandes questões que surgirão é sobre como gerenciar conteúdo e colocar coisas na frente de um cliente. Você já mencionou como o Gatsby pode se conectar a diferentes sistemas de gerenciamento de conteúdo. Esse é o principal método que você colocaria em prática para lidar com essa questão? Ou o Gatsby tem algo em seu ecossistema que permita que as pessoas editem conteúdo de alguma forma?

Marcy: Sim, eu diria que ter um CMS ou algo assim pode fazer com que os relacionamentos da equipe funcionem muito melhor. Já estive nesses casos de uso em que as equipes de desenvolvimento dizem: “Apenas aprenda HTML”. E você vê esse esmalte do cliente tipo: “Não, não posso acreditar que você acabou de dizer isso”. Portanto, ter um sistema onde as pessoas possam fazer seu melhor trabalho da maneira que melhor lhes convier é super, super importante.

Marcy: Como você simplesmente não consegue lidar com o GitHub de marketing, e pode funcionar algumas vezes, mas não o tempo todo. E assim, ter uma infraestrutura de visualização e construção torna isso melhor, e é aí que o espaço do produto em nuvem Gatsby meio que entra na briga. Existem maneiras de fazer a visualização. Sem o lado da nuvem paga e a nuvem Gatsby tem um nível gratuito para projetos pessoais, portanto, nem tudo é pago.

Marcy: Mas temos isso, como o código aberto e o ecossistema de produtos se unindo para que Gatsby possa, como organização fundadora, ganhar dinheiro suficiente para manter a estrutura de código aberto, mantê-la saudável e manter nossa comunidade funcionando junto com isso . Então, é aí que esse lado comercial de código aberto se reúne e realmente permite alguns desses fluxos de trabalho que as equipes precisam.

Marcy: Algumas coisas como obter visualizações rápidas, obter compilações rápidas e implantadas. E assim, existem soluções especificamente no lado da nuvem do Gatsby e, sempre que houver uma maneira de código aberto de fazer o Gatsby funcionar como um servidor de visualização ou algo assim, tentamos documentar isso e garantir que nossa comunidade saiba o que é o quê e como atender às necessidades da equipe.

Marcy: Sim, eu diria que você precisa de alguma maneira de visualizar suas alterações no CMS porque é como uma gratificação instantânea. Você não quer esperar uma hora por uma compilação para ver algum conteúdo.

Drew: Então isso é interessante. O serviço de nuvem Gatsby oferece a capacidade de usar um serviço de CMS headless, onde você está apenas trabalhando com o conteúdo, mas não tem visualização de como seria em seu site, permitindo que você obtenha uma visualização de como isso trabalharia. Isso está certo?

Márcia: É, sim. E assim, é parte da troca de desacoplamento, seu CMS sem cabeça, que pode ter, como o WordPress, você poderia apenas procurar o front-end, mas estamos dando a ele um novo front-end e potencialmente atraindo outras fontes e outras coisas que o WordPress não conhece. E assim, desacoplá-lo dessa maneira faz sentido. Mas você ainda, como membro da equipe, precisa ser capaz de fazer seu trabalho na velocidade a que está acostumado.

Marcy: E então, é aí que o Gatsby preview, Gatsby builds entra para dar esse front-end de volta às equipes para que elas possam colaborar, tomar decisões, enviar algo. Então, isso surgiu no ano passado, obtendo mais recursos e melhorias o tempo todo e ouvimos algumas equipes que estão realmente começando a ver aumentos de velocidade.

Marcy: E quando descobrimos, “Ok, se essa compilação está lenta, por que isso?” Geralmente é porque o site é muito, muito grande. Portanto, nos concentramos muito em melhorias para sites grandes e realmente aprimoramos os fluxos de trabalho colaborativos da equipe. É um grande foco da equipe agora.

Drew: Então, a nuvem Gatsby é, eu acho que seu coração é um serviço de hospedagem. É um CDN para implantar seus sites Gatsby com uma carga de funcionalidades e recursos específicos do Gatsby?

Marcy: Eu o chamaria mais de um produto de entrega contínua porque não é um CDN real. Integra-se com CDNs como Fastly, Netlify. Há muitos provedores diferentes que você pode conectar e alguns deles gratuitamente. Você pode fazer muito de graça, o que é incrível. Acabei de fazer isso outro dia em nossa última sessão de criadores da web do Gatsby, usamos a nuvem do Gatsby e o Netlify para construir nosso site.

Marcy: E permite que você torne os sites Gatsby mais rápidos especificamente, porque tem essas melhorias. Ele só tem que construir um tipo de site. Então, há algumas melhorias que a nuvem Gatsby pode fazer, que nenhuma outra plataforma pode fazer porque eles estão tentando dar suporte a todos esses tipos diferentes de sites e eles os fazem muito bem.

Marcy: Mas para Gatsby, se isso é tudo que você está construindo, e há algumas agências, que estão em Gatsby, e elas querem fazer isso o mais rápido possível. Então, é aí que a nuvem do Gatsby pode fazer algumas melhorias de desempenho especificamente para o Gatsby, porque não precisa se preocupar com outras plataformas.

Drew: Então, a nuvem Gatsby faria sua compilação e, em seguida, apenas a implantaria em algo como Netlify ou presumivelmente em toda uma gama de lugares diferentes.

Márcia: Sim. Sim, vai. E então, é a parte do Netlify que ele usaria enquanto carregava esses pacotes construídos. Arquivos construídos. Ele não está usando suas compilações, então as compilações estão acontecendo na infraestrutura de nuvens Gatsby, e é aí que muitos aumentos de velocidade podem acontecer. E ainda há a etapa de upload para enviar para uma CDN, qualquer que seja a que você tenha escolhido.

Marcy: Mas sim, parece que as equipes estão adorando essa capacidade de ver. Quero dizer, é uma funcionalidade que você teria perdido. E então, isso é uma coisa necessária para adicionar novamente, é poder fazer essas visualizações colaborativas e obter aprovações e tudo isso.

Drew: Então, a nuvem Gatsby é fornecida como um serviço da empresa Gatsby, e também há o projeto de código aberto Gatsby. Este é um tipo de relacionamento semelhante ao WordPress e ao automático, onde você tem uma entidade comercial desenvolvendo um produto de código aberto?

Marcy: Eu diria que sim, como Drupal. Há precedentes na tecnologia de ter essas organizações fundadoras onde é uma espécie de ciclo virtuoso. E estamos trabalhando na publicação de alguma documentação de governança agora para garantir que fique super claro para nossa comunidade, como tomamos decisões. Mas todo o objetivo é manter o Gatsby sustentável, para que possa continuar sendo um projeto de código aberto que as pessoas possam usá-lo, mesmo entrando na nuvem do Gatsby.

Marcy: Você pode usar outras soluções com ele, se quiser. E assim, precisamos de negócios suficientes para sustentar, como as pessoas que trabalham neles. E então, eu estou meio que no meio, como eu flutuo entre o código aberto e o lado comercial e tento ter certeza de que estamos priorizando as coisas. Quero dizer, como você pode imaginar, estamos fazendo malabarismos com muitas coisas com o quão amplos são os espaços, todos nós temos nossos casos de uso de nicho que gostamos, sentimos muito, precisamos fazer para nossos trabalhos.

Marcy: Isso se soma a muitos casos de uso de nicho. Então, tentamos fazer malabarismos e priorizar e realmente ouvir nossa comunidade sobre o que dói agora, o que é doloroso, o que está indo bem. E assim, essa tem sido uma jornada interessante para mim, pessoalmente, voltar ao devREL e realmente ouvir a comunidade sobre como podemos nos tornar ainda melhores?

Drew: E há uma grande comunidade em torno de Gatsby, muitas e muitas pessoas usando-o?

Marcy: Tem muita gente usando, muitos contribuidores. Então, para muitas pessoas, pode ser a primeira vez que contribuem para o código aberto, como vir às nossas docas e se juntar a nós para o Hacktoberfest e coisas assim. E assim, foi muito legal ver o que uma grande comunidade Gatsby tem, especialmente com coisas como acessibilidade e tentando garantir que os frameworks façam tudo o que puderem gratuitamente.

Marcy: E então, há isso, eu não sei, subconjunto ou interseção de acessibilidade e Gatsby e esse é o meu lugar feliz. Mas na comunidade mais ampla, muitas pessoas aprendem React ou aprendem desenvolvimento web através do Gatsby. E então, é muito legal ver uma progressão em nossa comunidade, e esperamos que as pessoas venham contribuir, mesmo que seja um problema ou algo como “Ei, esse link foi quebrado ou esta parte das docas estava confusa para mim ou está desatualizado.”

Marcy: Como apenas dizer a uma estrutura ou projeto que você usa, que algo pode ser melhor é uma ótima maneira de contribuir, porque você pode nos ajudar a obter insights sobre as coisas que podem ser melhoradas. Então essa é uma ótima maneira de contribuir.

Drew: Você mencionou acessibilidade e, claro, as pessoas vão conhecê-lo como um especialista em acessibilidade. 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.