O que é Gatsby JS e como os desenvolvedores de comércio eletrônico o estão usando para criar lojas extremamente rápidas?

Scott Fitzgerald escreveu uma carta ao seu editor em 1922 anunciando sua intenção de começar a escrever um novo romance que ele descreveu como:



“[Algo] novo – algo extraordinário e bonito e simples e com padrões intrincados.”



Três anos depois, ele publicou “O Grande Gatsby”.

É essa bela simplicidade, em oposição à pródiga extravagância do personagem Jay Gatsby, que o framework de código aberto GatsbyJS traz à mente. Criado em maio de 2015 por Kyle Mathews, Gatsby é, em sua forma mais básica, uma maneira simples de construir um site com React.

Fitzgerald faleceu antes que "O Grande Gatsby" fosse aclamado, mas Mathews teve mais sorte. Pouco mais de meio ano após o lançamento, quando Mathews falou na conferência React em janeiro de 2016, as pessoas já o estavam usando.

“Eu assumi que as pessoas apenas usavam sites estáticos para markdown ou sites baseados em JSON, mas como se viu, havia um grande grupo de desenvolvedores interessados ​​em ultrapassar os limites do que os sites estáticos podem fazer”, disse Mathews.

A popularidade cresceu tanto que, em 2018, Mathews e vários colaboradores principais formaram a Gatsby Inc. para ajudar as equipes de desenvolvimento a criar “sites com tecnologia CMS com ferramentas modernas”.

Hoje, existem mais de 107.000 sites ao vivo na internet usando Gatsby JS.

O que é Gatsby?

Gatsby é um gerador de site estático de código aberto (SSG) baseado no framework de desenvolvimento front-end React e faz uso da tecnologia Webpack e GraphQL. Ele pode ser usado para criar sites estáticos que são aplicativos da Web progressivos, seguem os padrões da Web mais recentes e são otimizados para velocidade e segurança.

Em um artigo no BigCommerce Developer Blog de Karen White, observa-se a percepção de que os SSGs só podem ser usados ​​para sites focados em conteúdo, não aqueles com elementos dinâmicos. Mas ela diz que com o React ao lado, Gatsby pode criar sites semelhantes a aplicativos até mesmo para comércio eletrônico.

“Tudo isso quer dizer que Gatsby traz a velocidade de um site gerado estaticamente, bem como a funcionalidade de um framework”, escreve ela.


SAIBA MAIS SOBRE GATSBY + BIGCOMMERCE


Para obter mais informações sobre como Gatsby e BigCommerce trabalham juntos, confira nosso blog do desenvolvedor.

Leia agora

1. Gerador de site estático.

De certa forma, “geradores de sites estáticos” são exatamente o que parecem. Mas o que isso realmente significa? Se um site é estático ou dinâmico depende se a página é codificada manualmente como uma página estática e acessada por um usuário, ou se a página é gerada dinamicamente sob demanda por meio de um sistema de gerenciamento de conteúdo à medida que os usuários a acessam. O último requer processamento do lado do servidor.

Um gerador de site estático oferece um compromisso entre os dois, permitindo que os desenvolvedores essencialmente “escrevem dinamicamente e publiquem estaticamente”. Com SSGs, os desenvolvedores criam um site estático implantado em um servidor HTTP. Existem apenas arquivos e pastas - sem bancos de dados, sem renderização do lado do servidor. Quando um usuário solicita uma página, o servidor retorna o arquivo correspondente.

Os SSGs também têm benefícios de segurança cibernética. Os invasores cibernéticos usam métodos como scripts, injeções de banco de dados SQL ou vulnerabilidades de banco de dados do lado do servidor – mas os SSGs contornam isso porque são compostos apenas de arquivos estáticos e não fazem referência a bancos de dados.

2. Reaja.

React é uma biblioteca JavaScript eficiente e flexível para construir interfaces de usuário, de acordo com Reactjs.org. Essa estrutura baseada em componentes fornece aos desenvolvedores um conjunto de funcionalidades básicas leves e amplamente aplicáveis ​​que podem ser usadas para criar aplicativos móveis ou de página única.

Uma das vantagens de usar componentes React é que uma construção modular ajuda a manter tudo consistente quando você tem interfaces de usuário complicadas.

3. GraphQL.

GraphQL é uma linguagem de consulta para APIs e tempo de execução para atender a essas consultas com seus dados existentes. Isso se tornou popular entre os desenvolvedores por alguns motivos. Primeiro, suas solicitações de dados podem ser estruturadas de forma declarativa, o que significa que você pode consultar a API para os campos exatos que deseja sem ter que lidar com uma resposta que inclua propriedades extras.

Em seguida, as consultas do GraphQL podem abranger vários recursos em uma solicitação. “Uma API GraphQL tem essencialmente um único endpoint que pode consultar qualquer um dos dados disponíveis para ela”, disse White.

Ele redefine o design da API e a interação cliente-servidor para melhorar a experiência do desenvolvedor, permitindo experiências de usuário perfeitas, mesmo em plataformas cruzadas e em dispositivos móveis.

