Programmer404, MUITO OBRIGADO por compartilhar esse conhecimento valioso e por abrir os olhos da comunidade para as possibilidades do data-* e para um desenvolvimento web mais "raiz", sempre que possível.
1 .Zero dependências? CHECK.
2. Acessível? CHECK.
3. Performático? CHECK ABSOLUTO
Continue cavando fundo, explorando essas ferramentas poderosas e nos mostrando o quão longe podemos ir com HTML e CS. Isso é só a ponta do iceberg.
Com todas as novidades e recursos FANTÁSTICOS que o CSS tem ganhado nos últimos anos, como variables e animations dá criar aplicações web INSTANTÂNEAS E COMPLEXAS, praticamente sem qualquer Javascript.
Por exemplo, uma prova de conceito de SPA/SSR: Ao invés de enfiar toneladas de dependencias, builds complexos e frameworks gigantescos, basta ter um data-fetch com um <scriptzinho> no html.
<!DOCTYPE html>
<html>
<head>
<title>Minha App HTML/CSS + data-fetch</title>
</head>
<body>
<nav>
<a href="/" data-fetch="/conteudo-home">Home</a>
<a href="/sobre" data-fetch="/conteudo-sobre">Sobre</a>
<a href="/contato" data-fetch="/conteudo-contato">Contato</a>
</nav>
<main id="conteudo-principal">
<h1>Bem-vindo!</h1>
<p>Conteúdo da página inicial.</p>
</main>
<script>
document.addEventListener('click', function(event) {
if (event.target.matches('a[data-fetch]')) {
event.preventDefault();
const urlFetch = event.target.getAttribute('data-fetch');
fetch(urlFetch)
.then(response => response.text())
.then(html => {
document.getElementById('conteudo-principal').innerHTML = html;
history.pushState({}, '', event.target.getAttribute('href'));
});
}
});
</script>
</body>
</html>
"Hidratação"? "Estado"? "JSON"? ESQUECE! Aqui a gente volta pro BÁSICO, pro HTML QUE VOA e pro site que carrega NA HORA! É mais rápido e mais acessível do que as coisas mais otimizadas que os frameworks conseguirão criar. E sem npm install pra quando alguém achar seu repo daqui milhares de anos sua aplicação ainda funcionar.
O HTML e CSS são o FRAMEWORK DEFINITIVO da web que gente demais ignora...
E o MELHOR DE TUDO: SEM "BACKEND" VS "FRONTEND"!
O programador WEB "RAIZ" trabalha DIRETO COM OS DADOS gerando HTML BRUTO da forma mais eficiente possível. O DESIGNER reinando absoluto no CSS, criando interfaces LINDAS e INTUITIVAS. Sem Figma pra "copiar pro código".
PROGRAMADOR E DESIGNER, CONSTRUINDO A WEB [DO FUTURO]... QUE JÁ ERA HÁ 20 ANOS ATRÁS!
A moda é cíclica, e no desenvolvimento web não é diferente! Depois da era jQuery, Angular.js, React... estamos começando a RELEMBRAR o que a gente JÁ SABIA FAZER DE MELHOR! VOCÊ JÁ TÁ NA FRENTE, MEU AMIGO! Continue nessa cavando fundo.
Um abraço e bons estudos!