Vanilla JS x Bibliotecas/Frameworks

📦 O que é esse tal de Vanilla JS?

Você já ouviu falar em Vanilla JS? Esse é o nome "chique" que usamos para nos referir ao JavaScript puro, sem bibliotecas, frameworks ou qualquer ferramenta extra que se baseie nele.

Ou seja, quando falamos em Vanilla JS, estamos falando do JavaScript raiz, do jeitinho que ele sai do forno do navegador, pronto para ser usado sem nenhum tempero a mais.

Mesmo sendo uma linguagem extremamente poderosa — utilizada tanto no Front-End quanto no Back-End — no front-end o Vanilla JS tem um papel essencial: manipular o DOM (Document Object Model). Mas… como isso funciona na prática?

Chega mais! 👇

<p id="mensagem">Olá!</p>
<button onclick="mudarTexto()">Clique</button>

<script>
  function mudarTexto() {
    document.getElementById("mensagem").innerText = "Texto alterado com Vanilla JS!";
  }
</script>

Nesse exemplo, acessamos e modificamos diretamente um elemento HTML com JavaScript puro. Simples, direto e eficiente.

Mas o Vanilla JS também é capaz de tarefas mais complexas, como fazer requisições HTTP para consumir dados de APIs:

fetch("https://api.exemplo.com/dados")
  .then(response => response.json())
  .then(data => console.log(data));

E isso é só o começo. Vamos dar uma olhada rápida nas vantagens e desvantagens?

---

✅ Vantagens do Vanilla JS

• 🚀 Rápido para criar páginas simples

• 📦 Não exige bibliotecas ou dependências externas

• 🌍 Alta compatibilidade com todos os navegadores modernos

⚠️ Desvantagens do Vanilla JS

• 📉 Escalar grandes projetos pode ser complicado

• 🌀 O código pode virar uma bagunça sem organização

• 🛠️ Falta de estrutura e ferramentas modernas nativas

💡 E foi aí que tudo mudou...
Essas desvantagens fizeram com que devs e empresas do mundo todo percebessem algo importante: dava pra usar o poder do JavaScript de forma mais estruturada e produtiva.

Foi assim que nasceram as bibliotecas, como o React, e os frameworks, como o Next.js, trazendo soluções modernas para problemas clássicos do Vanilla JS — como gerenciamento de estado, roteamento, renderização no servidor e muito mais.

Então vamos falar um pouquinho do ReactJs?

O React nasceu através do Facebook, para resolver algumas limitações do Vanilla JS, principalmente em projetos mais robustos.

Vamos ver uma situação para entender melhor:

Imagine atualizar a interface de uma lista de itens ao clicar em um botão. Em Vanilla JS, você teria que:

1. Capturar eventos manualmente
2. Alterar o DOM "na unha"
3. Controlar o estado da aplicação por conta própria

Isso gera muito código imperativo, difícil de manter.

⚛️ O que o React traz de diferente?

O React traz uma abordagem declarativa e baseada em componentes:

jsx
function ListaDeTarefas({ tarefas }) {
  return (
    <ul>
      {tarefas.map((tarefa) => (
        <li key={tarefa.id}>{tarefa.nome}</li>
      ))}
    </ul>
  );
}`

Genial, não acha? Com isso, temos:

• Divisão da UI em componentes reutilizáveis
• Atualização do DOM com o Virtual DOM
• Melhor controle de estado da aplicação (com hooks como useState, useEffect, etc.)

📚 Parada do conhecimento

🧠 O que é esse tal de Virtual DOM?
Imagina que o DOM (Document Object Model) é como uma maquete da sua interface no navegador. Toda vez que algo muda — como um texto, uma cor ou um botão — o navegador precisa redesenhar partes dessa maquete.

💥 Com Vanilla JS, isso significa alterar o DOM diretamente... e isso pode ser lento quando há muitas mudanças!

Agora entra o herói da história:

⚡ Virtual DOM: o "rascunho" inteligente
O Virtual DOM é uma cópia leve e otimizada do DOM real que o React mantém na memória. Sempre que seu estado muda, o React:

1. Cria um novo Virtual DOM atualizado
2. Compara com o Virtual DOM anterior (diffing)
3. Aplica só as mudanças necessárias no DOM real (reconciliation)

🔍 Isso significa que o React não atualiza tudo o tempo todo, apenas o que realmente mudou.

📌 Analogia rápida:
✍️ DOM real = sua casa
📝 Virtual DOM = a planta baixa da casa

Em vez de sair quebrando paredes ao reformar, o React simula as mudanças no papel primeiro, e só depois executa no mundo real — com muito mais eficiência.

Então, o React é perfeito?

Certamente não. Mesmo sendo uma solução muito inteligente, o React traz algumas desvantagens:

❌ Desvantagens do React

• 🚚 Não é uma solução completa — você precisa configurar roteador, SSR, etc.
• 🧱 Estrutura livre demais: cada projeto acaba montando sua própria arquitetura
• 📦 Bundle inicial pesado se não for bem otimizado
• 🧪 Pode exigir ferramentas extras para testes e performance

Nem sempre a liberdade é uma solução perfeita.

🤔 É aí que os frameworks aparecem!

O Next.js é um framework baseado em React, criado para resolver justamente as limitações do React puro em produção.

Ele oferece uma estrutura completa pronta para produção, com foco em performance, SEO e organização. Essa estrutura facilita uma padronização, o que é muito importante para toda a comunidade DEV. Imagina você trocar de empresa e saber que a estrutura de código é a mesma? Seria bem mais fácil entender os processos e regras da aplicação, certo?

Mais especificamente, o que muda?

• 📄 Renderização no servidor (SSR) e renderização estática (SSG)
• 🚦 Roteamento automático baseado em arquivos (pages)
• 🪝 API integrada para back-end (/api)
• 🧵 Separação de código (code splitting) e lazy loading nativo
• 🔍 Melhor SEO e tempo de carregamento

— Ahh, entendi, então o Next.js é perfeito?

Calma Dev, nem tudo é um mar de rosas.

✅ Vantagens do Next.js

• 🧰 Solução fullstack pronta para produção
• ⏱️ Melhor tempo de carregamento e SEO (SSR/SSG)
• 🔀 Roteamento automático sem configuração extra
• 🧭 Diretório estruturado e organizado desde o início

❌ Desvantagens do Next.js

• 🧠 Curva de aprendizado maior que React puro
• 🔍 Mais regras e convenções a seguir (pages, app, layout, etc.)
• 📦 Build mais complexo em projetos grandes
• 🔒 Algumas abstrações podem dificultar o debugging

🧠 Conclusão

Cada ferramenta tem seu momento.

Vanilla JS é fundamental para entender os pilares do JavaScript e resolver problemas simples com agilidade e controle total.

React brilha quando queremos criar interfaces dinâmicas, modulares e interativas de forma escalável.

Next.js entra em cena quando o projeto cresce e precisamos de estrutura, performance, SEO e funcionalidades fullstack.

⚖️ Mas atenção: nem sempre precisamos começar com uma biblioteca ou framework. Em muitos casos, o bom e velho JavaScript puro resolve o problema com menos complexidade.

O mais importante é entender o "porquê" de cada escolha.

🔧 Usar React ou Next.js sem entender os fundamentos pode te tornar dependente da ferramenta. Por outro lado, ignorar as vantagens dessas tecnologias pode te fazer reinventar a roda.

Domine o Vanilla, entenda o React, explore o Next — e escolha a melhor ferramenta para o que o seu projeto precisa.

—

Gabs, desligando 👋