4. Pacote da Web.

Webpack é um empacotador de módulos de código aberto para JavaScript. Ele “coloca todos os seus ativos – incluindo JavaScript, imagens, fontes e CSS, em um gráfico de dependência”. Há várias vantagens em usar o Webpack, incluindo estilo mais fácil, divisão de código, mais controle sobre como os ativos são processados, implementações de produção estáveis ​​e velocidade de carregamento de página mais rápida.

O ecossistema Gatsby:plug-ins e iniciantes

Os plug-ins permitem conectar o Gatsby a plataformas de terceiros e importar dados expostos por meio de uma camada GraphQL.

Uma das razões pelas quais os desenvolvedores estão amando o Gatsby é porque ele é construído no React. Isso significa que você pode usar qualquer um dos pacotes que já usa com o NPM (um gerenciador de pacotes para pacotes Node.js).

Gatsby vem com alguns iniciadores padrão e reduz a necessidade de código clichê. Como o Gatsby é de código aberto, você também terá acesso a um número grande e crescente de plugins, iniciantes e transformadores criados pela comunidade Gatsby existente. Basta olhar para a página de Gatsby no GitHub para ver mais de 3.500 colaboradores.

Além disso, BigCommerce lançou um modelo Gatsby-Netlify CMS para iniciar o desenvolvimento de uma loja PWA sem servidor.

4 recursos notáveis ​​​​de Gatsby

Se há uma coisa que todos concordam, é que os sites do Gatsby podem ser muito rápidos. Mas também existem muitas outras vantagens – principalmente se você for um desenvolvedor já familiarizado com o React. Aqui estão algumas das características mais notáveis ​​de Gatsby.

1. Criado para desempenho.

De acordo com testes de desempenho conduzidos pelo fundador do Gatsby, Kyle Matthews, os sites do Gatsby são, em média, 2-3 vezes mais rápidos do que tipos semelhantes de sites, e a própria estrutura é responsável pelo desempenho, por isso está fora do seu prato como desenvolvedor.

“Tudo o que você precisa fazer é criar o código-fonte e o Gatsby.js compilará a configuração do Webpack com melhor desempenho para construir seu site”, disse Sarah Mischinger da Storyblok.

Geradores de sites estáticos como o Gatsby aumentam a velocidade e o desempenho porque tudo o que o servidor precisa fazer é retornar um arquivo em vez de realizar consultas de banco de dados e construir cada página conforme solicitado. Gatsby lida com toda a busca de dados e usa esses dados para gerar arquivos HTML estáticos, JavaScript e arquivos CSS, tornando-o mais rápido.

Em um artigo no Medium, Nicholas Feitel escreve que seu site Gatsby “carregou duas vezes mais rápido que meu aplicativo React simples e CINCO vezes mais rápido que um site complexo como o LinkedIn”. Com o Gatsby, você não precisará depender de servidores para geração dinâmica de páginas - em vez disso, pré-renderize-os na compilação e use CDNs para entrega.

2. Ecossistema de código aberto.

O Gatsby possui um extenso ecossistema de plugins, integrações poderosas e excelente documentação. Sua extensa comunidade de código aberto é um dos maiores pontos fortes do meta-framework. A comunidade Gatsby já criou mais de 2.000 plugins, então é muito provável que você encontre uma ferramenta já feita para atender às suas necessidades.

3. Pode transferir dados facilmente.

Com o Gatsby, você pode carregar dados de praticamente qualquer fonte de dados, para que possa usar as ferramentas que mais gostar para gerenciar conteúdo enquanto ainda usa React e GraphQL no lado do desenvolvimento. Os plug-ins de origem permitem a integração com soluções SaaS e outras ferramentas de terceiros sem configuração extensiva, e o Gatsby também fornece suporte à API para adicionar dados personalizados.

Isso, diz Karen White, é a grande força de Gatsby:“Gatsby introduz o conceito de uma “malha de conteúdo” para descrever a maneira como ele conecta plataformas de terceiros”.

“A malha de conteúdo é uma mudança de plataformas monolíticas tudo-em-um para um modelo em que cada plataforma de terceiros está contribuindo com uma funcionalidade especializada para a arquitetura geral – permitindo que cada plataforma faça o que faz melhor e a malha de conteúdo para reunir tudo de uma forma coesa.”

4. Gatsby renderiza páginas e rotas com problemas mínimos.

Usando apenas React, você ainda teria que fazer uma rota para componentes em sua pasta de páginas. No Gatsby, no entanto, por ter um componente em uma pasta de páginas, gera a página automaticamente — sem um roteador ou switch.

Dificuldades com o Gatsby Framework

Como a maioria dos frameworks de código aberto, o Gatsby ainda está evoluindo. Mas, como está agora, existem algumas desvantagens em trabalhar com ele, dependendo de suas habilidades de desenvolvimento e do tempo que você está disposto a se comprometer a construir.

1. Curva de aprendizado acentuada.

