Continuando o aprendizado nesta quarentena, investi os meus esforços na conversão de um site que fiz anteriormente em Jekyll para Gatsby. Depois que me comecei a me familiarizar com o modo "React" de fazer as coisas, resolvi testar o que aprendi em um projeto real, sem ajuda de tutoriais. No estilo "faça você mesmo", tentando resolver os erros que apareciam sozinho.

Mas o que é Jekyll?

Site do Jekyll

Se você caiu neste artigo e não sabe o que é, sem problemas. O Jekyll é um gerador de sites estáticos¹ feito em Ruby. Estes fazem com que um conteúdo criado em outra linguagem de programação seja transformado nos velhos e conhecidos HTML e CSS, de forma que possa ser publicado em qualquer hospedagem.

No caso do Jekyll, usa-se Markdown² para criar o conteúdo das páginas e HTML com a marcação especial chamada Liquid³, para criar iterações e facilitar a modularização das páginas. Desta forma, não é necessário repetir o HTML em todas as páginas.

Funciona como um tema do Wordpress, porém sem a necessidade de configurar um banco de dados no servidor.

E esse Gatsby?

Site do Gatsby

Segundo o próprio: É um framework livre e de código aberto baseado em React, que ajuda desenvolvedores a criar sites e aplicações muito rápidas.

O resultado de um site gerado nele segue a mesma filosofia dos geradores estáticos. Porém, ele dá acesso a usar o React na renderização de forma nativa, criando muitas possibilidades. Isto, além de diversas automatizações que podem ser feitas através da instalação de plugins. A lista destes é enorme, tendo desde integração com Wordpress até a criação de Progressive Web Apps (PWAs)⁴.

Diferenças e características

Sintaxe

Para quem vem direto do HTML, o Jekyll é muito mais amigável. Os modelos de páginas são apenas arquivos .html. Segue abaixo um exemplo. As marcações estranhas são do Liquid.

---
layout: default
---

<h1 class="archive-title">Artigos</h1>

<div class="blog-content">
  <section class="posts-list">
    {% for post in paginator.posts %}
    <article class="post" data-type="{{ post.layout }}">
      <div class="details columns">
        <div class="text">
          <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">
            <h4>{{ post.title }}</h4>
            <small>{{ post.date | date: '%d/%m/%Y' }}</small>
          </a>
          <p>{{ post.excerpt | strip_html }}</p>
        </div>
      </div>
    </article>
    {% endfor %}
  </section>

  {% include pagination.html %}
</div>

No Gatsby as coisas são completamente diferentes. Os modelos de página são componentes em React, escritos utilizando o JSX, que é uma mistura de JavaScript com HTML. Note a diferença gritante no código:

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/Layout"
import Pagination from "../components/Pagination"

export default function PostList({ postList }) {
  return (
    <Layout>
      <h1 className="archive-title">Artigos</h1>
      <div className="blog-content">
        <section className="posts-list">
          {postList.map((post) => {
            return (
              <article className="post">
                <div className="details columns">
                  <div className="text">
                    <Link className="post-link" to={post.url}>
                      <h4>{post.title}</h4>
                      <small>{post.date}</small>
                    </Link>
                    <p dangerouslySetInnerHTML={{ __html: post.excerpt }} />
                  </div>
                </div>
              </article>
            )
          })}
        </section>
        <Pagination />
      </div>
    </Layout>
  )
}

O código acima é o equivalente ao mostrado anteriormente no Jekyll. No código que refiz, eu modularizei mais: o article virou outro componente. Ao ver o JSX, é inevitável o estranhamento. Eu mesmo sempre tive um certo preconceito a deixar tudo no JavaScript, mas é uma questão de adaptação.

Estilos

Ambos aceitam CSS. O Jekyll aceita Sass por padrão. No Gatsby, há a possibilidade de usar o Sass com a instalação de um plugin. Além disso, dá para modularizar os estilos para cada componente, ou seja, as classes só valem para aquela parte, não afetando outras áreas do projeto. Dá para fazer isso usando os CSS Modules nativos (módulos em CSS) ou os Styled Components do React, que necessita de um plugin. Para ficar mais claro, os módulos CSS se apresentam assim no código:

No CSS nada muda, apenas o nome do arquivo, que deve terminar em ".module.css".

