Antes de mais nada, quero desabafar uma coisa aqui. Estou entediado com meu site.
Um site desconhecido, com posts de blog que não são lidos, e posts arbitrários e muito espaçados. Ah, qual é! Estou cansado disso.
Também vejo aqui muita baboseira sobre programação, tecnologia e IA, mas nada sobre mim. Quem é o Andrey? O que ele faz? Então talvez eu adicione outras coisas sobre mim. Ainda não sei como equilibrar privacidade e abertura nesse caso.
Como tudo começou
O primeiro commit no meu site foi em 29 de setembro de 2016, ainda no Brasil. Nove anos atrás, acredita? Era uma aplicação simples em index.html com “Andrey Luiz - JavaScript Developer”. Na época, eu tinha orgulho de ter acabado de registrar andreyluiz.com. Então criei um placeholder simples para melhorar depois e apenas manter o domínio.
Quando vim para a Suíça no início de 2020, fiquei em quarentena por causa da COVID-19. Durante boa parte do ano aprendi pixel art. Para mostrar ao mundo como eu era bom (não ri), adicionei a mim mesmo ao site. Quer dizer, era um autorretrato meu em pixel art. Também acrescentei informações sobre mim e links para GitHub, LinkedIn, Instagram etc. O commit é de 22 de novembro de 2020.
Em agosto de 2023, decidi ter um blog. Então adicionei uma grande estrutura de blog usando Jekyll e um template pronto. Essa foi a primeira estrutura que se parece um pouco com o que temos hoje. O fato de ser Jekyll funcionava, mas eu pessoalmente não gostava dele. Ruby não é minha tecnologia, e queria fazer um blog em uma stack mais próxima da minha. Então decidi usar Next.js. E isso foi um erro…
O problema com React
React está cheio de problemas. O Facebook (agora Meta) nos empurrou React por muitos anos. Ano após ano, tomou decisões arquiteturais que introduziram coisas novas, descontinuaram outras e transformaram uma biblioteca antes tão natural em um monstro de confusão desajeitada, quase irreconhecível.
Eu estava aqui quando React só tinha classes. Eu estava aqui quando HOCs (High Order Components) eram a ÚNICA forma de compor em React. Lembro dos bons tempos do recompose, uma biblioteca incrível com um conjunto de ferramentas muito boas que usavam HOCs. Bem, seu criador parou de mantê-la porque foi contratado pelo Facebook (agora Meta). Isso aconteceu justamente quando o Facebook lançou, pela primeira vez, a API de Hooks. Quem diria?
O Facebook matou muitos desses projetos legais em favor de seu próprio conjunto de direções e do domínio sobre o futuro do React. E aqui estamos: achando aceitável que uma aplicação baixe 5 MB de JavaScript apenas para renderizar uma página simples, ou que um servidor com muitos recursos seja necessário para executar um blog simples.
É insano o quanto normalizamos isso
Desenvolver com React é tão complexo, e há tantas coisas a considerar, que normalmente, quando desenvolvedores de back-end tentam aprendê-lo, ficam absolutamente sobrecarregados pela quantidade de peças móveis.
Componentes em React usando a API de Hooks se tornaram uma bagunça, com hooks que fazem muito mais do que deveriam.
A sobrecarga mental é insana, e estou começando a pensar que não vale a pena. Empresas precisam de desenvolvedores de front-end não apenas porque entendemos como os navegadores funcionam. Mas porque desenvolver com React (que lidera a indústria) ficou cada vez mais complexo; são necessários especialistas para entender como ele funciona e implementar novas funcionalidades.
E muitas vezes a arquitetura da aplicação é insuficiente. A aplicação tem bugs que só se explicam porque React está sendo usado (os flashes brancos do suspense, por exemplo, ou os infames “hydration errors”).
Como venho alimentando minha raiva
Isso, é claro, me deixa com raiva. E com vontade de mudar.
Mas React lidera a indústria. Por qualquer razão, cheguei a este ponto, e preciso ser estratégico e priorizar a tecnologia que de fato paga minhas contas. Não vou parar de usar React, mas farei o meu melhor para usá-lo corretamente, especialmente no meu emprego atual.
Mas em outros projetos, como meu site/blog, posso enlouquecer e implementar uma revolução por conta própria! Daí o título deste post.
Certo, agora o título começa a fazer sentido
Em 2014 experimentei algo novo com Riot.js. Eu era desenvolvedor Angular.js e, embora não tenha feito nada significativo com Riot.js, me diverti muito com ele. Já em 2014, era uma biblioteca que apresentava a elegante API que você vê em Svelte e Vue.js (em que há um componente de arquivo único com markup, JavaScript e CSS). Lembro bem da sensação de me libertar dos problemas para, talvez, substituí-los por outros problemas novos.
Então aqui estou novamente, disposto a reescrever meu site/blog em Nue.js.
Nue.js quem?
Gosto muito de soluções elegantes. Daquelas que quando se vê, você pensa: “por que agora isso parece tão óbvio? Por que ninguém tinha visto isso antes?”
Essa foi minha primeira reação ao ver e aprender sobre Nue.js.
Li sobre ele pela primeira vez em um post de blog que criticava a complexidade do React e a pressão constante da Meta por mudanças inexplicadas e injustificadas na API do React. O post mencionava algumas bibliotecas que ainda valorizam princípios de engenharia de software; entre elas estavam Svelte, Vue.js, Preact e Nue.js. As três primeiras são bem conhecidas para mim, então as pulei porque tenho meu próprio conjunto de problemas com cada uma delas. Exceto Preact. Eu amo Preact <3.
Mas Nue.js chamou minha atenção, então fui conferir. E o lema me chamou a atenção imediatamente: “Uma aplicação completa menor que um botão shadcn.” Ora, essa é uma baita afirmação! Comecei a ler os posts de blog e a documentação, e fiquei impressionado com a abordagem. Parecia correta, limpa, elegante. Seu criador aplica princípios de desenvolvimento Unix, o que explica por que é tão pequeno e rápido.
Entre os recursos que tem, alguns se destacam particularmente:
- Suporte nativo a Markdown: Nue.js tratará qualquer arquivo Markdown na raiz como uma rota. Portanto, about.md será renderizado como /about. Para blogs, isso é moleza. Você pode atingir seções específicas com estilos personalizados e adicionar metadados. É tudo de que preciso aqui, mas de forma nativa. Sem implementação customizada, como fiz.
- Suporte a CSS com escopo: o CSS no Nue.js usa layers por padrão, o que facilita compor estilos e torná-los mais sustentáveis.
- Roteamento sem cérebro: qualquer arquivo HTML ou MD na raiz é automaticamente renderizado como uma rota. Não é necessário definir rotas manualmente. Caminhos com segmentos dinâmicos também são suportados.
- Configuração zero: Nue.js vem com uma configuração padrão que funciona de imediato. Você pode personalizá-la depois com um arquivo YAML.
- De volta à simplicidade: você pode começar com um arquivo HTML e CSS para ter o básico funcionando. Pode construir em cima disso passo a passo.
O viés do Tailwind
Uso Tailwind e adoro. Quando comecei com Nue.js, me peguei procurando se era possível usá-lo com Tailwind.
Cheguei a este post de blog: Tailwind vs Semantic CSS
Li o artigo e fiquei chocado com a comparação. Foi uma ótima leitura. E ele destaca o quanto sou enviesado. Uso Tailwind com React porque React é péssimo para estilização. De fato, o Tailwind meio que nos afasta do CSS puro. Faz muito tempo que escrevi uma única linha de CSS.
Voltar ao CSS semântico parece uma boa renovação. Então vou começar a segui-lo.
Suporte a TypeScript
É difícil imaginar um mundo sem TypeScript. Sinto-me nu ao desenvolver com JavaScript.
Mas ei, qual deles é o padrão? Aqui está a diferença central. Nue.js é construído sobre padrões. Então, quase não vi nada sobre TypeScript.
Tenho certeza de que dá para adicionar um arquivo tsconfig.json e transpilar para JavaScript. Mas Nue.js fala sobre como os padrões são importantes no processo de desenvolvimento para evitar o mundo Mad Max do React.
Conclusão
Vou reescrever este blog mais uma vez usando Nue.js e tecnologias cruas do navegador. Parece correto. É uma homenagem à minha profissão e ao que mais valorizo: elegância e simplicidade.
Não sei quando estará pronto, mas o trabalho já começou.
Farei um novo post depois que a migração estiver concluída.
Por enquanto, mantenham-se hidratados. Fiquem seguros.