Se você estiver disposto a investir tempo e esforço, o Gatsby tem muita documentação robusta disponível e uma comunidade de usuários engajada. E, como observa Matthew Bunday, do Zen of React, “despejar muito esforço na construção de sua loja online usando novas tecnologias pode prejudicar seu negócio principal”.

2. Plugins e iniciantes nem sempre são da mais alta qualidade.

Com o desenvolvimento de código aberto, você deve prestar muita atenção à qualidade do que está obtendo e quais padrões os construtores estão seguindo. Kalin Chernev escreve:“Se o GatsbyJS for levado a sério, os exemplos e pontos de partida na comunidade devem ter melhores padrões”.

3 casos de uso proeminentes do Gatsby

Os casos de uso do Gatsby estão sempre em expansão, mas aqui estão os três principais casos de uso atuais — incluindo um caso de uso específico de comércio em comércio sem periféricos.

1. Crie um site estático usando um CMS headless.

Se tudo que você precisa é de uma página estática que serve HTML, JavaScript e CSS, Gatsby é uma excelente escolha. Você pode usá-lo para criar páginas dinamicamente de quase qualquer fonte. Ao atualizar o conteúdo em seu CMS, você pode configurar um gatilho automatizado para atualizar o conteúdo no site estático. Isso significa que o site é reconstruído apenas quando o conteúdo é atualizado.

2. Crie aplicativos da Web progressivos (PWA).

Gatsby foi projetado desde o início para ser uma estrutura PWA. Ele vem com recursos robustos de PWA e foi desenvolvido para ser rápido e altamente acessível.

O Gatsby oferece uma experiência semelhante ao PWA porque pré-renderiza seu site - não há código do lado do servidor, banco de dados etc. Depois de carregado, o React assume o controle para fornecer uma experiência de navegação semelhante a um aplicativo e alto desempenho percebido. A otimização pronta para uso que acompanha o Gatsby inclui a divisão de pacotes de código, rotas de carregamento lento, pré-busca de ativos importantes e CSS crítico embutido.

3. Crie um site de comércio eletrônico headless.

O conceito de malha de conteúdo de Gatsby se alinha bem com a abordagem de comércio sem cabeça de substituir soluções tudo-em-um por modularidade e flexibilidade. O comércio sem cabeça dissocia o front-end – ou head – do site de comércio eletrônico do mecanismo de comércio eletrônico que alimenta o back-end.

Como Karen White explica:“Um site de comércio eletrônico sem cabeça usando BigCommerce usaria BigCommerce para gerenciar produtos, pedidos e criação de carrinhos, mas uma tecnologia diferente do Stencil para renderizar a camada de apresentação. A camada de apresentação alternativa pode ser um front-end React personalizado, um CMS como WordPress ou Drupal – ou Gatsby.”

Avaliando se Gatsby faz sentido para você

Se você deve ou não usar o Gatsby depende muito da sua visão para o seu negócio e das suas capacidades de desenvolvimento interno.

Se você tem uma equipe que se sente confortável com as tecnologias relacionadas ao Gatsby e, especialmente, se já possui um sistema de gerenciamento de conteúdo que adora, usar o Gatsby para sua loja de comércio eletrônico é uma ótima opção. Lojas que são muito complexas ou que adicionam novos produtos com frequência devem dar uma olhada mais de perto nos prós e contras antes de entrar.

1. Você quer um site estático, como um simples site ou blog pessoal?

“Estático” não significa que o conteúdo não seja interativo ou que nunca mude. Mas sites estáticos são uma ótima opção para sites simples com muito conteúdo que não muda com frequência. Embora tecnicamente você não precise ter um CMS para gerenciar esse conteúdo, é altamente recomendável facilitar o trabalho com esse conteúdo.

2. Seu site é complexo?

Sites muito complexos com muitos dados em mudança e peças em movimento podem ficar mais lentos com o aumento dos tempos de construção. Além disso, se o seu site depender de dados que não são recuperados até que a página seja renderizada, você perderá os benefícios de uma página gerada estaticamente.

3. Você já tem rotas geradas dinamicamente?

Se você tiver rotas geradas dinamicamente em seu site, não obterá os benefícios das páginas geradas estaticamente se não as conhecer no momento da criação.

Conclusão

Gatsby é muito popular entre os desenvolvedores no momento, e por boas razões. Os desenvolvedores adoram o React, no qual Gatsby é baseado, e há muitos recursos disponíveis em React e Gatsby. Também é altamente flexível e extensível - e quando combinado com um sistema de gerenciamento de conteúdo headless, pode ser uma maneira rápida e poderosa de fornecer conteúdo.

Gatsby e geradores de sites estáticos semelhantes estão começando a se tornar populares também para lojas de comércio eletrônico - mas esse é um caso de uso um pouco mais complexo. Sugerimos que você realmente se aprofunde nos requisitos e recursos antes de entrar. Para o tipo certo de loja com a equipe certa, no entanto, Gatsby pode apresentar de maneira bonita e rápida uma vitrine rica em conteúdo com um back-end de comércio eletrônico estável e seguro.