O que é JAMstack?

O que é JAMstack?

JAMstack é uma abordagem para desenvolvimento web front-end (a construção de conteúdo e interfaces com as quais os usuários interagem). Ele permite que os desenvolvedores criem rapidamente e apresentem sites estáticos aos usuários com eficiência.

Em um aplicativo web JAMstack, o máximo possível de HTML é pré-criado e armazenado em uma rede de distribuição 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. Idealmente, isso resulta em uma experiência do usuário muito mais rápida e uma experiência de desenvolvedor muito mais simples.

O que significa o termo "JAMstack"?

JAM significa JavaScript, APIs, Marcação.

• JavaScript é a linguagem de programação usada por aplicativos web
• Uma API (interface de programação de aplicativos) é uma maneira de solicitar dados de um programa ou aplicativo de outra pessoa
• Marcação é 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 forma que permite que os desenvolvedores criem 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.

Suponha que o Bob construa um aplicativo web que forneça atualizações sobre os placares do futebol europeu. O Bob cria um aplicativo de back-end que é executado em um servidor que ele opera e que verifica constantemente as pontuações das últimas partidas. Quando um usuário abre o aplicativo web, o servidor do Bob gera páginas HTML que exibem essas pontuações e, em seguida, envia essas páginas ao usuário. No entanto, o aplicativo web do Bob é um pouco lento: antes que um usuário possa visualizar essas páginas, ele precisa esperar que o aplicativo de back-end seja executado, que o HTML seja gerado e que o HTML chegue ao seu dispositivo.

Agora suponha que o Bob reconstrua seu aplicativo web usando uma abordagem JAMstack. Em vez de escrever um aplicativo de back-end inteiro, ele cria uma série de páginas HTML leves que ele armazena em uma CDN. Quando um usuário abre o aplicativo, a CDN entrega imediatamente as páginas HTML correspondentes ao usuário, pois a CDN está muito mais próxima do usuário do que o servidor do Bob. O aplicativo também faz uma chamada de API para preencher os placares dos jogos de futebol ao vivo na página. O aplicativo web do Bob agora carrega muito rapidamente para o usuário e, da perspectiva do Bob, há muito menos necessidade de escrever o código que irá lidar com o trabalho de back-end, do lado do servidor, de atualizar as pontuações.

O que é um site estático?

Um site estático é composto por uma ou mais páginas web estáticas, que são arquivos HTML que são carregados em um navegador da mesma maneira, independentemente de quem carrega o arquivo. Como as páginas 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. (Para ver a aparência do código HTML, clique com o botão direito do mouse em uma página web enquanto estiver usando o navegador Chrome e clique em "Visualizar origem da página").

Por outro lado, as páginas web dinâmicas são diferentes cada vez que são carregadas. Para fornecer uma experiência do usuário mais interativa e personalizada, as páginas 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 web dinâmica é carregada, o código deve ser executado no servidor web que hospeda a página web ou no navegador do usuário. Essa dependência do código em execução pode reduzir a rapidez da experiência do usuário.

As páginas web dinâmicas não são a única maneira de criar uma experiência do usuário modernizada. Um site JAMstack principalmente estático ainda pode fornecer uma experiência dinâmica e personalizada para os usuários, gerando ocasionalmente novo conteúdo estático ou chamando APIs para preencher o conteúdo atualizado.

Como os aplicativos JAMstack lidam com as funções de back-end?

No desenvolvimento de aplicativos, o back-end é o código executado em um servidor nos bastidores. Normalmente, um usuário não está ciente do que está acontecendo no back-end enquanto usa um site ou aplicativo. Embora o JavaScript e a marcação ditem a maneira como um aplicativo JAMstack aparece para um usuário, ele ainda precisa de funções de back-end para funcionar. O JAMstack lida com isso chamando APIs usando JavaScript.

O uso de APIs significa que os desenvolvedores do JAMstack não precisam construir seus próprios aplicativos de back-end. Eles podem construir sobre APIs já existentes para fazer seus sites e aplicativos funcionarem.

Quando os desenvolvedores desejam criar sua própria funcionalidade para um aplicativo, eles podem criar uma nova API. As APIs podem ser reutilizadas em vários contextos, portanto, quando os desenvolvedores criam suas próprias APIs para o back-end, eles precisam construir essa funcionalidade apenas uma vez para usá-la em aplicativos futuros.

Como o JAMstack se relaciona com microsserviços?

O uso de APIs permite que os desenvolvedores do JAMstack adotem uma abordagem de microsserviços para o back-end. Em uma arquitetura de microsserviços, o back-end de um aplicativo é dividido em partes menores que são executadas sob comando — assim como um aplicativo JAMstack chama várias APIs quando necessário, mas não precisa de suporte de back-end.

Também é possível construir um aplicativo JAMstack que usa um back-end parcial ou totalmente sem servidor . As funções sem servidor são pequenos trechos de código reutilizáveis que são executados sob demanda. No entanto, uma arquitetura sem servidor geralmente requer uma abordagem mais prática ao back-end pelo desenvolvedor, pois eles estão essencialmente construindo o aplicativo de back-end em vez de chamar APIs (embora não precisem se preocupar com o provisionamento de servidores).

Quais são os benefícios de usar o JAMstack?

• Performance: quase todo o conteúdo em um aplicativo JAMstack é composto de arquivos HTML estáticos que são distribuídos a partir de uma 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 performance.

A Cloudflare permite que os desenvolvedores criem aplicativos hospedados diretamente na CDN global da Cloudflare. Saiba mais sobre o Cloudflare Pages, nossa plataforma JAMstack para a criação de sites estáticos. Você também pode saber mais sobre como implantar um site Gatsby, um site Hugo, um aplicativo React e muito mais com o Cloudflare Pages. Assista a um resumo em vídeo do Cloudflare Pages da empresa de analistas Redmonk.