O que é JAMstack?

JAMstack é um método para construir aplicativos web rápidos e leves usando principalmente JavaScript, APIs e Markups (HTML/CSS). O método popularizou-se com os frameworks:

• Gatsby.js
• Next.js
• Hugo
• Nuxt.js

Esses frameworks abstraem muitas das complexidades de construir uma aplicação JavaScript.

JAMstack é uma abordagem para desenvolvimento de aplicações web. Ele permite que os desenvolvedores criem rapidamente e sirvam com eficiência sites estáticos aos usuários.

Num aplicativo da Web JAMstack, o máximo possível de HTML é pré-criado e armazenado numa rede de entrega de conteúdo (CDN). Em vez de executar um aplicativo de back-end monolítico no lado do servidor para gerar conteúdo dinâmico, os componentes dinâmicos do aplicativo são baseados em APIs.

Isso resulta numa experiência de usuário muito mais rápida e uma experiência de desenvolvedor muito mais simples.

O que significa o termo ‘JAMstack’?

JAM vem da combinação das palavras JavaScript, APIs, Markup. Nenhuma dessas tecnologias são novas, mas a grande novidade é como essas tecnologias são aplicadas.

• JavaScript é a linguagem de programação usada por aplicativos da web, em muitas aplicações. Ele é utilizado para adicionar interações nas nossas aplicações e realizar requisições assíncronas.
• Uma API (interface de programação de aplicativos) é uma maneira de solicitar dados do programa ou aplicativo terceiro.
• Markup é um código (HTML e CSS) que fornece instruções de formatação para navegadores.

Stack refere-se à combinação de todas essas coisas de uma maneira que permite aos desenvolvedores criar aplicativos e sites.

Um site ou aplicativo JAMstack é construído usando apenas esses três elementos. O site estático que o usuário vê é construído a partir do código de marcação HTML e CSS. JavaScript é usado para qualquer funcionalidade dinâmica necessária e para chamar APIs. As APIs fornecem o back-end do aplicativo.

Numa aplicação WordPress, exemplo, temos uma monolitico responsável por acessar o back-end e escrever o front-end da aplicação. Tudo roda numa única instância. Neste caso, algum processo pesado no admin do WordPress pode influenciar a experiência dos usuários no front-end da aplicação.

Numa aplicação JAMstack, o WordPress será apenas uma API e fica a cargo do JavaScript e HTML apresentar o conteúdo de forma estática. Assim podemos adicionar esse conteúdo em uma CDN e entregar o conteúdo de forma super rápida.

Mas a mágica não é tão simples assim, muitos casos precisamos de um plugin do lado do WordPress para criar uma API robusta e de um bom framework como Next.js e Gatsby.js para exibir a interface do lado do usuário.

O que é um site estático?

Um site estático é composto por uma ou mais páginas da Web estáticas, arquivos HTML que são carregados num navegador da mesma maneira, independentemente de quem carrega o arquivo.

Como as páginas da Web estáticas consistem apenas em HTML, sem nenhum código adicional que precise ser executado no navegador, elas podem ser carregadas com extrema rapidez.

Por outro lado, as páginas da Web dinâmicas diferem cada vez que são carregadas. Para fornecer uma experiência de usuário mais interativa e personalizada, as páginas da Web dinâmicas mudam com base no usuário que abre a página, na localização do carregamento da página, na hora do dia e em qualquer outra entrada de dados em mudança. Quando uma página da Web dinâmica é carregada, o código deve ser executado no servidor da Web que hospeda a página da Web ou no navegador do usuário. Essa dependência do código em execução pode diminuir a experiência do usuário.

Sites dinâmicos não são a última maneira de gerar conteúdo dinamicamente, temos os geradores de sites estáticos que criam conteúdo estático de forma dinâmica, a maiorias dos frameworks que mencionei no começo do post possuem esse recurso.

O que são geradores de sites automáticos?

Um gerador de site estático é uma ferramenta que gera um site HTML estático completo com base em dados brutos e um conjunto de modelos. Essencialmente, um gerador de site estático automatiza a tarefa de codificar páginas HTML individuais e deixa essas páginas prontas para servir aos usuários com antecedência. Como essas páginas HTML são pré-criadas, elas podem ser carregadas muito rapidamente nos navegadores dos usuários.

Os geradores de sites estáticos são uma alternativa aos sistemas de gerenciamento de conteúdo (CMS) — outro tipo de ferramenta para gerenciar conteúdo da Web, gerar páginas da Web e implementar modelos. (Um modelo é um formato reutilizável para conteúdo da Web; os desenvolvedores usam modelos para evitar escrever a mesma formatação repetidamente.) Os geradores de sites estáticos normalmente fazem parte de uma abordagem de desenvolvimento da Web JAMstack.

Qual é a diferença entre um gerador de site estático e um CMS?

Nos primórdios da Internet, os sites eram armazenados como sites HTML estáticos, com todas as páginas dispostas e codificadas antecipadamente. Isso era ineficiente porque exigia que os desenvolvedores codificassem cada página da Web manualmente.

Os sistemas de gerenciamento de conteúdo (CMS) surgiram como uma maneira que os criadores de conteúdo não tivesse a necessidade de mexer no código para publicar conteúdo. Em vez disso o conteúdo é salvo no banco de dados com a ajudar de um editor gráfico.

Quando um usuário solicita uma página, o servidor faz o seguinte:

• Consulta o banco de dados para o conteúdo certo
• Identifica o modelo no qual o conteúdo se encaixará
• Gera a página
• Exibe a página para o usuário

Esse processo é executado toda vez que a página é requisitada, claro que hoje, existem técnicas que ajudam a exibir o conteúdo de forma mais eficiente com técnicas de cache no lado do servidor.

Um gerador de site estático é um compromisso entre essas duas abordagens. Como um CMS, ele permite que os desenvolvedores usem modelos e gerem páginas da Web automaticamente — mas faz isso com antecedência, em vez de responder a uma solicitação do usuário. Isso torna o desempenho do site mais rápido, porque as páginas da Web ficam instantaneamente prontas para entrega aos usuários finais. Também oferece maior customização aos desenvolvedores, pois não estão limitados pelos campos do banco de dados oferecidos pelo CMS.

Benefícios de utilizar Aplicações JAMStack?

• Desempenho: Quase todo o conteúdo num aplicativo JAMstack é composto de arquivos HTML estáticos que são servidos a partir de um CDN. Essa é a maneira mais rápida de fornecer conteúdo da Web aos usuários finais.
• Escalabilidade: Se um aplicativo for “escalável”, isso significa que ele responde bem a grandes aumentos no uso. Como o front-end do JAMstack é rápido e o back-end é leve, os aplicativos JAMstack geralmente são extremamente escaláveis.
• Melhor experiência do desenvolvedor: o JAMstack permite que os desenvolvedores se concentrem na criação de uma experiência de usuário de front-end atraente, sem se preocupar com problemas de back-end ou desempenho.

Existem várias soluções para publicar seu site JAMstack, uma delas é o Cloudflare Pages. Se você gostou do conteúdo sobre JAMstack confira os posts relacionados no blog:

• O que é Cloudflare Pages?
• O que é Cloudflare Pages?
• O que é Serverless?