Aula 48 — Organização de Projetos JavaScript

Até aqui, já aprendemos a usar módulos, import e export. Agora é hora de responder uma pergunta muito importante:

“Como organizar tudo isso em um projeto real?”

Nesta aula, vamos aprender a estruturar arquivos e pastas de forma clara, lógica e profissional.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender por que organização é fundamental
• Estruturar pastas e arquivos JavaScript
• Separar responsabilidades corretamente
• Facilitar manutenção e crescimento do projeto
• Escrever código mais legível e profissional

Por que organização importa?

Em projetos pequenos, tudo parece funcionar bem em um único arquivo. Mas à medida que o projeto cresce, surgem problemas:

• Dificuldade para encontrar código
• Arquivos gigantes
• Funções misturadas
• Manutenção complicada

Organizar o projeto evita esses problemas antes mesmo que eles apareçam.

Pensando em responsabilidades

O primeiro passo é responder:

👉 “Qual é a responsabilidade deste código?”

Cada arquivo deve ter um propósito claro.

Estrutura básica de um projeto simples

Um projeto JavaScript simples pode ser organizado assim:

 /projeto │ ├── index.html └── js/ ├── main.js ├── api.js ├── dom.js └── utils.js 

• main.js → ponto de entrada do projeto
• api.js → comunicação com APIs
• dom.js → manipulação do DOM
• utils.js → funções auxiliares

O papel do main.js

O main.js é o cérebro da aplicação.

Ele:

• Importa funções de outros módulos
• Inicializa a aplicação
• Conecta as partes do sistema

Ele não deve conter toda a lógica.

Separando por tipo de lógica

Um erro comum é separar apenas por “tamanho”. O ideal é separar por tipo de responsabilidade.

• Lógica de dados → api.js
• Lógica de interface → dom.js
• Lógica genérica → utils.js

Exemplo prático: a organização acontecendo na prática

Para visualizar melhor essa separação por responsabilidade, vamos imaginar três arquivos simples, cada um cuidando de uma parte específica do projeto.

📦 api.js — Lógica de dados

Este arquivo cuida apenas da comunicação com APIs e dados externos.

 // api.js 
  export async function buscarUsuarios() 
  { 
    const response = await fetch("https://jsonplaceholder.typicode.com/users"); 
    const usuarios = await response.json();
    return usuarios;
  }

Repare que aqui não existe nenhuma manipulação de HTML — apenas dados.

🖥️ dom.js — Lógica de interface

Este arquivo cuida apenas de exibir informações na tela.

 // dom.js 
  export function renderizarUsuarios(usuarios) 
  { 
    const lista = document.getElementById("lista-usuarios");
    lista.innerHTML = "";
    usuarios.forEach(usuario => 
    {
      const item = document.createElement("li");
      item.textContent = usuario.name;
      lista.appendChild(item);
    });
  }

Aqui não sabemos de onde vêm os dados — apenas mostramos o que recebemos.

🧰 utils.js — Lógica genérica

Este arquivo contém funções auxiliares, reutilizáveis em várias partes do projeto.

 // utils.js export function capitalizarTexto(texto) { return texto.charAt(0).toUpperCase() + texto.slice(1); } 

Essa função não depende de API nem de DOM — ela pode ser usada em qualquer lugar.

🧠 E quem conecta tudo isso?

Esse papel fica com o main.js:

 
  // main.js 
  import 
  { 
    buscarUsuarios 
  } from "./api.js"; 
  import 
  { 
    renderizarUsuarios 
  } from "./dom.js";
  async function iniciarApp() 
  {
    const usuarios = await buscarUsuarios();
    renderizarUsuarios(usuarios);
  }
  iniciarApp();

Perceba como cada arquivo faz uma coisa só — e faz bem.

Pastas também ajudam

Em projetos maiores, podemos organizar ainda melhor:

 /js ├── api/ │ └── usuarios.js ├── dom/ │ └── render.js ├── utils/ │ └── formatar.js └── main.js 

Isso deixa o projeto ainda mais legível.

Organização ajuda no trabalho em equipe

Projetos bem organizados:

• São mais fáceis de entender
• Facilitam colaboração
• Reduzem bugs
• Aceleram manutenção

Mesmo que você trabalhe sozinho hoje, isso faz muita diferença no futuro.

Organização não é rigidez

Não existe uma única estrutura correta.

O mais importante é:

• Consistência
• Clareza
• Responsabilidade bem definida

Na próxima aula, vamos fechar esse bloco falando sobre boas práticas de código.