La reactividad es un concepto fundamental en el desarrollo de interfaces modernas, y Svelte nos ofrece una forma muy sencilla y directa de aprovecharla para que nuestra aplicación responda automáticamente a los cambios en los datos. Cuando interactuamos con elementos como campos de texto, queremos que la interfaz se actualice en tiempo real, reflejando lo que el usuario está haciendo sin necesidad de recargar o refrescar manualmente.
Para entender mejor cómo funciona esto en Svelte, podemos empezar por gestionar eventos. En particular, el evento keyup es muy útil porque se dispara cada vez que soltamos una tecla después de presionarla. Esto nos permite capturar el momento exacto en que el usuario ha modificado el contenido de un campo de texto.
Imaginemos que tenemos un input de tipo texto con un placeholder que invita a introducir un nombre. Para capturar lo que el usuario escribe, añadimos un manejador de eventos con on:keyup que llama a una función, por ejemplo handle. Esta función recibe un parámetro que representa el evento en sí, y dentro de este objeto podemos acceder a mucha información útil, como la tecla que se ha pulsado o el elemento que disparó el evento.
<script>
let nombre = "";
function handle(event) {
const valor = event.target.value;
nombre = valor;
}
</script>
<input type="text" placeholder="Pon aquí tu nombre" on:keyup={handle} />
<p>Hola {nombre}</p>
En este código, cada vez que el usuario suelta una tecla, la función handle se ejecuta y actualiza la variable nombre con el valor actual del input. Gracias a la reactividad de Svelte, al cambiar nombre, el párrafo que muestra Hola {nombre} se actualiza automáticamente, reflejando en tiempo real lo que el usuario está escribiendo.
Además, podemos aprovechar esta reactividad para mostrar información derivada, como el número de caracteres que el usuario ha introducido. Esto es muy común en aplicaciones que limitan la longitud del texto o simplemente quieren dar feedback inmediato.
<p>Tu nombre tiene {nombre.length} caracteres</p>
Así, conforme escribimos, el contador se incrementa o decrementa sin que tengamos que hacer nada extra.
Es importante destacar que el objeto evento que recibimos en la función handle no es exclusivo de Svelte, sino que proviene de la API estándar del DOM. Esto significa que podemos acceder a propiedades como event.target, que apunta al elemento que disparó el evento, y a event.key o event.keyCode para saber qué tecla se pulsó.
Este enfoque nos permite construir interfaces muy dinámicas y reactivas con poco código, aprovechando la capacidad de Svelte para detectar cambios en variables declaradas con let y actualizar la interfaz en consecuencia.
En resumen, la reactividad en Svelte consiste en que cuando modificamos una variable que está vinculada a la interfaz, esta se actualiza automáticamente. Al combinar esto con la gestión de eventos, podemos crear experiencias de usuario fluidas y en tiempo real, como un saludo que cambia mientras escribimos o un contador de caracteres que se actualiza al instante.