Pular para conteúdo

Aula 13: Arquitetura e Organização Profissional 🏗️

Nesta aula, vamos aprender como estruturar projetos Angular de grande escala seguindo os padrões utilizados pelas maiores empresas de tecnologia.

📁 Padrão LIFT

O Angular recomenda o padrão LIFT: * Locate: Localizar o código rapidamente. * Identify: Identificar o que o arquivo faz pelo nome. * Flat: Manter uma estrutura o mais plana possível (sem pastas infinitas). * Try to be DRY: Evite repetições desnecessárias.

🏛️ Estrutura de Pastas Recomendada

Um projeto profissional geralmente divide as responsabilidades em três pilares:

  1. Core: Serviços globais, interceptores e guards (singleton).
  2. Shared: Componentes visuais genéricos (botões, inputs), pipes e diretivas reutilizáveis.
  3. Features: As funcionalidades do negócio (ex: login, vendas, perfil).
graph TD
    App[src/app] --> Core[core/]
    App --> Shared[shared/]
    App --> Features[features/]
    Features --> Login[login/]
    Features --> Products[products/]

🏷️ Convenções de Nomeclatura

O Angular CLI segue o padrão de kebab-case com sufixos descritivos: * usuario-header.component.ts * auth.service.ts * valida-email.directive.ts

Dica de Ouro

Mantenha cada arquivo com uma única responsabilidade (Single Responsibility Principle). Se um componente tem 1000 linhas, ele deve ser quebrado!

📦 Barrel Files (index.ts)

Para evitar dezenas de linhas de import no topo dos arquivos, usamos arquivos index.ts que exportam tudo de uma pasta.

// features/products/index.ts
export * from './product-list.component';
export * from './product-detail.component';
export * from './product.service';

🧱 Smart vs Dumb (Revisited)

Em arquiteturas profissionais: * Smart Components ficam na pasta features/. * Dumb Components ficam na pasta shared/ ou dentro da pasta de uma feature específica se não forem genéricos.

🚀 Prática: Refatoração de Arquitetura

Vamos reorganizar nosso projeto bagunçado! 1. Crie as pastas core, shared e features. 2. Mova os serviços de autenticação para core. 3. Crie um componente de botão estilizado dentro de shared. 4. Organize as páginas existentes dentro de features.

🏁 Mini-Projeto da Aula

Desenhe um diagrama de pastas para um sistema de E-commerce que contenha: Autenticação, Catálogo, Carrinho e Perfil do Usuário. Aplique os conceitos de Core, Shared e Features.