Sites estáticos escalam: Onze vs. Next.js no 11º evento

Na semana passada, o gerador de sites estáticos Eleventy (11ty) realizou uma conferência virtual de um dia para sua apaixonada comunidade de desenvolvedores web. Em sua palestra de abertura, o criador do Eleventy, Zach Leatherman, incentivou os participantes a “continuarem construindo para a web”. Ele comparou isso a um ato de rebelião contra as forças obscuras que impulsionam a Internet de hoje.

“Não temos nada além de cronogramas algorítmicos nas redes sociais, temos páginas ‘para você’ que nos enviam conteúdo, temos grandes modelos de linguagem que geram conteúdo para nós”, disse ele. “Eu realmente acho que as pessoas que criam, hospedam e têm controle total de seu próprio conteúdo na web são muito poderosas – e de certa forma, acho que é muito subversivo também.”

Eu uso o Eleventy para administrar meu site de história da Internet e adoro-o pelas qualidades “subversivas” que Leatherman sugere. Eleventy permite que você controle totalmente o código e o conteúdo do seu site via git, você pode trabalhar com várias linguagens de modelo e – talvez o mais importante – tem “zero JavaScript do lado do cliente por padrão em todos os aspectos”. Em um mundo on-line governado por estruturas JavaScript volumosas criadas pelas grandes empresas de tecnologia (React da Meta, Angular do Google, etc.), o Eleventy é notável por sua flexibilidade e desempenho.

Leatherman criou o Eleventy em 2017 e, desde então, a ferramenta emergiu como um dos geradores de sites estáticos mais populares – embora ainda relativamente pequeno em comparação com os que Vercel e Netlify oferecem. Em um gráfico, Leatherman mostrou onde ele acha que a Eleventy está posicionada em comparação com concorrentes como Next.js.

Diagrama da ferramenta de criação de sites de Zach Leatherman.

Embora ele tenha reconhecido que a Eleventy está experimentando o tipo de recursos de servidor dinâmico nos quais o Next.js se destaca, Leatherman posicionou a Eleventy diretamente no quadrante “HTML primeiro” mais “Servidor estático (SSG)”. Interessante também que, além de posicionar 11ty oposto ao Next.js dinâmico, “JavaScript-first”, ele também está em categorias diferentes de Gatsby (um SSG semelhante, mas JavaScript-first) e WordPress (dinâmico, mas HTML-first).

Leatherman se concentrou particularmente no Next.js durante sua palestra, por ser a ferramenta mais popular desse tipo. “Você pode usar Next.js de diferentes maneiras”, observou ele. “Eles adicionaram o que chamaram de modo de ‘renderização no lado do servidor’, que permite servir HTML primeiro no código que é baixado pelos visitantes dos sites que você cria. Mas ainda tem suas raízes em aplicativos de página única.”

Ele acrescentou que você também pode usar Next.js para exportar um site estático. Embora Leatherman não tenha dito isso explicitamente, você pode facilmente inferir que Next.js se tornou uma espécie de canivete suíço de desenvolvimento web. Indiscutivelmente, isso só aumenta a complexidade pela qual o Next.js se tornou conhecido.

Quanto ao Eleventy, ele quer permanecer no quadrante superior direito.

“No final das contas, acho que os sites estáticos realmente têm o benefício incrível de serem os mais seguros e os mais rápidos de servir”, disse Leatherman.

Ele observou que o Eleventy já ultrapassou 72.000 repositórios no GitHub e foi baixado mais de 8,7 milhões de vezes no npm.

Escalando 11ty: ferramentas para projetos grandes e desempenho na Web

Na terceira sessão do dia da 11ty Conference, Paul Everitt da JetBrains mostrou que você pode usar “ferramentas para grandes projetos” com o Eleventy. Everitt explicou que eles adicionaram desenvolvimento orientado a componentes por meio de TypeScript e TSX (uma linguagem de modelagem), testes de unidade com Vitest e validação no editor do frontmatter Markdown – todos os recursos que Everitt poderia fazer em seu sistema anterior baseado em Gatsby.

Paul Everitt da JetBrains.

“As pessoas podem ter a ideia de que o Eleventy é para blogs pessoais”, disse Everitt no final de sua palestra. “Vamos mudar isso. Vamos dizer às pessoas que você pode realizar grandes projetos. Zach continua adicionando o que é necessário para isso.”

Everitt acrescentou que o tempo de construção do Eleventy é “infinitamente” melhor que o de Gatsby (longos tempos de construção eram um problema notório para Gatsby). Esse ponto foi reforçado na apresentação de Sia Karamalegos, engenheira de desempenho web do Shopify. Karamalegos também administra um site pessoal no Eleventy e oferece algumas dicas úteis para melhorar o desempenho, independentemente da ferramenta que você estiver usando.

Sia Karamalegos do Shopify.

Montagem no local

Mais tarde naquele dia, o principal patrocinador da Eleventy, a empresa neozelandesa de CMS CloudCannon, exibiu uma nova técnica que prova que a Eleventy não é apenas para sites de hobby. Acontece que ele pode ser dimensionado para operações web maiores.

CloudCannon possui um recurso chamado “montagem de site” que permite que vários sites compartilhem o mesmo fluxo de trabalho de publicação, sincronizando com uma imagem de construção. Como explicou David Large, da CloudCannon, “o objetivo é permitir que grandes organizações recebam os mesmos benefícios de sites estáticos e um CMS baseado em git que organizações menores de site único”.

Na conferência, Large e seu colega Liam Bigelow demonstraram o que chamaram de “data lake para um grupo de sites conectados”, que permitiu a distribuição e agregação de conteúdo por meio de uma ferramenta chamada Flatlake.

Liam Bigelow da CloudCannon demonstrando Flatlake.

Flatlake é descrito como “um gerador de API estático”, com o objetivo de “expor uma interface CMS sem cabeça em um conjunto de arquivos estáticos baseados em git”. Ele permite que vários sites compartilhem seu código e conteúdo.

Bigelow, desenvolvedor responsável por Flatlake, mostrou um site de demonstração de uma grande empresa fictícia chamada Real Big Company. Ele explicou que Flatlake basicamente lê os arquivos de conteúdo de um gerador de site estático “e cospe arquivos JSON estáticos que podem ser consultados como uma API”.

Ele então mostrou como Flatlake pode “agregar todo o nosso conteúdo em uma espécie de API estática e dar a cada site acesso a esses dados no momento da construção”.

Junte-se à Resistência da Web

Ao final da 11ª Conferência, ficou claro que o Eleventy amadureceu como um ecossistema e se tornou uma ferramenta que pode ir além de apenas sites pessoais. Em sua entrevista final com o CEO da CloudCannon, Mike Neumegen, Zach Leatherman falou sobre o próximo lançamento 3.0, mas também deu a entender que às vezes sentia a pressão de construir esse ecossistema.

“Definitivamente parece que há um renascimento acontecendo agora, o que é super emocionante… porque não sei se senti isso há seis meses.”

Talvez seja esse sentimento de ser subversivo – chutando contra os idiotas da plataforma – e voltando às nossas raízes como uma comunidade de desenvolvedores web que levou ao Eleventy Renaissance. Tudo o que posso dizer é: viva la résistance!

A postagem Sites estáticos escalam: Eleventy vs. Next.js no evento 11ty apareceu pela primeira vez em The New Stack.