A prova de que a roda da tecnologia vive girando
Lembra quando a gente fazia site estático? Muita gente hoje em dia nem deve saber o que é isso. Pois é, ELES VOLTARAM!!
Um pouquinho de história…
Lá nos primórdios da internet os sites eram feitos com apenas HTML e CSS. Depois veio o JavaScript. Frameworks como jQuery e MooTools reinavam e a gente criava site no Dreamweaver ou no FrontPage fatiando layout feito no Photoshop. Depois disso, vieram as páginas cliente-servidor, depois os famosos CMS (beijo pro Wordpress), depois as SPAs e agora a gente volta pro estático.
Se você alterasse o header num site estático, provavelmente ia passar o resto da semana alterando páginas e mais páginas HTML. Daí a gente usava umas tretas tipo frame/iframe pra poder separar o site em várias partes diferentes e no fim acabava ficando uma bosta, mas dava pra usar.
Porém, agora é diferente. Nós temos muito mais ferramentas do que antes. Todo Pokémon evolui e nos últimos anos o desenvolvimento front-end tem caminhado a passos largos rumo à maturidade que o nosso amigo back-end possui. No meio dessas parafernalhas fantásticas surge um conceito chamado Jamstack.
O que é o JamStack
Segundo o site oficial (em tradução livre): é uma arquitetura projetada para fazer a web mais rápida, mais segura e fácil de escalar. o JAM significa JavaScript + APIs + Markup.
Utilizando técnicas de pré-renderização para gerar arquivos estáticos e servi-los diretamente de um CDN, eliminamos a necessidade de utilizarmos servidores web. Isso permite que os sites e aplicações sejam entregues com confiança e resiliência nunca vistas antes.
Os grandes players
Next.js, Hugo, Gatsby, Jekyll… Você provavelmente já ouviu falar de um deles. Pra gente que é de Angular, fica complicado se aventurar do lado do React, do Go ou aprender um engine de template específico pra trabalhar somente com sites estáticos.
Não que a gente não deva sair da nossa zona de conforto e experimentar novas tecnologias. Porém, eu sou um cara preguiçoso e às vezes ficar de pantufas na zona de conforto pode ser gostosinho. É aí que entra o Scully.
O Scully
Esse cara é a aplicação do Jamstack utilizando Angular. Ele é tão monstro que detecta as rotas da aplicação utilizando Machine Learning e cria uma lista com elas. Depois ele percorre as rotas dessa lista gerando um index.html pra cada uma.
Como o resultado é estático, o site aparece INSTANTANEAMENTE pra geral. Depois que o seu usuário acessa a página, ele carrega o Angular em background e o usuário passa a estar acessando um SPA. Você fica com as features de uma SPA normal mas o seu usuário não precisa baixar tudo pra só depois a página ser renderizada. Primeiro ele vê a página pra depois baixar os JS/CSS do teu app.
Minha mãe diria que isso é colocar a carroça na frente dos bois, mas eu digo que é simplesmente o melhor de dois mundos.
Vamos começar!
Todo aprendizado começa pelo hello world e é isso que vamos abordar aqui agora.
Instalação
O Scully precisa de uma aplicação Angular pra rodar, então vamos começar com o nosso primeiro comando:
ng new blog --routing
Depois disso, vamos inicializar o Scully no projeto:
ng add @scullyio/init
Como o Schematics é lindo, o Scully já configura tudo o que é necessário para funcionar.
Build
Antes de executar o scully, precisamos rodar o build:
ng build --prod
Depois disso, vamos lá:
npm run scully
Feito! Você transformou seu app Angular em um site pré-renderizado que carrega na velocidade da luz. O conteúdo é gerado dentro da pasta dist/static e você pode fazer o deploy dela pro seu serviço favorito.
Cada rota é pré-renderizada e possui sua própria página. Isso significa que se você tiver 1000 rotas, vão ser 1000 arquivos index.html dentro da pasta dist/static
Executando o servidor local
Mas pera. É meio chato ter que subir um servidor web só pra testar né? Pra rodar o servidor local, o comando é esse aqui:
npm run scully:serve
Você digita http://localhost:1668/ no navegador e antes de apertar o Enter a página é renderizada na velocidade da luz.
Esse comando sobe dois servidores: Um com o output do Scully e o outro com o output do ng build. Assim, você pode comparar as duas versões da sua página sempre que precisar.
E o nosso hello world?
Só se for agora! Vamos no nosso arquivo src/app/app.component.html, apagar toda aquela porcariada do Angular e adicionar o nosso conteúdo:
<h1>HELLO WORLD!</h1>
<div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/3otPoS81loriI9sO8o" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/filmeditor-will-ferrell-elf-3otPoS81loriI9sO8o">via GIPHY</a></p>
Vamos rodar o combo ng build --prod && npm run scully:serve e pronto! Tá aí o hello world.
Observações
Eu sei que é chato ter que fazer build pra ver o resultado final, mas é porque o Scully trabalha basicamente nisso: o resultado final do seu app. Enquanto você estiver desenvolvendo, pode usar o ng serve mesmo. Terminou e quer ver como ficou antes de publicar a versão? Aí sim roda o Scully e dá uma olhada.
Top comments (0)