Primeros pasos con Svelte

Los frameworks surgen de las necesidades del programador por crear aplicaciones cada vez más complejas, pero resulta que no solo las aplicaciones crecen en complejidad si no también lo hacen los frameworks. Sin embargo, Svelte es la excepción a la regla. Svelte busca la simpleicidad y lo demuestra desde el primer momento que lo usamos.

En este tutorial aprenderemos los conceptos básicos de Svelte. Daremos nuestros primeros pasos en este Frameworks hasta construir nuestros propios componentes.

Índice

  1. Qué es Svelte
  2. Creando un proyecto Svelte
  3. Estructura inicial de un proyecto Svelte
  4. Comprendiendo mejor Svelte
  5. Creando nuestro primer componente
  6. La reactividad en Svelte
  7. Enviando datos entre componentes

1. Qué es Svelte

Es un framework para crear interfaces de usuario. Su principal caracteristica es el uso de menos código. Además busca que usemos solo HTML, CSS y JavaScript para el desarrollo de nuestros proyectos. Pero quizá la caracteristica más importante es que Svelte compila el proyecto volviendolo JavaScript puro con HTML y CSS y de esta manera no necesita cargar librerias ni recursos adicionales.

2. Creando un proyecto Svelte

Para crear un proyecto en Svelte basicamente clonamos un repositorio de git usando el comando npx degit de la siguiente forma.

npx degit sveltjs/template my-app

Ahora para instalar las dependencias del proyecto usamos el siguiente comando pero después de haber ingresado al proyecto con la terminal.

npm install

Listo ahora ya tenemos nuestro proyecto para trabajar dentro de él. Pero si queremos correr el proyecto para ver la mágia de Svelte usamos el siguiente comando en la terminal.

npm run dev
A simple vista Svelte es quiza el framework que menos demora en instalar y tal vez el que menos archivos tiene inicialmente.

3. Estructura inicial de un proyecto Svelte

Ahora analicemos un poco los archivos que tenemos en este template o plantilla base.

  • El primer archivo que nos llama la atención es rollup.config.js. Este es un archivo que se encargará de compilar nuestro proyecto asi que despreocupate de él.
  • Por otro lado los archivos package.json, package-lock.json y .gitignore son archivos de metadatos del proyecto, metadatos de las dependencias y archivo de configuración de git, respectivamente.
  • Algunos archivos importantes están dentro de la carpeta src en el cual solo podremos ver por ahora el main.js que inicializa nuestro proyecto. Y también el archivo de nuestro primer componente o componente principal App.svelte.
  • La última carpeta que nos intereza es public. Esta carpeta contiene los archivos que expondremos al publicar nuestro proyecto.
Es una buena practica inicializar git en un proyecto nuevo independientemente si se subirá o no el proyecto a internet.

4. Comprendiendo mejor Svelte

Ahora ingresemos al archivo src/App.svelte. Este archivo tiene tres etiquetas importantes <script>, <main> y <style> donde colocaremos la lógica, la estructura y los estilos respectivamente. Para un mejor analisis eliminaremos los estilos de este componente y solo agregaremos un estilo para un elemento de este componente.

<script>
  export let name;
</script>

<main>
  <h1>Hello {name}!</h1>
  <p>
    Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn
    how to build Svelte apps.
  </p>
</main>

<style>
  h1 {
    color: red;
  }
</style>

Dentro del script solo exportamos una variable. Esto nos perimitirá darle valor a la variable dentro del archivo main.js usando la propiedad props. Luego, para mostrar cualquier variable dentro del HTML solo usamos {}.

Ahora analicemos main.js para entender mejor Svelte.

import App from "./App.svelte";

const app = new App({
  target: document.body,
  props: {
    name: "world",
  },
});
export default app;

Este archivo instancia el componente principal de Svelte en nuestra aplicación. Y como podemos ver al instanciar el componente le proporcionamos el lugar donde colocará la aplicación dentro de nuestro archivo public/index.html usando la siguiente propiedad target: document.body,.

Ahora veamos como funcionan los estilos en Svelte. Dentro del archivo App.svelte tenemos un apartado especial para los estilos. Sin embargo, estos estilos solo sirven para el componente donde están declarados. Para crear un estilo global debemos seguir la siguiente estructura.

:global(body) {
  background-color: #f2eee2;
  color: #0084f6;
}
Ten en cuenta que App es el componente padre de nuestra aplicación. Asi que dentro podemos crear los estilos globales de nuestra aplicación.

En Svelte también podemos declarar variables globales para los estilos. Para obtener variables globales los estilos deben ser declarados dentro de la siguiente estructura.

:global(:root) {
  --mi-color: purple;
}

Y para usar estas variables globales usamos la función var() con el nombre de la variable como en el siguiente ejemplo. Estas variables podemos usarlas dentro del estilo de cualquier componente.

p {
  color: var(--theme-color);
  font-size: 42px;
}

5. Creando nuestro primer componente

Para crear un componente en Svelte solo basta con crear un archivo .svelte. Pero, es una buena practica hacerlo dentro de una carpeta src/components y la primera letra del componente debe ser mayuscula.

La estructura del archivo svelte debe ser la siguiente.

<script></script>

<style></style>

<div class="nombre-componente"></div>

Como puedes ver en lugar de usar la etiqueta <main> para nuestra estructura usamos un <div> con el nombre de la clase igual que el nombre del componente.

