Arquitetura frontend: Organize e escalone seu código

Rocketseat

3 min de leitura

Navegação Rápida:

Arquitetura clássica

Arquitetura modular

Feature Sliced Design (FSD)

Comparativo entre arquiteturas

Conclusão

Há alguns anos, quando comecei a desenvolver projetos frontend, percebi a importância de uma boa arquitetura para manter o código organizado, escalável e de fácil manutenção.

A arquitetura frontend não se trata apenas de "organizar pastinhas" – ela define como os componentes interagem, como a lógica de negócio se separa da interface e como garantimos escalabilidade e manutenibilidade ao longo do tempo. Ao final deste artigo, você estará apto a escolher a melhor arquitetura para seus projetos e evitar os temidos “monstros de código”. Além disso, entenderá os prós e contras de cada abordagem, permitindo que tome decisões mais assertivas no desenvolvimento de aplicações frontend.

Arquitetura clássica

A arquitetura clássica é a forma mais intuitiva de começar para muitos(as) desenvolvedores(as). Geralmente, o projeto é estruturado em diretórios como:


/my-app
  /components
  /pages
  /helpers
  /services

Essa abordagem pode parecer suficiente para pequenos projetos, mas com o crescimento do código, problemas começam a surgir:

Alta interdependência: componentes dependem excessivamente uns dos outros.

Dificuldade de manutenção: encontrar arquivos se torna um desafio.

Lógica espalhada: regras de negócio misturadas dentro de componentes.

Essa estrutura natural pode levar a problemas de acoplamento, dificultando a refatoração do código e comprometendo sua escalabilidade. Isso significa que, conforme a aplicação cresce, fica cada vez mais difícil modificar ou reutilizar partes do código sem afetar outras funcionalidades inesperadamente.

Exemplo prático

Imagine um botão de ação simples em um projeto frontend:


// components/Button.js
export const Button = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

Agora, ao utilizá-lo em uma página:


// pages/HomePage.js
import { Button } from "../components/Button";

const HomePage = () => {
  const handleClick = () => alert("Clicado!");
  return <Button label="Clique Aqui" onClick={handleClick} />;
};

O problema dessa abordagem surge quando o projeto cresce e os componentes começam a depender uns dos outros de forma desordenada. Por exemplo, se esse botão for atualizado para incluir novos estilos ou funcionalidades, várias páginas podem ser afetadas, dificultando a manutenção e introduzindo bugs inesperados.

Para resolver esse problema e estruturar melhor o código, podemos adotar a Arquitetura modular.

Arquitetura modular

A arquitetura modular busca dividir a aplicação em módulos independentes, cada um encapsulando sua lógica e disponibilizando uma API clara. Ou seja, cada módulo define quais partes são acessíveis externamente, promovendo o encapsulamento e evitando o uso de detalhes internos. A estrutura se parece com:


/my-app
  /pages
  /modules
    /auth
    /dashboard
  /shared

Aqui, cada módulo cuida da sua própria lógica, garantindo:

Menos dependência entre partes do sistema.

Reutilização e organização mais claras.

Exemplo prático


// modules/auth/LoginForm.js
export const LoginForm = () => {
  return (
    <form>
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Senha" />
      <button type="submit">Entrar</button>
    </form>
  );
};


// pages/LoginPage.js
import { LoginForm } from "../modules/auth/LoginForm";

const LoginPage = () => {
  return <LoginForm />;
};

Esse modelo melhora a organização do código e facilita a reutilização. Agora, se quisermos usar um componente de um módulo dentro de outro, basta importá-lo:


// modules/dashboard/Dashboard.js
import { LoginForm } from "../auth/LoginForm";

export const Dashboard = () => {
  return (
    <div>
      <h1>Bem-vindo ao Dashboard</h1>
      <LoginForm />
    </div>
  );
};

Se quisermos evoluir ainda mais a modularização, podemos adotar a Arquitetura Feature Sliced Design (FSD).

Feature Sliced Design (FSD)

O Feature Sliced Design (FSD) é uma abordagem moderna que organiza o projeto por funcionalidades, garantindo maior escalabilidade, separação de responsabilidades e flexibilidade. Sua estrutura segue um padrão claro:


/my-app
  /app
  /pages
  /features
  /entities
  /shared

A estrutura do Feature Sliced Design pode ser visualizada assim:

Neste diagrama, podemos observar como o FSD estrutura um projeto em três grandes grupos: Layers, Slices e Segments. As Layers definem as diferentes camadas do sistema, os Slices segmentam as funcionalidades por contexto de negócio, e os Segments organizam os componentes dentro de cada slice de forma modular. — Neste diagrama, podemos observar como o FSD estrutura um projeto em três grandes grupos: **Layers**, **Slices** e **Segments**. As **Layers** definem as diferentes camadas do sistema, os **Slices** segmentam as funcionalidades por contexto de negócio, e os **Segments** organizam os componentes dentro de cada slice de forma modular.

Princípios do FSD

O FSD se baseia em alguns conceitos fundamentais:

Separação por funcionalidades: em vez de organizar o código por camadas técnicas, ele é dividido por features.

Baixo acoplamento: cada funcionalidade tem suas próprias dependências, evitando interferências entre diferentes partes do projeto.

Alta coesão: os elementos relacionados a uma mesma funcionalidade permanecem agrupados, tornando a manutenção mais intuitiva.

Exemplo prático


// features/auth/ui/LoginForm.js
export const LoginForm = () => (
  <form>
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Senha" />
    <button type="submit">Entrar</button>
  </form>
);

Comparativo entre arquiteturas

Arquitetura	Vantagens	Desvantagens	Facilidade de Teste	Curva de Aprendizado	Indicado Para
Clássica	Fácil de iniciar	Se torna caótica em projetos grandes	Baixa	Baixa	Pequenos projetos
Modular	Melhor separação de responsabilidades	Pode ser mal implementada	Média	Média	Projetos de médio porte
FSD	Altamente escalável e organizada	Exige curva de aprendizado	Alta	Alta	Grandes aplicações

Conclusão

Escolher a arquitetura correta para seu projeto é essencial para garantir escalabilidade, manutenibilidade e produtividade. Agora é a sua vez de colocar a mão na massa e construir projetos incríveis!