Un Framework Diferente

Estás a punto de construir BookIt — una aplicación de reserva de servicios donde los clientes pueden explorar servicios, hacer reservaciones y gestionar sus citas. Pero antes de escribir cualquier código, entendamos la herramienta que vamos a usar para construirlo.

Svelte no es como otros frameworks de JavaScript. Mientras que React y Vue envían un runtime a los navegadores de tus usuarios, Svelte realiza su trabajo pesado en tiempo de compilación. Esta diferencia fundamental define todo sobre cómo construirás BookIt.

Lo Que Aprenderás

Cómo Svelte difiere de los frameworks de runtime como React y Vue
Qué significa "compiler-first" en la práctica
Por qué Svelte produce aplicaciones más pequeñas y rápidas
Cómo SvelteKit extiende Svelte para aplicaciones completas

El Problema del Runtime

La mayoría de los frameworks de JavaScript funcionan de la misma manera: tu navegador descarga el código del framework, luego el framework determina qué renderizar y cómo actualizarlo cuando las cosas cambian.

Aquí está el flujo típico con un framework de runtime:

El navegador descarga el código de tu aplicación
El navegador descarga el framework (React: ~40KB, Vue: ~33KB)
El framework se inicializa y lee las definiciones de tus componentes
El framework construye una representación virtual de tu UI
Cuando el estado cambia, el framework compara la UI virtual antigua y la nueva
El framework calcula las actualizaciones mínimas del DOM necesarias
El framework aplica esas actualizaciones

Eso es mucho trabajo sucediendo en los navegadores de tus usuarios — trabajo que es esencialmente el mismo para cada aplicación que usa ese framework.

El Enfoque de Svelte

Svelte invierte este modelo. En lugar de enviar un framework que interpreta tu código en runtime, Svelte compila tus componentes a JavaScript estándar en tiempo de compilación.

Cuando escribes un componente Svelte, el compilador lo analiza y genera código altamente optimizado que sabe exactamente cómo actualizar el DOM cuando el estado cambia. Sin diffing de DOM virtual. Sin overhead del framework. Solo actualizaciones quirúrgicas del DOM.

Así es como se ve el flujo de Svelte:

Tú escribes componentes Svelte
El compilador de Svelte los transforma en JavaScript optimizado
El navegador descarga solo el código compilado de tu aplicación
Tu código actualiza el DOM directamente cuando el estado cambia

La idea clave: toda esa lógica de "determinar qué cambió" se mueve del runtime al tiempo de compilación. Tus usuarios no pagan por ello.

Lo Que Esto Significa para BookIt

Cuando construimos BookIt, este enfoque de compilador nos da beneficios concretos.

Bundles más pequeños. El JavaScript que enviamos contiene solo lo que BookIt necesita — sin runtime del framework. Una aplicación Svelte típica envía 3-5KB de código del framework frente a los 30-40KB de React.

Inicio más rápido. Menos JavaScript significa menos que descargar, analizar y ejecutar. BookIt será interactivo más rápido.

Modelo mental más simple. Los componentes Svelte se parecen a HTML con superpoderes. Escribes lo que parece HTML, CSS y JavaScript estándar, y el compilador se encarga de la reactividad.

Aquí hay una vista previa de cómo se ve un componente Svelte simple:

<!-- filename: ServiceCard.svelte -->
<script>
  let { name, price } = $props()
</script>

<div class="card">
  <h3>{name}</h3>
  <p>${price}</p>
</div>

<style>
  .card {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
</style>

Eso es un componente completo. El {name} y el {price} en el HTML son reactivos — cuando cambian, Svelte actualiza solo esos nodos de texto. Sin algoritmo de diffing, sin reconciliación. El compilador generó código que dice "cuando name cambie, actualiza este nodo de texto específico."

Svelte vs SvelteKit

Verás ambos términos a lo largo de este curso. Aquí está la distinción:

Svelte es el framework de componentes y compilador. Maneja componentes de UI, reactividad y estilos.

SvelteKit es el framework de aplicaciones construido sobre Svelte. Agrega enrutamiento, renderizado del lado del servidor, carga de datos, manejo de formularios y todo lo demás que necesitas para una aplicación web completa.

Piénsalo así: Svelte es para construir componentes, SvelteKit es para construir aplicaciones. BookIt es una aplicación SvelteKit compuesta de componentes Svelte.

Usaremos SvelteKit desde el principio porque BookIt necesita enrutamiento (diferentes páginas para servicios, reservaciones, etc.), carga de datos (obtener servicios de una base de datos) y manejo de formularios (enviar solicitudes de reservación). SvelteKit proporciona todo esto de manera integrada.

Svelte 5: La Última Versión

Este curso usa Svelte 5, la última versión principal lanzada a finales de 2024. Svelte 5 introdujo los "runes" — una nueva forma de manejar la reactividad que es más explícita y poderosa que las versiones anteriores.

Si has visto tutoriales antiguos de Svelte, es posible que notes algunas diferencias de sintaxis. Los conceptos fundamentales siguen siendo los mismos, pero los runes de Svelte 5 te dan más control y mejor soporte para TypeScript.

No te preocupes si no has usado versiones anteriores — aprenderemos Svelte 5 desde cero. Y si ya has usado Svelte antes, los nuevos patrones te resultarán familiares después de las primeras lecciones.

Resumen

Svelte es un compilador que transforma tus componentes en JavaScript optimizado en tiempo de compilación. En lugar de enviar un runtime del framework para interpretar tu código en el navegador, Svelte genera código que sabe exactamente cómo actualizar el DOM.

Puntos clave:

Svelte compila los componentes en tiempo de compilación, no en runtime
Esto produce bundles más pequeños y aplicaciones más rápidas
SvelteKit agrega enrutamiento, carga de datos y características de aplicación completa
Estamos usando Svelte 5 con la nueva sintaxis de runes

Próximos Pasos

Ahora que entiendes qué hace diferente a Svelte, pongámoslo a trabajar. En la próxima lección, Crea el Proyecto BookIt, crearemos el andamiaje de nuestra aplicación SvelteKit y veremos la estructura de archivos con la que trabajaremos a lo largo de este curso.