Existem muitos termos no mundo da tecnologia que parecem mais complicados do que realmente são. Isso certamente poderia ser dito de Jamstack. Recentemente, muito mais pessoas começaram a usá-lo, mas muitos ainda têm uma visão complicada do que ele realmente é.
O que é Jamstack?
Uma pilha de desenvolvimento é simplesmente as ferramentas, estruturas e bibliotecas subjacentes usadas para construir ou executar aplicativos. A pilha MEAN (MongoDB, Express.js, Angular e Node.js) e a pilha MERN (MongoDB, Express.js, React e Node.js) vêm à mente.
Jamstack é uma arquitetura de software projetada para tornar a web mais rápida, segura e escalonável. Ele utiliza os seguintes componentes subjacentes:
- J -JavaScript
- A -APIs
- M -marcação
O Jamstack foi desenvolvido com base no conceito de que um site pode ser veiculado estaticamente, mas também pode fornecer conteúdo dinâmico por meio dos componentes subjacentes-principalmente JavaScript e APIs.
Os exemplos de projetos Jamstack variam de uma página da web HTML simples com potencialmente nenhum JavaScript implantado em um host da web até um blog em escala real construído com Vue.js alimentado por um CMS sem cabeça como Ghost . As duas são implementações muito diferentes, mas ainda são baseadas no mesmo princípio.
Como esses exemplos díspares se unem?
Ao usar o Jamstack para construir aplicativos da web, estamos seguindo uma abordagem em que tarefas como autenticação ou processamento de pagamento são terceirizadas para APIs, e o foco está em grande parte na construção de front-end do aplicativo.
Como tal, Jamstack é o sonho do desenvolvedor front-end. Se você deseja construir um blog hoje, não precisa se preocupar com o back-end-gerenciamento de bancos de dados para armazenar artigos, imagens, etc. Você pode se concentrar no front-end onde você prospera, usando as APIs disponibilizadas para o Jamstack, por exemplo, CMS sem cabeça.
É importante observar, no entanto, que você não precisa usar todos os três componentes para que seu projeto seja considerado Jamstack. Você não precisa usar JavaScript; você não precisa usar APIs.
Muitos projetos estáticos que construímos se enquadram nessa categoria. O aplicativo Vue, Angular ou React que você constrói e implanta como um aplicativo estático é o Jamstack. Aquele arquivo HTML simples que não tem JavaScript e literalmente não faz nada dinâmico? Sim, também é um aplicativo Jamstack.
JAMstack ou Jamstack?
Você deve ter notado que as outras pilhas mencionadas acima (MEAN e MERN) estão com letras maiúsculas e, de fato, Jamstack também costumava ser estilizado como JAMstack. Mas, como o JAMstack agora abrange mais do que seu acrônimo JAM original representa, ele se tornou um termo que simplesmente representa todo o conceito de aplicativos da web servidos estaticamente.
Então, se você está preocupado com a maneira certa de escrever essa palavra, a resposta é Jamstack.
O passado, o presente e o futuro do Jamstack
No passado, criamos aplicativos fazendo com que enviassem solicitações ao servidor da web, e esses servidores construíam o HTML para cada visita ao site. Essa foi uma experiência da Web menos responsiva, pois muito trabalho foi feito em cada solicitação de página.
Passamos a construir experiências assíncronas da web usando ferramentas como AJAX (Asynchronous JavaScript and XML, que também foi reformulada para apenas Ajax depois que XML foi amplamente substituído por JSON) para construir aplicativos da web interativos que reduziram o número de carregamentos de página e solicitações que tínhamos que fazer ao servidor.
Os aplicativos de página única surgiram e proporcionaram transições mais rápidas aos sites com a sensação de aplicativos nativos. Muitas ferramentas e estruturas foram desenvolvidas para tornar mais fácil para os desenvolvedores tirar vantagem disso. Uma grande desvantagem, no entanto, era que os SPAs lutavam com a otimização do mecanismo de pesquisa (SEO) porque as páginas individuais não tinham seus próprios URLs.
Essa grande desvantagem dos SPAs levou a uma tendência de pessoas construindo sites mais estáticos usando geradores de sites estáticos (SSGs) como Jekyll, que também teve uma adoção crescente porque alimenta o GitHub Pages, uma plataforma GitHub que permite aos usuários hospedar sites a partir de seus repositórios.
A principal diferença entre SSGs e SPAs é que o trabalho pesado já é feito no momento da construção para SSGs e páginas individuais são geradas. Em contraste, os SPAs precisam criar páginas e visualizações mediante solicitação. Isso também significa melhor SEO para SSGs. E como o trabalho pesado é feito apenas uma vez e em segundo plano, os SSGs mantêm alto desempenho apesar do aumento do tráfego.
Os geradores de sites estáticos também se enquadram no Jamstack. Você pode escolher hospedá-los no Netlify ou em um CDN como Cloudflare . Os CDNs ajudam a reduzir os custos de hospedagem de aplicativos da web e, ao mesmo tempo, aumentam a velocidade, escalabilidade e segurança. Eles também tornam o Jamstack mais rápido porque tendem a servir conteúdo de servidores geograficamente mais próximos dos visitantes do site, o que significa tempos de carregamento mais rápidos e uma experiência geral melhor.
Hoje, os sites Jamstack são suportados e desenvolvidos por várias estruturas populares que você pode usar para construir seu próximo aplicativo da web. Alguns deles incluem React (Gatsby, Next.js), Vue (Gridsome, Nuxt.js), Hugo e muitos outros . Com essas ferramentas, você provavelmente já está familiarizado com o que precisa para construir sites Jamstack.
O que torna um site Jamstack hoje?
Um site pode ser considerado Jamstack com base na marcação e na forma como é veiculado. Se seu aplicativo não estiver compilando e renderizando um arquivo HTML em um servidor no momento da solicitação, então seu site é Jamstack. Mais uma vez, você não precisa usar JavaScript ou mesmo chamar APIs para que seu site seja considerado Jamstack.
Jamstack ainda é relevante?
Ainda estou escrevendo sobre isso, então definitivamente. Considero que o benefício mais significativo do Jamstack é que ele torna mais fácil para desenvolvedores de qualquer tipo, especialmente desenvolvedores de front-end, construir soluções sem ter que se preocupar muito com as atividades de back-end. É perfeito para criar MVPs, projetos paralelos, portfólios e muito mais rapidamente.
Mesmo quando você está construindo suas próprias APIs, você pode criar um projeto Vue que consuma essa API, desacoplando as dependências que tendem a surgir se você tiver a API e seu front-end juntos-muito mais fácil para o desenvolvedor de front-end ou equipe para trabalhar e manter.
Quais são as novidades do Jamstack?
Existem muitas possibilidades interessantes para o Jamstack, e é uma comunidade em crescimento ativo da qual você também pode fazer parte. Se quiser saber mais, tornar-se parte da comunidade e trocar ideias, você pode verificar a página da comunidade Jamstack para encontrar eventos e comunidades perto de você.
Se você quiser saber mais sobre o que torna o Jamstack incrível, pode ler mais sobre seus benefícios-segurança, escala, desempenho, facilidade de manutenção, portabilidade e experiência do desenvolvedor-em seu página da web oficial . Existem também muitos outros recursos na Internet que demonstram como construir sites Jamstack usando vários frameworks e ferramentas. Verifique-os.
Recursos adicionais
A postagem Jamstack em 2021: passado, presente e futuro apareceu primeiro no LogRocket Blog .
