As funcionalidades do Gatsby JS

Quem nunca sentiu vontade de criar um blog? Esse foi o questionamento inicial de Rodrigo Gattermann aos participantes do SoftDrops*, que aconteceu no dia 5 de fevereiro. O tema em questão era o Gatsby JS: o desenvolvedor compartilhou seus conhecimentos sobre a ferramenta e destacou a praticidade que ela oferece na construção de sites estáticos.

Gatsby é um SSG (Static Site Generator), mas tem como diferencial ser totalmente baseado em React e utilizar o poder do GraphQL para consumir conteúdos externos e assets.

Gatsby JS

Rodrigo explicou que o que mais lhe chamou atenção na ferramenta foi justamente a possibilidade de consumir assets através do GraphQL, além do benefício proporcionado para métricas de SEO e indexação de sites em buscadores – uma vez que gera arquivos estáticos no build, enquanto o React é utilizado em tempo de desenvolvimento.

A performance do site é ainda outra vantagem, pois o framework possui um sistema de cache e realiza o carregamento de informações sob demanda.

Como o Gatsby JS funciona

Seu desenvolvimento acontece por meio do React, juntamente com GraphQL. Este, por sua vez, consome dados através de Api’s externas e até mesmo do WordPress. Posteriormente, é realizado o deploy para qualquer ambiente de hospedagem de sites.

De acordo com Rodrigo, a estrutura básica do Gatsby se dá por um diretório de componentes, assets de imagens e páginas do site. Conforme os arquivos são criados, as páginas já ficam acessíveis pelo navegador, o que torna a ferramenta espontânea e rápida.

Além disso, é possível fazer uso de diferentes plugins no Gatsby, simplesmente declarando-os em seu arquivo de configuração. Como forma de facilitação, a ferramenta disponibiliza algumas pré-configurações, o que otimiza o tempo de trabalho. Uma das principais delas é o Gatsby Image, componente do React que permite interligar as consultas GraphQL com o processamento de imagens do Gatsby.

Outras ferramentas para utilizar em conjunto do Gastby JS

Styled Components: é uma solução CSS-in-JS automatizada, pois aproveita métodos atuais para criar componentes à prova de colisão de classes. Isso é, ele gera nomes randômicos para facilitar a estilização da página.

Styled Icons: anteriormente, era necessário baixar manualmente ícones e criar sprites usando um task-runner. Com o Styled Icons, essa experiência se torna mais simples, pois o pacote facilita o processo de criação, trazendo imagens em SVG para edição.

Mais sobre o Gastby JS em breve

Após a apresentação conceitual da ferramenta, Rodrigo realizou uma demonstração do Gastby JS para os participantes. Como já mencionado, ele reforçou que um dos benefícios de construir um site dessa forma é que ele carrega somente o necessário e, posteriormente faz o restante do carregamento do site, otimizando a performance do site.

Achou este assunto interessante? Em breve Rodrigo irá apresentar mais funcionalidades da ferramenta em uma segunda edição do SoftDrops sobre Gatsby JS.

*O SoftDrops é um evento de troca de conhecimento que acontece todas as quartas-feiras, na sede da SoftDesign. A cada semana, um colaborador se predispõe a expor para os colegas algum tema de seu interesse, que tenha relação com os três pilares do nosso negócio: design, agilidade e tecnologia. A minipalestra dura em torno de trinta minutos e é seguida por um bate-papo entre os participantes.