Arquitetura selecionada
Feature Sliced Design
Feature Sliced Design organiza o código em camadas como app, pages, widgets, features, entities e shared. Cada slice representa uma parte de produto com regras de dependência bem definidas.
Estrutura de pastas
Navegue pelos arquivos para ver como a arquitetura aparece no código.
export const appProviders = [
provideRouter(routes),
provideHttpClient(),
];Prós
- Define regras claras de dependência entre camadas.
- Escala bem em produtos com muitas features.
- Ajuda a padronizar organização sem prender tudo em camadas técnicas.
Contras
- Tem vocabulário próprio e curva de aprendizado.
- Pode parecer rígida para projetos pequenos.
- Requer disciplina para respeitar direção de dependências.
Quando usar
- Produtos grandes com muitas áreas de UI.
- Times que querem uma convenção forte para slices e camadas.
- Frontends onde feature-first puro começou a ficar inconsistente.
Exemplo real
Um marketplace com pages, widgets de vitrine, features de carrinho e entities de produto, vendedor e pedido.
Cenário prático
A página de produto fica em `pages/product`, o bloco de recomendações em `widgets/recommendations`, a ação de adicionar ao carrinho em `features/add-to-cart` e o modelo de produto em `entities/product`.
Como implementar
- Use camadas como `app`, `pages`, `widgets`, `features`, `entities` e `shared`.
- Organize cada camada em slices com API pública clara.
- Respeite a direção de dependência: camadas superiores podem depender das inferiores, não o contrário.
Cuidado comum
Misturar imports internos de slices quebra o encapsulamento e transforma a convenção em apenas nomes de pasta.