Es recomendable usar CamelCase para nombrar nuestros componentes. No usar guiones ya que al momento de importar nuestro componente tendremos problemas. Además si usaremos librerias como Bootstrap los nombres de los componentes no deberian tener el mismo que alguna clase de Bootstrap, ya que la clase div de nuestro componente recibe el nombre del componente. Es conveniente usar un combre como HeaderComponent.

Ahora para poder colocar el nuevo componente dentro de nuestro componente principal App.svelte. Primero debemos importar el componente de la siguiente forma.

import NuevoComponente from "./components/NuevoComponente.svelte";

Ahora ya podemos hacer uso de este componente dentro de la estructura HTML usando una etiqueta HTML <NuevoComponente/>.

6. La reactividad en Svelte

La reactividad en Svelte funciona de manera directa y fácil. Si una variable JavaScript cambia dentro de un componente por medio de una función esta variable también cambia en la vista.

Para captar un evento en Svelte podemos usar la siguiente propiedad on:click={} dentro de un botón o algún otro elemento HTML. Además dentro de {} podemos usar código JavaScript como en el siguiente ejemplo.

<script>
  let count = 0;
  function aumentar() {
    count += 1;
  }
</script>
<style>
  h3 {
    color: blue;
  }
</style>
<div class="Componente">
  <button on:click="{aumentar}">Click {count === 0 ? '' : count}</button>
</div>

Sin embargo, si nuestra función recibe algún parametro no podemos colocar la función de la misma forma, ya que el on:click necesita de una referencia y no ejecutar la función. Si nosotros mandamos la función con el parentesis on:click={aumentar()} estamos ejecutando la función y no referenciandolo. Entonces para solucionar este problema usamos una función de flecha. De tal forma que referenciamos a la función flecha que que ejecutará lo que está dentro cuando el click es activado.

 <button on:click={()=>{aumentar()}}>Click</button>

7. Enviando datos entre componentes

En Svelte podemos enviar datos de un componente padre a un componene hijo de manera directa usando un atributo HTML personalizado. Primero debemos exportar la variable que recibiremos dentro del componente que recibirá el dato o valor.

<script>
  export let dato;
</script>
<style>
  h3 {
    color: blue;
  }
</style>
<div class="NuevoComponente">
  <h3>{dato}</h3>
</div>

Luego el componente padre debe enviar el dato hacia el nuevo componente hijo usando un atributo HTML.

<NuevoComponente dato="mensaje" />

De esta forma podemos pasar varios datos a la vez. Pero para abreviar un poco podemos crear un objeto con los datos que queremos pasar y pasar los argumentos por propagación. Pero ten en cuanta que al recibir los datos si debemos hacer los exports con las nombres de las variables respectivamente.

<script>
  let objDatos = {
    primerDato: "Primero",
    segundoDato: "Segundo",
    tercerDato: "Tercero",
  };
</script>
<main>
  <NuevoComponente {...objDatos} />
</main>

<script>
  // En el componente que recibe los datos
  export let primerDato;
  export let segundoDato;
  export let tercerDato;
</script>

Además podemos definir un valor por defecto a las variables, de tal manera que si el dato no es enviado, este tomará ese valor.

<script>
  export let primerDato = "1";
  export let segundoDato = "2";
  export let tercerDato = "3";
</script>

8. Condicionales y ForEach en Svelte

Para crear código HTML que se crea o se destruye dependiendo de una condicion en Svelte se necesita la siguiente estructura dentro del código HTML del componente.

<script>
  let darkMode = true;
</script>
<div class="component">
  {#if darkMode === true}
  <h1>MODO NOCHE</h1>
  {:else }
  <h1>MODO DIA</h1>
  {/if}
</div>

Por otro lado, para crear una estructura ForEach que repida algun elemento del HTML según una lista usamos la siguiente estructura dentro del código HTML del componente.

<script>
  numeros = ["uno", "dos", "tres"];
</script>
<div class="component">
  {#each numeros as num, i}
  <p>{i} - {num}</p>
  {/each}
</div>

9. Binding de datos en Svelte

Si lo que queremos es enalzar atributos de una etiqueta HTML con una variable del script lo que tenemos que usar es el binding o enlace de datos.

<script>
  let palabra = "AndyGeek";
</script>
<div class="component">
  <input type="text" bind:value="{palabra}" />
  <p>{palabra}</p>
</div>

10. Ciclo de vida en Svelte

Cada componente tiene un ciclo de vida, este inicia cuando se crea el componente y finaliza cuando se destruye. Asi que svelte nos provee de varios métodos que suceden en determinado momento del ciclo de vida de Svelte.

Uno de estos métodos es el onMount que es el método que se ejecuta después de que el componente se haya montado en la aplicación.

En el siguiente ejemplo usamos este método para traer imagenes desde un API justo despues de que el componente se monte para mostrarlo dentro de nuestro mismo componente.

import { onMount } from "svelte";
let photos = [];
onMount(async () => {
  console.log("onMount");
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/photos?_limit=20"
  );
  photos = await response.json();
});

11. Store de Svelte

Para usar el store en Svelte es necesario crear la carpeta y el archivo src/store/store.js donde colocaremos las variables que queremos usar de manera global de la siguiente manera.

import { writable } from "svelte/store";

export const count = writable(0);

Y para poder utilziar esa variable debemos hacerlo de la siguiente manera.

<script>
  import { count } from "../store/store.js";

  function clickMe() {
    count.update((n) => n + 1);
  }
</script>
<style></style>
<div class="HeaderComponent">
  <h1>El store es: {$count}</h1>
  <button on:click="{clickMe}">Click Me</button>
</div>