A Armadilha do Copiar e Colar

No final do Módulo 2, adicionamos navegação a cada página copiando o mesmo HTML. Funcionou, mas é um desastre de manutenção esperando para acontecer. Vamos entender o porquê.

O Que Você Vai Aprender

Por que repetir código entre páginas é problemático
O custo real da inconsistência
Como os layouts resolvem o problema de repetição

O Estado Atual do BookIt

Agora, cada página do BookIt tem a navegação adicionada manualmente:

<!-- src/routes/+page.svelte -->
<nav>
  <a href="/">BookIt</a>
  <a href="/services">Services</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<h1>Welcome to BookIt</h1>
<!-- ... rest of homepage ... -->

<!-- src/routes/services/+page.svelte -->
<nav>
  <a href="/">BookIt</a>
  <a href="/services">Services</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<h1>Our Services</h1>
<!-- ... rest of services page ... -->

<!-- src/routes/about/+page.svelte -->
<nav>
  <a href="/">BookIt</a>
  <a href="/services">Services</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<h1>About BookIt</h1>
<!-- ... rest of about page ... -->

O mesmo bloco de navegação aparece em todos os arquivos.

O Que Pode Dar Errado?

Imagine estes cenários:

Adicionar uma nova página. Você cria uma página /pricing. Agora você precisa adicionar um link "Pricing" à navegação. Isso significa editar cada arquivo de página individualmente. Esquecer um, e aquela página terá uma navegação desatualizada.

Corrigir um erro de digitação. O link do logo diz "BookIt" mas deveria dizer "BookIt Pro". Cinco páginas para atualizar. Ou dez. Ou cinquenta.

Mudar o design. O marketing quer a navegação em uma ordem diferente, com ícones. Você vai atualizar o mesmo HTML em dezenas de arquivos.

A inconsistência vai se infiltrando. Diferentes desenvolvedores fazem mudanças diferentes. A Página A tem a nova navegação, a Página B tem a antiga, a Página C tem um híbrido estranho. Os usuários têm uma experiência quebrada.

O Princípio DRY

O desenvolvimento de software tem um princípio DRY - Don't Repeat Yourself (Não Se Repita). Quando o mesmo código aparece em vários lugares, ele deve ser extraído para um único local.

Benefícios do DRY:

Um único lugar para fazer alterações
Impossível que as cópias fiquem fora de sincronia
Menos código para manter
Menos bugs causados por atualizações inconsistentes

O oposto — WET (Write Everything Twice, ou Escreva Tudo Duas Vezes) — leva aos problemas que acabamos de descrever.

O Que Precisamos

Precisamos de uma maneira de definir a UI compartilhada (como navegação e rodapé) uma única vez e fazê-la aparecer automaticamente em todas as páginas. Quando a atualizarmos, todas as páginas receberão a atualização.

É exatamente isso que os layouts do SvelteKit oferecem.

Como os Layouts Funcionam (Prévia)

Em vez de colocar a navegação em cada página, você a coloca em um arquivo especial chamado +layout.svelte. Esse arquivo envolve todas as páginas naquele nível de rota:

src/routes/
├── +layout.svelte    ← Shared UI goes here
├── +page.svelte      ← Homepage (wrapped by layout)
├── services/
│   └── +page.svelte  ← Services (wrapped by layout)
├── about/
│   └── +page.svelte  ← About (wrapped by layout)
└── contact/
    └── +page.svelte  ← Contact (wrapped by layout)

O layout renderiza a navegação e, em seguida, renderiza o conteúdo da página onde você especificar. Altere o layout uma vez, e todas as páginas são atualizadas.

Resumo

Copiar código entre arquivos cria encargos de manutenção e riscos de inconsistência. O princípio DRY nos diz para extrair o código compartilhado para um único local. Os layouts do SvelteKit foram criados exatamente para essa finalidade.

Principais conclusões:

Código repetido precisa ser atualizado em vários lugares
Inconsistências inevitavelmente se infiltram ao longo do tempo
Os layouts permitem que você defina a UI compartilhada uma única vez

Próximos Passos

Agora que você entende o problema, vamos resolvê-lo. Continue com Crie Seu Primeiro Layout para criar um arquivo +layout.svelte para o BookIt.