Diego López

Desarrollador web, DJ y productor

Por qué mola tanto Svelte

Sintaxis muy sencilla

Esto es lo que más me gusta de Svelte, su sintaxis. VueJS 🚧 ya me gustaba también porque me resultaba más simple que Angular 🚧 y React 🚧, pero es que Svelte es todavía más simple.

En Svelte 🚧 no te tienes que preocupar de importar funciones para hacer variables reactivas, ni de hacer cosas raras para crear props para un componente, el código que escribes es Javascript como si no usaras framework.

Lo único extraño es la sintaxis con el símbolo del dólar para crear variables que dependen de otra de forma reactiva, aunque los de Svelte aseguran que es sintaxis válida de Javascript me sigue resultando extraña.

Veamos el típico ejemplo de componente que pinta un número y que aumenta de forma reactiva al pulsar un botón:

<script>
  let count = 0;
  
  function handleClick() {
    count += 1;
  }
</script>

<button on:click={handleClick}>clicks: {count}</button>

Como ves es muy muy simple, en cualquier otro framework tendrías que escribir mucho más código para hacer lo mismo, y encima se entiende muy fácil. El código HTML sí que es algo distinto, pero porque en este tipo de librerías viene muy bien tener sistema de templating para no mezclar HTML con JS como en JSX.

Lo que mola también es que los componentes se dividen en 3 partes o lenguajes (al estilo Vue), es decir: HTML, CSS y Javascript. Esto ayuda mucho a la hora de encontrar el código ya que no lo tienes todo mezclado como en JSX (en React por ejemplo).

No usa virtual DOM

Frameworks como React y Vue usan un sistema llamado virtual DOM para poder actualizar el HTML desde el código Javascript (por ejemplo cuando cambiamos variables reactivas).

Lo bueno de Svelte es que no usa virtual DOM, y digo que es bueno porque eso quiere decir que las actualizaciones de partes del DOM se hacen de forma mucho más precisa y eficiente.

Las librerías suelen usar el virtual DOM para abstraerse de la actualización del DOM y porque normalmente esta técnica tiene un rendimiento suficiente.

Más info sobre el virtual DOM y Svelte en este artículo

CSS aislado

Esto es otra cosa que también tiene Vue y que incluso tienen los webcomponents nativos y es el tema de aislar los estilos de un componente para que no sean afectados por los estilos del componente padre.

Esto tiene la ventaja de que los componentes que insertes siempre se van a ver igual ya que no te van a pillar por error otros estilos que tengas en otros componentes.

Cuando necesitas que un componente se vea de maneras distintas lo que se suele hacer es variants, es decir, pasar props al componente para definir de qué estilo lo queremos, por ejemplo en botones:

<script>
  export let isPrimary = true;
  export let isTransparent = false;
  export let size = "md";
</script>

Lenguaje compilado

Aunque el código que escribes es lo más parecido a HTML, CSS y Javascript, realmente por debajo lo que está pasando es que se está compilando a código Javascript. Esto tiene la ventaja de que el compilador de Svelte sabe el código que has escrito y su uso y por tanto el código resultado está bastante optimizado y ocupa muy poco.

Lo bueno también es que el propio compilador te puede avisar de código que está mal escrito o que no funciona en tiempo de desarrollo. Encima el compilador de Svelte mola mucho porque te avisa incluso de problemas de accesibilidad con tu código.

Por ejemplo se limpia hasta el código CSS (aunque esto no me gusta demasiado), es decir, si metes estilos que luego en el componente no se usan, Svelte los elimina del bundle final para que el código ocupe lo menos posible.

El store de Svelte también es sencillo

Si vienes de usar Vue o React fijo que te suenan los sistemas de store como Redux o Vuex. Pues bien, Svelte viene con los stores ya incluídos, sin que tengas que instalar nada extra.

Además su uso es muy simple, declaras una variable como reactiva en un fichero, la exportas y desde donde quieras la cambias o la lees, mucho más sencillo que en otros lenguajes.

Por ejemplo creando el fichero store.js

import { writable } from 'svelte/store';

export const count = writable(0);

Luego desde el componente simplemente haces:

<script>
  import { count } from './stores.js';
  
  function increment() {
    count.update(n => n + 1);
  }
</script>

<button on:click={increment}>Increment</button>

Contraargumento

Obviamente Svelte no son todo ventajas, también tiene sus desventajas, por eso he escrito también este artículo sobre Qué cosas no me gustan de Svelte para que decidas por ti mismo si te gusta o si no.