Aula 14 - Arquitetura e Boas Práticas 🏗️

Criando Apps Escaláveis e Mantíveis

Agenda de Hoje 📅

1. Por que arquitetura importa?
2. Organização de Pastas Profissional
3. Componentes Burros vs Inteligentes
4. Svelte Actions (use:action)
5. Clean Code aplicado ao Svelte
6. Prática: Refatoração de Código

1. O Caos do "Código Macarrão" 🍝

• À medida que o app cresce, tudo fica bagunçado.
• Difícil de encontrar arquivos.
• Difícil de testar.
• Solução: Arquitetura de Componentes.

2. Organização Sugerida 📂

• src/lib/components/: Componentes genéricos (Botão, Input).
• src/lib/features/: Lógicas específicas (Login, Carrinho).
• src/lib/services/: Chamadas de API (fetch).
• src/lib/stores/: Estado Global.
• src/lib/utils/: Funções auxiliares (datas, moedas).

3. Tipos de Componentes 🧬

3.1 Componentes Inteligentes (Smart)

• Gerenciam estado.
• Fazem chamadas de API.
• Conectados às Stores.

3.2 Componentes Burros (Dumb)

• Apenas recebem dados via props.
• Apenas emitem eventos para o pai.
• Extremamente fáceis de testar e reutilizar.

4. Svelte Actions: use:action 🛠️

• Permitem manipular o elemento DOM diretamente.
• Perfeito para bibliotecas externas (ex: máscaras de input).

export function clickOutside(node) {
  const handleClick = (e) => {
    if (!node.contains(e.target)) {
      node.dispatchEvent(new CustomEvent('outclick'));
    }
  };
  document.addEventListener('click', handleClick);
  return {
    destroy() { document.removeEventListener('click', handleClick); }
  };
}

5. Clean Code no Svelte ✨

• Nomes de Componentes: PascalCase (ex: MenuPrincipal.svelte).
• Small is Beautiful: Se um componente tem mais de 200 linhas, talvez deva ser dividido.
• Desestruturação: Use {...props} com cautela.

6. Camadas da Aplicação 🥞

graph TD
    UI[Interface / Componentes] --> Logic[Lógica / Actions / Stores]
    Logic --> Data[Dados / Services / API]
    Data --> Remote[Servidor Externo]

7. Performance: Menos é Mais 🚀

• Evite re-renderizações desnecessárias.
• Use immutable: true no compilador se for necessário.
• Prefira CSS nativo a frameworks pesados sempre que possível.

8. Prática: Refatorando o Dashboard 🛠️

• Pegue um componente que faz "tudo" (API + Lista + Estilo).
• Extraia a chamada de API para a pasta services/.
• Extraia cada item da lista para um componente Card.svelte.

9. Resumo da Aula ✅

• Separe UI de Lógica.
• Use Actions para manipular o DOM.
• Organização de pastas poupa tempo e dinheiro.

Próxima Aula: Build e Produção 🚀

• Otimização com Vite.
• Variáveis de ambiente (.env).
• Hospedagem (Vercel/GitHub Pages).

Dúvidas? 🤔

"A arquitetura é a arte de planejar hoje o que será mantido amanhã."