Aula 14 - Boas Práticas e Arquitetura Frontend 🏛️

Objetivo

Objetivo: Elevar o nível do seu código frontend aplicando princípios de Clean Code, organizando seu projeto de forma profissional e garantindo que sua aplicação seja fácil de escalar e manter.

1. Organização de Pastas Profissional 📂

À medida que o seu app cresce, colocar tudo em src vira um caos. Uma arquitetura padrão ajuda a equipe a se localizar.

Estrutura Sugerida:

src/lib/: Componentes reutilizáveis (botões, inputs, cards).
src/routes/: Componentes que representam páginas inteiras.
src/stores/: Arquivos de gerenciamento de estado global.
src/assets/: Imagens, fontes e CSS global.
src/utils/: Funções auxiliares (formatadores de data, validadores).

$ ls -F src/
assets/
components/
routes/
stores/
utils/
App.svelte
main.js

2. Arquitetura de Projeto Svelte (Mermaid) 📊

graph TD
    A[App.svelte] --> R[Routes]
    R --> P1[Home.svelte]
    R --> P2[Perfil.svelte]
    P1 --> C[Components /lib]
    P2 --> C
    C --> S[Stores]
    P1 --> S
    P2 --> S

3. Padronização de Código (Naming) ✏️

Componentes: Use PascalCase.svelte (ex: UserCard.svelte).
Variáveis e Funções: Use camelCase (ex: let isLoading = true).
Stores: Use nomes descritivos (ex: authStore.js).
Pastas: Use kebab-case ou camelCase (ex: user-profile/).

4. Separação de Interesses (SOC) 🧠

Evite colocar lógica pesada de JavaScript dentro do HTML. Se uma função tem mais de 10 linhas, considere movê-la para um arquivo .js separado na pasta utils.

Princípio DRY

Don't Repeat Yourself: Se você está copiando e colando o mesmo código em três componentes, transforme esse código em um componente reutilizável ou em uma função utilitária.

5. Dica de Performance: Lazy Loading 💻

Não carregue tudo de uma vez. Carregue apenas o que o usuário vai ver.

// Exemplo de carregamento dinâmico de componente (conceitual)
const MeuComponentePesado = async () => (await import('./Pesado.svelte')).default;

6. Mini-Projeto: Refatorando o Caos 🚀

Sua missão: 1. Pegue o código de um dos mini-projetos anteriores. 2. Mova as funções de formatação de data ou moeda para um arquivo src/utils/formatters.js. 3. Mova o componente principal para src/routes/Main.svelte. 4. Certifique-se de que todos os imports continuam funcionando. 5. O App.svelte agora deve ser apenas o "orquestrador", importando o roteador ou o componente principal.

Dica

Um componente "limpo" deve ser lido como um livro. O <script> conta a história (lógica), o markup mostra a cena (estrutura) e o <style> dá o tom (aparência).

7. Exercício de Fixação 📝

Por que devemos separar componentes em uma pasta lib ou components?
O que significa o acrônimo SoC (Separation of Concerns)?
Como o Clean Code ajuda no trabalho em equipe em um projeto frontend?

Próxima Aula: Hora de colocar o site no ar! Build, Deploy e Produção! 🚀