Primeros pasos con Svelte JS

¿Qué es Svelte?

Svelte es un framework de JavaScript que ha ganado popularidad en 2022 debido a su enfoque único en la construcción de aplicaciones web.

Al contrario de Vue o React, que usan una arquitectura basada en componentes, Svelte utiliza un enfoque basado en el estado. Esto significa que los desarrolladores pueden declarar variables y luego utilizarlas en el código HTML para controlar la interfaz de usuario.

Esto facilita la creación de aplicaciones complejas, ya que todo el estado se encuentra en un solo lugar y es fácil de seguir.

Svelte también ofrece una sintaxis amigable para crear componentes reutilizables, que pueden ser importados y utilizados en diferentes partes de la aplicación. Además, el framework incluye características avanzadas como animaciones y transiciones, las cuales son fáciles de implementar.

En comparación con React y Vue, Svelte tiene una curva de aprendizaje más baja, ya que no requiere un conocimiento previo sobre cómo funciona un sistema de gestión de estado.

También es más ligero en tamaño, lo que lo hace ideal para proyectos pequeños o aplicaciones web de baja complejidad.

Veamos algunos ejemplos

Interpolación de variables

Un ejemplo de uso muy sencillo de Svelte podría ser la creación de un contador de clics.

<script>
    let count = 0;

    function increment() {
        count += 1;
    }
</script>

<button on:click={increment}>
    Click me! {count}
</button>

En este ejemplo, se declara una variable count con un valor inicial de 0. Luego se define una función increment() que incrementa el valor de count en 1.

La función increment() se asigna al evento on:click del botón, lo que significa que cada vez que el usuario haga clic en el botón, se llamará a la función increment() aumentando en 1 el valor de count.

Finalmente, el valor de count se muestra en el botón utilizando la sintaxis de interpolación de Svelte {count}.

Reactividad

Svelte tiene un enfoque único y muy sincillo para la reactividad.

<script>
  let name = "world";
</script>

<h1>Hello {name}!</h1>

<input bind:value={name}>

Aquí, la variable "name" está vinculada al valor del elemento de entrada mediante bind:value. Cualquier cambio en el valor del elemento de entrada también cambiará el valor de la variable "name" y, por lo tanto, actualizará automáticamente el contenido del elemento "h1" para mostrar el nuevo valor.

Transiciones

Svelte ofrece una variedad de opciones para trabajar con transiciones. Algunas de las opciones más comunes incluyen:

transition:fade: agrega un efecto de desvanecimiento al aparecer o desaparecer el elemento.
transition:slide: agrega un efecto de deslizamiento al aparecer o desaparecer el elemento. transition:scale: agrega un efecto de escala al aparecer o desaparecer el elemento.

<script>
  let show = false;
</script>

{#if show}
  <div transition:fade>
    This content will fade in and out.
  </div>
{/if}

<button on:click={() => show = !show}>
  toggle
</button>

Además de estas transiciones predefinidas, también se pueden crear transiciones personalizadas utilizando CSS. Para hacerlo, se puede utilizar el atributo use: para vincular una hoja de estilos personalizada a una transición.

<style>
  .fade-in-out {
    transition: opacity 1s;
  }
  .fade-in-out-enter {
    opacity: 0;
  }
  .fade-in-out-enter-active {
    opacity: 1;
  }
  .fade-in-out-leave {
    opacity: 1;
  }
  .fade-in-out-leave-active {
    opacity: 0;
  }
</style>

<div class="fade-in-out" use:fade-in-out>
    This content will fade in and out.
</div>

En este ejemplo se crea una clase css "fade-in-out" para la transición, con las clases css "fade-in-out-enter" para el estado de entrada y "fade-in-out-leave" para el estado de salida, y se vincula con la transición utilizando el atributo use:fade-in-out.

En general, Svelte es un framework moderno y potente para desarrollar aplicaciones web interactivas, puedes conocer algo más de él en su página oficial svelte.dev