Introdução
Depois de um longo tempo, quero voltar a deixar este blog ativo. Quando comecei pensei muito sobre a vontade e a necessidade de compartilhar conhecimento, mas acabei não me dedicando o suficiente para manter este site alimentado de forma constante.
Recentemente, estava pensando muito sobre este propósito. Ele não mudou, mas entendi que este blog também pode ser um “swap de memória”, para eu escrever muitas coisas que pensei ou já fiz e que não estão disponíveis de forma fácil, perdidas em algum rascunho. Fiz muitas coisas ao longo da minha carreira que gostaria que estivessem aqui. E, por isso, quero dar continuidade; assim, posso compartilhar este conhecimento também com o “Douglas do Futuro”.
O motivador inicial para este artigo foi uma necessidade simples: “Preciso criar um site estático, mas com a facilidade de atualizar seu conteúdo sem precisar ficar editando o HTML.”
Eu sei que poderia fazer isso usando Node.JS de forma simples, MAS eu poderia fazer isso usando um framework JavaScript diferente!
 |
|---|
| Convite para um novo framework javascript |
Svelte, SvelteKit e SSG
Criado em 2016, o Svelte é um framework para criação de interfaces web (UI Framework), usando a arquitetura orientada a componentes, similar à usada no Angular, React e Vue.
 |
|---|
| Svelte |
Até aí, poderia ser somente uma forma alternativa e, de certa forma, mais simples de fazer a mesma coisa. Mas é aqui que as coisas ficam realmente diferentes: o Svelte não tem runtime que executa no browser; ele é, na verdade, um compilador. Ele compila o código-fonte, e o resultado é HTML, CSS e JS puro, sem um runtime do framework. Isso resulta em algo muito leve e com baixo tempo de carregamento.
Já o SvelteKit é o framework com mais recursos e configurações; toda a parte de rotas, páginas e plugins é estruturada através dele. Em uma comparação simples:
- React seria o Svelte, e o Next.JS seria o SvelteKit
- VueJS seria o Svelte, e o Nuxt.JS seria o SvelteKit
- Angular seria o SvelteKit
Assim, fica muito simples criarmos um SPA (Single Page App), pois tudo já vem estruturado, considerando o que precisa ser executado no browser e o que teremos que executar no servidor.
Agora chegamos à minha necessidade original: eu quero uma página estática, não um SPA.
O SvelteKit oferece um plugin para Static Site Generation (SSG). Não é uma exclusividade, mas me surpreendeu a forma simples de configurar e como o resultado é satisfatório. Na documentação, inclusive, já há orientações de como hospedar no GitHub, o que tornou minha aventura ainda mais fácil.
Resultado
Usando este framework, a minha necessidade foi criar um site simples que seria alimentado por dois arquivos JSON. Assim, sempre que eu precisar adicionar mais informações, basta atualizar os arquivos e compilar o código.
A necessidade veio de um vício eterno na vida de todo gamer 30+: Ragnarok Online. Eu estava cansado de não saber se um item era útil para ser vendido para outros jogadores, então desenvolvi um site para apresentar os itens mais usados, com uma forma simples de atualização incremental, sem precisar ficar mexendo diretamente no HTML.
 |
|---|
| Ragnarok Online, Pai, afasta de mim este cálice |
Outra vantagem foi desenvolver o site usando a estrutura de componentes, o que tornou tudo mais simples e fácil, sem precisar ficar concatenando strings para gerar o resultado de forma manual.
O que usei somente por diversão, agora se tornou um modelo padrão para que eu possa transformar algo simples em supersimples.
 |
|---|
| Site de pesquisa usando SvelteKit com SSG |
Carregando...