Os sites JAMstack estão na moda agora no mundo dos desenvolvedores da web. Mas o que exatamente é e como todos podemos tirar proveito de seus benefícios?
O Jamstack tem conquistado a comunidade de desenvolvimento. Ele oferece muitos benefícios que variam de desempenho a custo-benefício, ao mesmo tempo em que fornece aos desenvolvedores um conjunto melhor de ferramentas para trabalhar.
Mas o que é Jamstack?
É um termo que descreve uma arquitetura moderna de desenvolvimento web baseada em JavaScript, APIs e Markup (JAM).
Jamstack não é uma tecnologia ou estrutura específica, mas uma arquitetura diferente para criar aplicativos e sites.
Em vez de usar um CMS tradicional ou construtor de sites, um site Jamstack divide o código (JavaScript), a infraestrutura do site (APIs) e o conteúdo (Markup). Tudo isso será tratado em uma arquitetura desacoplada e com uma clara divisão entre o lado do servidor e o lado do cliente.
Na verdade, a principal ideia por trás da criação de sites e aplicativos Jamstack é empurrar o máximo possível da carga do servidor para o cliente.
Ao fazer isso, reduz drasticamente o número de solicitações enviadas a um servidor e, portanto, elimina muito do tempo de espera que vem com um servidor lidando com uma solicitação e enviando-a de volta ao cliente.
Com o Jamstack, todo o front-end é pré-construído em páginas estáticas altamente otimizadas e ativos durante um processo de compilação.
Este processo de pré-renderização resulta em sites que podem ser atendidos diretamente de uma CDN, reduzindo o custo, complexidade e risco, de servidores dinâmicos como infraestrutura crítica.
O que compõe o JAMstack?
O JAMstack normalmente é composto por 3 componentes: Javascript, APIs e Markup.
Embora não haja nenhum conjunto específico de ferramentas que você precise usar, ou qualquer ferramenta além do HTML simples, há ótimos exemplos do que pode compor cada parte da pilha.
Vamos mergulhar um pouco em cada componente.
Javascript
O componente que provavelmente deu mais trabalho para popularizar o JAMstack é o Javascript. Nossa linguagem de navegador favorita nos permite fornecer todos os bits dinâmicos e interativos que talvez não tenhamos se estivermos servindo HTML simples sem ele.
É aqui que muitas vezes você verá estruturas de interface do usuário como React , Vue e recém-chegados como Svelte .
Eles tornam a criação de aplicativos mais simples e organizada, fornecendo APIs de componentes e ferramentas que compilam em um arquivo HTML simples (ou vários deles).
Esses arquivos HTML incluem um grupo de ativos como imagens, CSS e o JS real que, em última análise, é servido a um navegador por meio de sua CDN (rede de entrega de conteúdo) favorita.
API
Utilizar os pontos fortes das APIs é essencial para tornar um aplicativo JAMstack dinâmico. Seja autenticação ou pesquisa, seu aplicativo usará Javascript para fazer uma solicitação HTTP para outro provedor, o que acabará aprimorando a experiência de uma forma ou de outra.
Gatsby cunhou a frase “Content Mesh” que faz um bom trabalho ao descrever as possibilidades aqui.
Você não precisa necessariamente entrar em contato com apenas um host para uma API, mas pode contatar quantos precisar (mas tente não exagerar).
Por exemplo, se você tiver uma API do WordPress headless onde hospeda suas postagens de blog, uma conta Cloudinary onde você armazena sua mídia especializada e uma instância do Elasticsearch que fornece sua funcionalidade de pesquisa, todos trabalham juntos para fornecer uma experiência única para as pessoas que usam seu site.
Markup
Esta é a peça crítica. Seja seu HTML escrito à mão ou o código que compila para o HTML, é a primeira parte que você está servindo ao cliente. Esta é uma parte de fato de qualquer site, mas como você a serve é a parte mais importante.
Para ser considerado um aplicativo JAMstack, o HTML precisa ser servido estaticamente, o que basicamente significa não ser renderizado dinamicamente a partir de um servidor.
Se você está montando uma página e servindo com PHP, provavelmente não é um aplicativo JAMstack. Se você carregar e veicular um único arquivo HTML do armazenamento que constrói um aplicativo com Javascript, parece um aplicativo JAMstack.
Mas isso não significa que temos que sempre construir 100% do aplicativo dentro do navegador. Ferramentas como Gatsby e outros geradores de sites estáticos nos permitem extrair algumas ou todas as nossas fontes de API no momento da compilação e renderizar as páginas como arquivos HTML.
Pense se você tem um blog WordPress, podemos puxar todos os posts e, finalmente, criar um novo arquivo HTML para cada post.
Isso significa que poderemos fornecer uma versão pré-compilada da página diretamente ao navegador, o que geralmente equivale a uma primeira pintura mais rápida e uma experiência mais rápida para o visitante.
Benefícios do JAMstack
Uma arquitetura Jamstack pode trazer todos os tipos de benefícios para os sites e fluxos de trabalho do projeto. Alguns dos principais benefícios são:
Segurança
O Jamstack remove várias partes móveis e sistemas da infraestrutura de hospedagem, resultando em menos servidores e sistemas para se proteger contra ataques.
Servir páginas e ativos como arquivos pré-gerados permite hospedagem somente leitura, reduzindo ainda mais os vetores de ataque.
Enquanto isso, ferramentas e serviços dinâmicos podem ser fornecidos por fornecedores com equipes dedicadas a proteger seus sistemas específicos e fornecer altos níveis de serviço.
Escala
As arquiteturas populares lidam com cargas de tráfego intenso adicionando lógica para armazenar em cache visualizações e recursos populares.
O Jamstack fornece isso por padrão. Quando os sites podem ser atendidos inteiramente a partir de uma CDN , não há lógica ou fluxo de trabalho complexo para determinar quais ativos podem ser armazenados em cache e quando.
Com os sites Jamstack, tudo pode ser armazenado em cache em uma rede de entrega de conteúdo. Com implantações mais simples, redundância integrada e incrível capacidade de carga.
Performance
As velocidades de carregamento da página têm um impacto na experiência e na conversão do usuário. Os sites Jamstack eliminam a necessidade de gerar visualizações de página em um servidor no momento da solicitação, gerando páginas antecipadamente durante uma compilação.
Com todas as páginas já disponíveis em uma CDN próxima ao usuário e prontas para servir, é possível um desempenho muito alto sem a introdução de infraestrutura cara ou complexa.
Manutenção
Quando a complexidade da hospedagem é reduzida, as tarefas de manutenção também. Um site pré-gerado , sendo servido diretamente de um simples host ou diretamente de uma CDN não precisa de uma equipe de especialistas para “manter as luzes acesas”.
O trabalho foi feito durante a compilação, então agora o site gerado é estável e pode ser hospedado sem servidores que podem exigir patch, atualização e manutenção.
Ou seja, a base do seu site estático não é um servidor, o que significa que você não precisa mantê-lo. Seja Netlify, S3 ou qualquer outro provedor, seu HTML, CSS e JS estático são mantidos para você sem dor de cabeça.
Portabilidade
Os sites Jamstack são pré-gerados. Isso significa que você pode hospedá-los a partir de uma ampla variedade de serviços de hospedagem e ter maior capacidade de movê-los para seu host preferido.
Qualquer solução simples de hospedagem estática deve ser capaz de servir um site Jamstack. Adeus bloqueio de infraestrutura.
Experiência do desenvolvedor
Os sites Jamstack podem ser construídos com uma ampla variedade de ferramentas. Eles não dependem de tecnologias proprietárias ou frameworks exóticos e pouco conhecidos.
Em vez disso, eles se baseiam em ferramentas e convenções amplamente disponíveis. Como resultado, não é difícil encontrar desenvolvedores entusiasmados e talentosos que tenham as habilidades certas para construir com o Jamstack. A eficiência e a eficácia podem prosperar.
Uma nota sobre “hospedagem”
Usar o termo hospedagem aqui pode ser enganoso se você for novo no conceito. Sim, seu site está tecnicamente hospedado em algum lugar, mas não no sentido tradicional. Você não tem um servidor que está mantendo onde você carrega seus arquivos com um cliente FTP como o FileZilla.
Em vez disso, se você está fazendo isso sozinho com o S3 ou canalizando-o para o Netlify (que na verdade é multi-cloud ), seu HTML e ativos estáticos estão sendo servidos a partir do armazenamento de objetos.
No final disso, você normalmente tem um CDN como o Cloudflare , que armazena em cache esses arquivos em locais em todo o mundo, fazendo com que suas páginas sejam carregadas mais rapidamente para as pessoas que visitam seu site.
Ferramentas para criar sites ou aplicativos JAMstack
Já temos bastante ferramentas disponíveis atualmente e muito mais a caminho.
Eles ainda podem ser um pouco ásperos nas bordas, mas isso é porque este é um admirável mundo novo de ferramentas e isso requer um pouco de suavização para ficar certo.
Construindo seu aplicativo
Esta é a parte divertida. Como você vai construir seu aplicativo?
Aqui estão alguns populares para começar, mas de forma alguma é exaustivo.
- 11ty
- Gatsby
- Hugo
- Nift
- Scully (for you Angular fans)
Servindo seu aplicativo
Eu gosto de pensar nisso como a parte mais fácil, dependendo da sua configuração.
Ferramentas como Netlify e Zeit facilitam a configuração conectando-se ao seu repositório do Github e criando sempre que um novo commit for enviado, mas é claro que você tem opções como AWS se quiser mais controle.
- AWS
- Azure
- GCP
- Páginas do Github
- Netlify
- Surto
- Zeit
Tornando seu aplicativo dinâmico
Realmente, isso pode ser qualquer coisa que possa ser usada como uma API fazendo solicitações do navegador.
Não vou listar muitos exemplos por tipo, mas aqui estão algumas ferramentas e lugares onde você pode encontrar alguns recursos.
- Auth0 – (Autenticação)
- Cloudinary – (Gerenciamento de mídia)
- Google Analytics – (análise de tráfego da Web)
- headlesscms.org – (Lista interminável de CMSs headless)
- Sanity – CMS
- Serverless Framework – (recursos sem servidor fáceis de implantar)
- Snipcart – Ecommerce
- Stripe – (Gestão de pagamentos)
Quais são as desvantagens do Jamstack?
A principal desvantagem do Jamstack para alguns é sua força para outros.
Formas mais tradicionais de construir um site, como o WordPress, não exigem que você pense em front-end e back-end. Toda a solução vem com uma interface de usuário e um sistema de gerenciamento de conteúdo que, em última análise, atende a um site renderizado.
Com o Jamstack, por outro lado, você precisa de várias ferramentas e serviços para obter o mesmo resultado.
Você também precisará pensar em seu front-end e back-end separadamente, pois eles serão desacoplados. Como muitas partes de um projeto da web são desacopladas, gerenciar e construir um site com a arquitetura Jamstack pode ser mais complexo para usuários menos experientes em tecnologia.
Embora eu possa criar o frontend do meu aplicativo com o Next.js , por exemplo, precisaria escolher outra solução para gerenciamento de usuários e conteúdo.
Conclusão
Com tantas ferramentas populares para gerar sites, como Gatsby, Hugo, Jekyll, Eleventy, NextJS e muitas outras, muitos desenvolvedores web já estão familiarizados com as ferramentas necessárias para se tornarem desenvolvedores Jamstack produtivos.
Já começou ou quer começar usar o Jamstack? Conte pra nós! Deixe um comentário.
