La Trampa del Copiar y Pegar

Al final del Módulo 2, agregamos navegación a cada página copiando el mismo HTML. Funcionó, pero es un desastre de mantenimiento esperando suceder. Veamos por qué.

Lo que Aprenderás

Por qué repetir código en distintas páginas es problemático
El costo real de la inconsistencia
Cómo los layouts resuelven el problema de la repetición

El Estado Actual de BookIt

En este momento, cada página de BookIt tiene la navegación agregada 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 ... -->

El mismo bloque de navegación aparece en cada archivo.

¿Qué Podría Salir Mal?

Imagina estos escenarios:

Agregar una nueva página. Creas una página /pricing. Ahora necesitas agregar un enlace de "Pricing" a la navegación. Eso significa editar cada archivo de página. Si te pierdes uno, esa página tendrá una navegación desactualizada.

Corregir un error tipográfico. El enlace del logo dice "BookIt" pero debería decir "BookIt Pro". Cinco páginas para actualizar. O diez. O cincuenta.

Cambiar el diseño. Marketing quiere la navegación en un orden diferente, con íconos. Estás actualizando el mismo HTML en docenas de archivos.

La inconsistencia se va acumulando. Distintos desarrolladores hacen distintos cambios. La Página A tiene la navegación nueva, la Página B tiene la antigua, la Página C tiene una combinación extraña. Los usuarios experimentan una interfaz rota.

El Principio DRY

El desarrollo de software tiene un principio DRY - Don't Repeat Yourself (No te Repitas). Cuando el mismo código aparece en múltiples lugares, debería extraerse a una única ubicación.

Beneficios del principio DRY:

Un solo lugar para hacer cambios
Imposible que las copias queden desincronizadas
Menos código que mantener
Menos bugs por actualizaciones inconsistentes

Lo opuesto — WET (Write Everything Twice, Escribe Todo Dos Veces) — lleva a los problemas que acabamos de describir.

Lo que Necesitamos

Necesitamos una forma de definir UI compartida (como la navegación y el pie de página) una sola vez y que aparezca automáticamente en cada página. Cuando la actualicemos, todas las páginas recibirán la actualización.

Esto es exactamente lo que proveen los layouts de SvelteKit.

Cómo Funcionan los Layouts (Vista Previa)

En lugar de poner la navegación en cada página, la colocas en un archivo especial llamado +layout.svelte. Este archivo envuelve todas las páginas en ese nivel de ruta:

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)

El layout renderiza la navegación y luego renderiza el contenido de la página donde tú lo especifiques. Cambia el layout una vez, y todas las páginas se actualizan.

Resumen

Copiar código en múltiples archivos crea cargas de mantenimiento y riesgos de inconsistencia. El principio DRY nos dice que extraigamos el código compartido a una única ubicación. Los layouts de SvelteKit están diseñados exactamente para este propósito.

Conclusiones clave:

El código repetido debe actualizarse en múltiples lugares
Las inconsistencias inevitablemente se van acumulando con el tiempo
Los layouts te permiten definir UI compartida una sola vez

Próximos Pasos

Ahora que entiendes el problema, vamos a resolverlo. Continúa con Crea tu Primer Layout para construir un archivo +layout.svelte para BookIt.