.titulo {
  font-size: 3em
  color: #036
}

Já no componente, basta importar o estilo, que deve estar na mesma pasta do componente, e passa estilo no className como uma notação de objeto entre chaves.

import React from "react"
import tituloStyles from "./titulo.module.css"

export default function Titulo({ texto }) {
  return <h1 className={tituloStyles.titulo}>{texto}</h1>
}

Plugins

Além de habilitar o uso de outros módulos, como qualquer aplicação em JavaScript moderno, o Gatsby possui muitos recursos e uma grande comunidade, com plugins para quase tudo. São todos em JavaScript e podem ser instalados pelos gerenciadores de pacotes do Node JS, como o NPM e o Yarn.

Por exemplo: para criar um PWA é só instalar um plugin. Ele já cria os ícones em diversos tamanhos com base em uma imagem, cria o manifest.json e faz o cache do que você definir na configuração. No Jekyll apesar de existirem plugins para isso, eles têm pouca documentação.

Carregamento de páginas

Outra coisa que achei muito interessante é que o Gatsby carrega os dados de uma página que você vai entrar antes de você clicar no link. Por isso o site acaba se mostrando mais rápido, pois não é necessário aguardar o carregamento após o clique.

Hot reload

O Gatsby mostra as alterações que você faz em tempo real durante o desenvolvimento. Não é necessário apertar F5 para cada mudança.

Markdown

Ambos possuem suporte a Markdown. No Jekyll o suporte vem de fábrica sem necessidade de configuração. No Gatsby, é necessário um plugin e configurar a criação das páginas. Apesar desta complicação inicial, você acaba tendo mais liberdade para personalizar as funcionalidades que deseja.

GraphQL

Como funciona o Gatsby

O Gatsby vem com suporte ao GraphQL, que é uma linguagem para consulta e manipulação de dados. Diversas fontes podem ser usadas: APIs, Wordpress, arquivos em Markdown, bancos de dados, JSON e até CSVs.

Com ajuda de plugins, os dados destes arquivos são disponibilizados para a manipulação pelo console do GraphQL. A ideia assusta de início, mas ao entender o funcionamento, o medo some. Não é tão complicado quanto parece.

O interessante desta linguagem é que podemos fazer a conversão de datas para o formato desejado se informado na consulta, sem precisar fazer a conversão no código da exibição.

import React from "react"
import { graphql, useStaticQuery, Link } from "gatsby"

const data = useStaticQuery(graphql`
  query {
    allMarkdownRemark(limit: 100, sort: { fields: id, order: DESC }) {
      edges {
        node {
          frontmatter {
            title
            slug
            date(locale: "pt-BR", fromNow: true)
          }
        }
      }
    }
  }
`)

No exemplo, a linha date(locale: "pt-BR", fromNow: true) irá mostrar a data como "Há 2 dias".

Qual devo usar?

Use o Jekyll caso não se sinta confortável com JavaScript. Ponto. É uma ferramenta poderosa e continuarei a usá-lo para sites mais simples.

Mas um site em Jekyll, apesar de ser mais fácil de criar, é mais complicado de estender. Caso precise de uma funcionalidade na qual não haja ainda um plugin, este terá de ser desenvolvido em Ruby. A probabilidade de não se encontrar um plugin em JavaScript é bem menor, e a integração deles dentro do ambiente do Gatsby é muito mais natural.

Resumindo, use o Gatsby caso goste de React/JavaScript e precise de ferramentas mais avançadas no seu site.

Sobre a experiência

Foi ótimo para mim este desafio, pois pude lidar com os conceitos que ainda estavam meio nebulosos para mim no React, como o uso dos React Hooks, e ainda aprender um pouco de GraphQL, que desconhecia completamente.

Se você chegou até aqui, meus parabéns! O texto ficou mais longo do que pensei! Aliás, o site que converti é este no qual você lê este texto agora: este blog estava em Jekyll e o converti para Gatsby.

Ainda escreverei mais coisas sobre meu aprendizado, mas irei parar por aqui, porque o artigo ficou grande!

Deixem aí nos comentários a sua sugestão ou crítica!

Links

• Jekyll - Simple, blog-aware, static sites
• GatsbyJS - Fast in every way that matters