Svelte: el framework de JavaScript basado en compilador

¿Qué es Svelte?

Svelte es un framework para crear interfaces de usuario en la web. Escribes componentes en HTML, CSS y JavaScript, y el compilador de Svelte los convierte en JavaScript ligero y optimizado durante la compilación. En lugar de enviar un runtime que compara un DOM virtual, Svelte genera código de actualización específico. SvelteKit es su framework complementario para aplicaciones completas.

Cómo funciona Svelte

Un archivo .svelte contiene marcado, estilos limitados al componente y un script. En la compilación, el compilador lo analiza y emite código que actualiza solo las partes de la página que dependen del estado que cambió. Rich Harris, creador de Svelte, lo resumió así: Svelte es un compilador que sabe en tiempo de compilación cómo pueden cambiar las cosas en tu app. En la práctica se compila con Vite, directamente o a través de SvelteKit.

Runes en Svelte 5

Svelte 5 introdujo los runes, símbolos con prefijo $ que controlan el compilador y no necesitan import. $state declara estado reactivo, $derived calcula un valor a partir de otro estado y $effect ejecuta efectos secundarios, por ejemplo tras actualizarse el DOM. Svelte 5 sigue admitiendo la sintaxis de Svelte 4 y se pueden mezclar componentes viejos y nuevos, así que la migración puede ser gradual.

<script>
  let count = $state(0);
  let double = $derived(count * 2);
</script>

<button onclick={() => count++}>
  {count} x 2 = {double}
</button>

El compilador reescribe cada referencia a count como una operación de señal, de modo que lees y escribes la variable con normalidad, sin .value.

Errores comunes

• Mezclar reactividad antigua y nueva. Las sentencias $: y los runes se comportan distinto. Un componente en modo runes sigue las reglas nuevas, por ejemplo las props solo son enlazables con $bindable.
• Abusar de $effect. Si un valor se puede calcular desde otro estado, usa $derived. La guía de migración dice que es lo adecuado la mayoría de las veces.
• Esperar que las instancias de clase sean reactivas. $state convierte en proxy objetos simples y arrays, no instancias de clase. Pon $state en los campos de la clase.
• Confundir Svelte con SvelteKit. Svelte renderiza componentes. El enrutado, el renderizado en el servidor y la carga de datos vienen de SvelteKit.

Cómo probar y monitorizar una app Svelte

La documentación de Svelte recomienda Vitest para pruebas unitarias y de componentes si usas Vite, con Testing Library para componentes, y Playwright para pruebas de extremo a extremo, que no conocen Svelte y trabajan sobre el DOM. Si un sitio Svelte se renderiza en el servidor y luego se hidrata, comprueba también el flujo real en un navegador. Para una introducción, mira qué es Playwright. Antes del lanzamiento, LoadFocus load testing muestra cómo se comportan tu servidor y tus APIs bajo tráfico. En producción, LoadFocus API monitoring comprueba endpoints de forma programada y, en los planes de pago, ejecuta checks de navegador con Playwright. Compara enfoques en monitorización sintética frente a monitorización de usuarios reales.

Preguntas frecuentes

¿Svelte usa un DOM virtual?

No. Su creador lo describe como un compilador que sabe en tiempo de compilación cómo pueden cambiar las cosas, así que emite código de actualización del DOM específico en lugar de comparar dos árboles virtuales en ejecución.

¿Qué son los runes de Svelte?

Son símbolos con prefijo $ como $state, $derived y $effect que controlan el compilador. Llegaron con Svelte 5.

¿Svelte es lo mismo que SvelteKit?

No. Svelte es el framework de componentes. SvelteKit es el framework de aplicaciones para enrutado, renderizado en el servidor y apps full stack.

¿Puedo seguir usando la sintaxis de Svelte 4?

Sí. La guía de migración dice que Svelte 5 sigue admitiendo la sintaxis antigua y permite mezclarla con runes.

¿Cómo pruebo una app Svelte de extremo a extremo?

Con una herramienta de navegador como Playwright. Controla el DOM real, así que funciona igual con Svelte que con cualquier otro framework.