Más Allá del Marcado Estático

Hasta ahora, BookIt muestra el mismo contenido cada vez. Pero las aplicaciones reales necesitan comportamiento dinámico. Mostrar un formulario de inicio de sesión o un panel dependiendo del estado de autenticación. Mostrar una lista de servicios, no solo uno. Mostrar indicadores de carga mientras se obtienen datos. Aquí es donde entra el control de flujo.

Lo Que Aprenderás

Qué significa el control de flujo en la sintaxis de plantillas de Svelte
Los diferentes tipos de bloques que proporciona Svelte
Cuándo usar cada tipo de bloque
Cómo difiere el control de flujo de JavaScript

¿Qué es el Control de Flujo?

En JavaScript, usas if, else y for para controlar la ejecución del programa. En las plantillas de Svelte, necesitas algo similar pero para el renderizado. Svelte proporciona una sintaxis especial de bloques que te permite renderizar contenido de forma condicional e iterar sobre datos directamente en tu marcado.

A diferencia de JavaScript que se ejecuta una vez, los bloques de plantilla de Svelte son reactivos. Cuando los datos de los que dependen cambian, la salida renderizada se actualiza automáticamente.

Los Bloques de Control de Flujo de Svelte

Svelte proporciona cuatro bloques de plantilla principales para el control de flujo:

Bloque	Propósito	Caso de Uso
`{#if}`	Renderizado condicional	Mostrar formulario de inicio de sesión o panel
`{#each}`	Iteración de listas	Renderizar todos los servicios
`{#await}`	Manejo de datos asíncronos	Mostrar cargando → datos → error
`{#key}`	Forzar recreación	Reiniciar componente cuando cambia el ID

En este módulo, nos enfocaremos en {#if} y {#each} — los dos que usarás con mayor frecuencia. Encontrarás {#await} en el Módulo 9 al cargar datos del servidor, y {#key} en escenarios avanzados.

El Patrón de Sintaxis de Bloques

Todos los bloques de Svelte siguen el mismo patrón:

{#blockname expression}
  content
{/blockname}

El # inicia un bloque, / lo termina. Algunos bloques tienen etiquetas de continuación que usan : para ramas como {:else}.

Aquí hay una vista previa rápida de lo que aprenderás:

<!-- Conditional: show one thing or another -->
{#if isLoggedIn}
  <Dashboard />
{:else}
  <LoginForm />
{/if}

<!-- Iteration: render many items -->
{#each services as service}
  <ServiceCard {service} />
{/each}

¿Por Qué No Usar Simplemente JavaScript?

Quizás te preguntes por qué Svelte necesita una sintaxis especial. ¿Por qué no usar simplemente JavaScript?

<!-- This doesn't work in Svelte templates -->
<div>
  { if (isLoggedIn) { return <Dashboard /> } }
</div>

Las plantillas de Svelte no son JavaScript — son una descripción declarativa de tu UI. La sintaxis de bloques proporciona una forma limpia y legible de expresar el renderizado condicional e iterativo mientras se mantiene la reactividad.

Compara la legibilidad:

<!-- Svelte's approach: clear and declarative -->
{#if user}
  <p>Welcome, {user.name}!</p>
{:else}
  <p>Please log in.</p>
{/if}

<!-- Ternary alternative: gets messy fast -->
{user ? `<p>Welcome, ${user.name}!</p>` : '<p>Please log in.</p>'}

Para casos simples, puedes usar expresiones ternarias en Svelte. Pero a medida que las condiciones se vuelven complejas, la sintaxis de bloques se mantiene legible.

Control de Flujo en BookIt

A lo largo de este módulo, construirás estas funcionalidades de BookIt usando control de flujo:

Renderizado condicional:

Mostrar formulario de reserva o confirmación según el estado de envío
Mostrar contenido diferente por categoría
Manejar estados de carga y error

Iteración de listas:

Renderizar todos los servicios desde un arreglo
Mostrar el historial de reservas
Mostrar botones de filtro por categoría

Patrones combinados:

Filtrar servicios por categoría (condición + iteración)
Mostrar "sin resultados" cuando los filtros no coinciden con nada (condición dentro de iteración)

Cómo Progresa Este Módulo

Esto es lo que viene:

Renderizado Condicional — {#if}, {:else} y {:else if} para mostrar/ocultar contenido
Estados Vacíos — Manejar el caso de "nada que mostrar" de forma elegante
Bloques Each — Renderizar listas de elementos con {#each}
Each con Claves — Por qué los identificadores únicos importan en las listas dinámicas
Filtrar Servicios — Combinar todo en una visualización filtrada e interactiva

Al final, la página de servicios de BookIt mostrará una lista categorizada y filtrable con estados vacíos adecuados — todo construido con los primitivos de control de flujo de Svelte.

Un Vistazo Rápido

Aquí hay un anticipo de lo que construirás al final de este módulo:

<script>
  let selectedCategory = $state('all');
  
  const services = [
    { id: '1', name: 'Lawn Mowing', category: 'lawn-care', price: 50 },
    { id: '2', name: 'Tree Pruning', category: 'tree-care', price: 150 },
    // ... more services
  ];
  
  let filteredServices = $derived(
    selectedCategory === 'all'
      ? services
      : services.filter(s => s.category === selectedCategory)
  );
</script>

<!-- Category filter buttons -->
{#each categories as category}
  <button onclick={() => selectedCategory = category.id}>
    {category.name}
  </button>
{/each}

<!-- Filtered service list with empty state -->
{#if filteredServices.length > 0}
  {#each filteredServices as service (service.id)}
    <ServiceCard {service} />
  {/each}
{:else}
  <p>No services found in this category.</p>
{/if}

Las condiciones, los bucles y el estado derivado trabajan juntos para crear una interfaz dinámica y reactiva.

Resumen

Los bloques de control de flujo de Svelte te permiten renderizar contenido de forma condicional e iterar sobre datos directamente en las plantillas. La sintaxis es declarativa, legible y completamente reactiva — cuando los datos cambian, la UI se actualiza automáticamente.

Puntos clave:

{#if} maneja el renderizado condicional
{#each} maneja la iteración de listas
La sintaxis de bloques usa # para iniciar, / para terminar y : para las ramas
Los bloques de control de flujo son reactivos por defecto

Próximos Pasos

Comencemos con el patrón más común. Continúa con Renderizado Condicional para aprender {#if}, {:else} y {:else if} para mostrar y ocultar contenido.