Padrões Arquiteturais em JavaScript: como não se afogar no código

Por que arquitetura não é sobre diagramas chatos

Imagine que você está construindo uma casa. Você pode simplesmente empilhar tijolos, despejar concreto e torcer para que a estrutura não desabe. Ou pode projetar a fundação, as paredes estruturais e as lajes. No desenvolvimento JavaScript é a mesma coisa: sem uma arquitetura bem pensada, seu projeto se transforma em "código espaguete", onde alterar uma função quebra toda a aplicação.

Padrões arquiteturais não são teoria seca de livros. São esquemas de batalha comprovados que ajudarão você a:

• Não enlouquecer quando o projeto crescer para 50.000 linhas de código.
• Encontrar bugs rapidamente, porque o código está dividido em blocos lógicos.
• Adicionar funcionalidades sem medo de quebrar algo.

Neste artigo, vamos analisar cinco padrões principais para aplicações JavaScript: do clássico MVC à abordagem modular. Vamos lá!

MVC (Model-View-Controller): o avô de todos os padrões

MVC é o padrão ouro do desenvolvimento web. O padrão divide a aplicação em três camadas:

• Model — dados e lógica de negócio (CRUD, validação).
• View — interface que o usuário vê (HTML, renderização).
• Controller — intermediário: recebe requisições do usuário e atualiza o Model ou a View.

Veja como fica no código:

// Modelclass UserModel {    constructor() {        this.users = [];    }

    addUser(user) {        this.users.push(user);    }

    getUsers() {        return this.users;    }}

// Viewclass UserView {    render(users) {        const list = document.getElementById('user-list');        list.innerHTML = users.map(u => `<li>${u.name}</li>`).join('');    }}

// Controllerclass UserController {    constructor(model, view) {        this.model = model;        this.view = view;    }

    addUser(name) {        this.model.addUser({ name, id: Date.now() });        this.view.render(this.model.getUsers());    }}

// Usoconst model = new UserModel();const view = new UserView();const controller = new UserController(model, view);controller.addUser('Alice');controller.addUser('Bob');

Quando usar MVC em JavaScript? Ideal para SPAs (aplicações de página única) médias e grandes. Mas cuidado: se a View depender muito do Model, o padrão se transforma em "Massive View Controller" — o controller incha desnecessariamente.

MVP (Model-View-Presenter): o supervisor rigoroso

MVP é uma evolução do MVC, onde o Presenter assume toda a lógica de controle da View. Diferente do MVC, a View no MVP é uma camada passiva e "burra". Ela apenas exibe dados e repassa eventos para o Presenter.

// Model (o mesmo do MVC)class UserModel {    constructor() {        this.users = [];    }    addUser(user) { this.users.push(user); }    getUsers() { return this.users; }}

// View — interface passivaclass UserView {    constructor() {        this.list = document.getElementById('user-list');        this.addButton = document.getElementById('add-btn');    }

    bindAddUser(handler) {        this.addButton.addEventListener('click', () => {            const name = prompt('Digite o nome:');            if (name) handler(name);        });    }

    render(users) {        this.list.innerHTML = users.map(u => `<li>${u.name}</li>`).join('');    }}

// Presenter — o cérebro da aplicaçãoclass UserPresenter {    constructor(model, view) {        this.model = model;        this.view = view;        this.view.bindAddUser(this.handleAddUser.bind(this));        this.view.render(this.model.getUsers());    }

    handleAddUser(name) {        this.model.addUser({ name, id: Date.now() });        this.view.render(this.model.getUsers());