Solicitar demonstraçãoDemonstração

Desenvolva uma aplicação da web MEAN

Entenda a stack MEAN (MongoDB, Express, Angular e Node.js), como as peças se conectam, como organizar o projeto e quando ela é a melhor escolha.

Witcode ·

MEAN é a sigla para quatro tecnologias usadas juntas na construção de aplicações web: MongoDB, Express, Angular e Node.js. A vantagem mais citada é usar uma única linguagem, JavaScript (ou TypeScript), do banco de dados à tela do usuário.

Neste artigo você vai entender o papel de cada peça, como elas conversam e quando essa combinação faz sentido.

As quatro peças

MongoDB é um banco de dados orientado a documentos. Em vez de tabelas com colunas fixas, ele guarda documentos em formato parecido com JSON, agrupados em coleções. Isso dá flexibilidade para dados que variam de um registro para outro.

Express é um framework minimalista para criar servidores HTTP em Node.js. Ele cuida de rotas, middlewares e respostas, e serve de base para a API da aplicação.

Angular é um framework de front-end mantido pelo Google. Usa TypeScript, organiza a interface em componentes e já traz roteamento, formulários e cliente HTTP prontos.

Node.js é o ambiente que executa JavaScript no servidor. É nele que o Express roda.

Uma observação sobre AngularJS

Os primeiros tutoriais de MEAN usavam o AngularJS, a versão original do framework. Ele foi substituído pelo Angular moderno, reescrito do zero, e não recebe mais suporte. Projetos novos devem usar o Angular atual. Se você encontrar material antigo com ng-controller e $scope, saiba que é outra tecnologia.

Como as peças se encaixam

O fluxo de uma requisição costuma ser assim:

  1. O usuário interage com a tela em Angular.
  2. O Angular faz uma chamada HTTP para a API.
  3. O Express, rodando no Node.js, recebe a chamada e aplica as regras de negócio.
  4. A API consulta ou grava dados no MongoDB.
  5. A resposta volta em JSON para o Angular, que atualiza a tela.

Como o formato JSON é usado em todas as etapas, há pouca conversão de dados entre camadas.

Estrutura de projeto

Uma organização comum separa front-end e back-end em pastas distintas:

meu-projeto/
  api/
    src/
      models/
      routes/
      server.js
    package.json
  web/
    src/app/
    angular.json
    package.json

Cada parte tem suas dependências e pode ser publicada separadamente. Em produção, o Angular gera arquivos estáticos que podem ser servidos por qualquer servidor web, enquanto a API roda como um processo Node.js.

Um endpoint mínimo com Express e MongoDB

O exemplo abaixo usa o driver oficial do MongoDB para Node.js. A string de conexão vem de uma variável de ambiente, nunca escrita direto no código.

import express from "express";
import { MongoClient } from "mongodb";

const app = express();
app.use(express.json());

const cliente = new MongoClient(process.env.MONGODB_URI);
await cliente.connect();
const tarefas = cliente.db("app").collection("tarefas");

app.get("/api/tarefas", async (req, res) => {
  const lista = await tarefas.find().sort({ criadaEm: -1 }).toArray();
  res.json(lista);
});

app.post("/api/tarefas", async (req, res) => {
  const { titulo } = req.body;
  if (!titulo) return res.status(400).json({ erro: "Título é obrigatório" });

  const tarefa = { titulo, concluida: false, criadaEm: new Date() };
  const resultado = await tarefas.insertOne(tarefa);
  res.status(201).json({ _id: resultado.insertedId, ...tarefa });
});

app.listen(3000, () => console.log("API em http://localhost:3000"));

No Angular, um serviço com HttpClient consome essas rotas, e um componente exibe a lista. Muitas equipes também usam o Mongoose, uma biblioteca que adiciona esquemas e validação sobre o MongoDB.

Cuidados antes de ir para produção

Quando MEAN faz sentido

A stack funciona bem quando a equipe já domina JavaScript ou TypeScript, quando os dados têm formato variável e quando a aplicação é rica em interação, como painéis administrativos e sistemas internos. O Angular é uma boa escolha para projetos grandes, porque impõe uma estrutura padronizada.

Alternativas

MERN troca o Angular pelo React. O React é uma biblioteca mais enxuta e dá mais liberdade de escolha, o que agrada quem prefere montar o próprio conjunto de ferramentas. Também existe a variação com Vue.

Bancos relacionais como PostgreSQL e MySQL são mais adequados quando os dados têm muitas relações, quando há transações financeiras ou quando a integridade entre tabelas é essencial. Nada impede usar Express e Angular com um banco SQL; a sigla deixa de ser MEAN, mas a arquitetura continua parecida.

A melhor stack é a que resolve o problema e que a equipe consegue manter.

E na sua empresa?

Escolher a combinação certa de tecnologias faz diferença no custo e na manutenção de um sistema ao longo dos anos. Se você está pensando em uma aplicação web sob medida para o seu negócio, fale com a Witcode.

Qual parte da sua empresa pode funcionar melhor?

Conte sua necessidade. A Witcode ajuda você a encontrar a solução.

Encontre seu software

Seus dados serão usados para este contato. Privacidade