Boas Práticas e Arquitetura 🏛️

Aula 13 - Escrevendo código de nível Profissional

🏗️ Por que Arquitetura Importa?

• Código sem padrão vira "espaguete" rapidamente
• Dificulta a entrada de novos desenvolvedores
• Torna a manutenção um pesadelo (e cara!)

📏 Single Responsibility (SOLID)

• Um componente deve fazer apenas uma coisa
• Se o seu componente tem 500 linhas e 10 funções diferentes...
• Hora de quebrar em pedaços menores!

📁 Organização de Pastas (Enterprise)

• src/api: Instâncias do Axios e chamadas
• src/components/common: Botões, Modais, Inputs
• src/components/features: Componentes de negócio específicos
• src/composables: Lógica reativa reutilizável
• src/stores: Pinia Stores

🛠️ O Poder dos Composables

• Extrair lógica do componente para uma função pura reativa
• Ex: useAuth, useFetch, usePagination
• Facilita testar a lógica sem precisar renderizar a interface

🧩 Prop Drilling: O Vilão

• Passar dados por componentes "meio de campo" que não usam o dado
• Solução: Use Pinia para dados globais ou provide/inject para dados de contexto específico

🗣️ Nomenclatura Padrão

• Componentes: PascalCase (CarrinhoCompras.vue)
• Eventos: kebab-case (@finalizar-compra)
• Variáveis reativas: camelCase (listaProdutos)

🛡️ Defesa com Props

• Sempre valide suas props
• Use required: true para o que é essencial
• Forneça default para o que é opcional
• Isso evita erros de undefined no template

🧹 Clean Code no Template

• Evite lógica complexa dentro do HTML
• Se você tem {{ item.preco * 0.9 + taxa }}...
• Use uma Computed Property! É mais limpo e rápido.

📊 Estrutura de Fluxo Sugerida

graph TD
    View[Página/View] --> Service[API Service]
    View --> Store[Pinia Store]
    Store --> Service
    View --> Component[Componente Pequeno]

🔍 Code Style e Linting

• Use ESLint e Prettier
• Padronize se usa aspas simples ou duplas, ponto e vírgula, etc.
• O time todo escreve igual = leitura mais rápida

💂‍♂️ Tipagem (TypeScript intro)

• O Vue 3 foi feito para TypeScript
• Tipar objetos e funções evita quebra de contrato
• "O erro aparece enquanto você digita, não quando o usuário clica"

🚀 Performance: Lazy Loading

• Não importe todos os componentes no topo do arquivo se eles só aparecem sob condição
• Use a função defineAsyncComponent para carregar apenas quando necessário

🏗️ Desafio da Aula

• Analisar um projeto antigo e identificar "God Components" (gigantes)
• Refatorar uma lógica de cálculo para uma Computed
• Extrair uma funcionalidade para um Composable

🏁 Resumo

• Dividir para conquistar (Componentização)
• Extrair lógica para Composables
• Seguir padrões de nomenclatura e organização

🏁 Dúvidas?

Bom código a todos! Próxima aula: Estilização Moderna.