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 según el estado de autenticación. Mostrar una lista de servicios, no solo uno. Mostrar indicadores de carga mientras se obtienen los datos. Aquí es donde entra el flujo de control.

Lo que Aprenderás

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

¿Qué es el Flujo de Control?

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 provee 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 sola vez, los bloques de plantilla de Svelte son reactivos. Cuando los datos de los que dependen cambian, la salida renderizada se actualiza automáticamente.

Bloques de Flujo de Control de Svelte

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

Bloque	Propósito	Caso de Uso de Ejemplo
`{#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 carga → 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 más frecuencia. Te encontrarás con {#await} en el Módulo 9 al cargar datos del servidor, y con {#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 cierra. Algunos bloques tienen etiquetas de continuación usando : 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 Solo 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 provee una forma limpia y legible de expresar el renderizado condicional e iterativo, manteniendo al mismo tiempo 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 más complejas, la sintaxis de bloques sigue siendo legible.

Flujo de Control en BookIt

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

Renderizado condicional:

Mostrar el formulario de reserva o la 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 a continuación:

Renderizado Condicional — {#if}, {:else} y {:else if} para mostrar/ocultar contenido
Estados Vacíos — Maneja el caso de "nada que mostrar" de forma elegante
Bloques Each — Renderiza listas de elementos con {#each}
Each con Clave — Por qué los identificadores únicos son importantes para las listas dinámicas
Filtrar Servicios — Combina 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 apropiados — todo construido con las primitivas de flujo de control de Svelte.

Un Vistazo Rápido

Aquí hay un adelanto 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 flujo de control 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 cerrar y : para las ramas
Los bloques de flujo de control 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.