Vanilla JavaScript

Se você conversar com desenvolvedores hoje, a maioria dirá que é impossível programar para a web sem utilizar frameworks ou bibliotecas como React, Angular, Vue ou Svelte. No entanto, no desenvolvimento de landing pages e sites institucionais, o caminho recomendado para alta performance é o oposto: programar em Vanilla JavaScript.

"Vanilla" é o termo técnico para o JavaScript puro, executado nativamente pelo próprio navegador, sem compilações extras ou intermediários. E a razão para preferir essa abordagem é simples: desempenho absoluto.

A febre dos frameworks e o "overkill"

Os frameworks front-end modernos foram criados por grandes corporações (como o Facebook/Meta no caso do React) para gerenciar aplicações web gigantescas e com milhares de estados atualizados em tempo real, como feeds de redes sociais ou gerenciadores de e-mail.

Porém, carregar todo o peso do motor de um framework (Virtual DOM, bibliotecas de renderização, gerenciadores de rotas) apenas para fazer um menu mobile abrir, um popup aparecer ou um acordeão de perguntas frequentes alternar é um exagero técnico (overkill). O site acaba processando megabytes de scripts sem necessidade real.

O custo de processamento em dispositivos móveis

Muitos criadores de sites testam suas páginas em computadores de última geração ou conexões de fibra óptica ultra-rápidas. Contudo, o seu cliente final geralmente acessa o site de um celular intermediário, muitas vezes conectado a redes 3G ou 4G oscilantes.

O JavaScript é o recurso mais "caro" para um smartphone processar. Ele não precisa apenas ser baixado; ele precisa ser descompactado, analisado (parsed) e executado pela CPU do aparelho. Se o site carrega pacotes de scripts gigantes, o celular do usuário sofrerá travamentos e lentidão na renderização inicial (métrica INP do Google).

A estruturação de acordeões nativos em Vanilla JavaScript

Em vez de importar pacotes prontos, interações nativas e eficientes são construídas de forma compacta. O código abaixo exemplifica um script limpo utilizado para alternar a exibição de respostas (FAQ) ou acordeões:

const accordionHeaders = document.querySelectorAll(".accordion-header");
accordionHeaders.forEach(header => {
  header.addEventListener("click", () => {
    const item = header.parentElement;
    item.classList.toggle("active");
  });
});

Conclusão: foco na experiência real

A programação em Vanilla JS permite a entrega de interatividade leve e perfeita, garantindo que o site seja carregado instantaneamente, mesmo em conexões de baixa qualidade. Menos códigos intermediários significam maior velocidade, menor taxa de rejeição nas campanhas de tráfego pago e melhor conversão para o negócio.