Diego López

Desarrollador web, DJ y productor

Qué cosas no me gustan de Svelte

Comunidad y adopción

Por desgracia Svelte 🚧 no es tan popular y conocido como VueJS 🚧 o Angular 🚧, y mucho menos como React. Aunque también hay que decir que no es ultra desconocido, tiene su pequeña comunidad y en aumento.

Lo curioso es que en la encuesta anual de State of Javascript los resultados dicen que Svelte es de los frameworks con más retención e interés. Obviamente lo que dice una encuesta no es la realidad, pero nos sirve para hacernos una idea.

Yo he preguntado a gente que ha trabajado en Svelte y me dicen que están muy contentos, que no lo cambian, pero que por desgracia el mercado es como es y que ahora mismo lo que está dominando es React.

Yo también pienso que sí, que React tiene muchas oportunidades laborales, pero también vas a tener más competencia. Si sale una oferta de Svelte y eres el único que te presentas puede que tengas más posibilidades que con React, el problema es que salga una oferta con Svelte.

Resultados de la encuesta de State of Javascript

Captura de pantalla de la encuesta de State of Javascript, en concreto de la pregunta de librerías, Svelte aparece la primera seguido de Solid

No tiene sistema propio de routing

Yo vengo de trabajar con Vue, y tiene su propio módulo oficial para trabajar con rutas de la página, pero Svelte no tiene uno oficial. Con el router de Vue puedes definir cada ruta en un fichero de rutas para hacer corresponder urls con componentes, incluso puedes crear rutas dinámicas (con ids por ejemplo) o navegar a ellas desde código, muy útil.

Pero Svelte no tiene y por tanto te toca usar SvelteKit 🚧 sí o sí. SvelteKit 🚧 digamos que es el Nuxt 🚧 de Svelte, es decir sirve para hacer Server Side Rendering, y por tanto es normal que sí que venga con router.

En Vue si quieres una SPA muy simple pues no usas Nuxt, usas el módulo de routing y ya. Con SvelteKit también hay que decir que lo puedes configurar para que funcione en modo SPA, pero eso, ya es una capa más sobre Svelte no es tan simple y directo como en Vue.

Clases CSS que no aplican desde componente el hijo al padre

Este es un caso muy particular que tiene Vue y que me gusta mucho. Resulta que al crear dos componentes, uno dentro del otro, desde el componente padre puedes indicar una clase al componente y esa clase se añade a las que ya tenga el componente hijo. Esto mola mucho cuando quieres dar algún estilo de posicionamiento o algo así al componente hijo y no quieres crear otra etiqueta HTML en el DOM que envuelva al componente.

En Svelte esto no se puede hacer. Bueno, miento, se puede hacer una ñapa para que funcione, pero la tienes que hacer en cada componente. Resulta que desde el componente hijo puedes acceder a las clases que pasas dese el padre mediante {$$restProps.class || ''}, aquí el ejemplo de esta ñapa

Mi opinión es que esto debería ser implementado igual que en Vue, ya que es bastante habitual querer meter una clase desde el padre a la etiqueta del componente hijo.

Aquí hay un issue con esta misma propuesta para añadirse a Svelte, pero parece que está cerrado.

Ahora que lo pienso, no sé si se podría resolver esto creando un plugin para el compilador de Svelte.

Autolimpieza de código CSS

Esto es algo positivo de Svelte y a la vez algo que me parece negativo, y es la autolimpieza de CSS. Esto mola porque si por casualidad te dejas estilos que no se usan Svelte te los limpa del código final. Pero no mola porque no se puede desactivar y a veces te limpia cosas que no quieres.

Caso concreto, haciendo una web metí una implementación con polyfill de las futuras container media queries, para poder meter estilos dependiendo del tamaño del contenedor.

Como Svelte no sabía que estaba haciendo eso, el compilador limpiaba todos los estilos de las container queries.

Aquí tengo que decir que por suerte Svelte tiene la posibilidad de añadir :global() en los estilos y dentro la clase para que no te la limpie, pero a mi me gusta que el CSS sea como CSS nativo y no tener que usar esa sintaxis.

Además yo prefiero que Svelte no limpie el CSS, para forzarme a controlar bien mis estilos y no dejarme cosas sin usar en el código, ya que el compilador de Svelte limpia las clases pero no te dice qué cosas ha quitado y por tanto no te enteras y las dejas en el código.

Falta de pipes

Esto es algo que empecé a usar en Angular y que también usaba en Vue, y es una sintaxis para poder transformar variables antes de pintarlas en el HTML, la sintaxis es muy sencilla porque es como las pipes de Linux, simplemente con el símbolo | puedes encadenar funciones para transformar los datos, por ejemplo:

{{ users | valid | unique }}

En Svelte si quieres hacer eso te toca crear una variable reactiva (o no, dependiendo )para luego pintarla en el HTML:

<script>
  import {unique, valid } from "./users.js";
  
  export let users = [];

  $: usersPrinted = unique(valid(users))
</script>

Como ves la sintaxis es mucho más farragosa y tienes que andar creando variables y transformarlas para poder pintarlas.

Sistema de templating con elementos fuera de las etiquetas

Esto es algo muy personal. Viniendo de Vue me gusta más su sintaxis de templating para el HTML ya que el código que escribes es todo HTML. Svelte por desgracia usa elementos fuera de las etiquetas, por ejemplo para definir bucles o condicionales.

Ejemplos:

{#each cats as name}
  <li>{i + 1}: {name}</li>
{/each}

{#if user.loggedIn}
  <button on:click={toggle}>
    Log out
  </button>
{/if}

Tengo que decir que muchas veces he pensado que así es mejor porque ves antes dónde están los bucles y los condicionales, pero como a mí me gusta que el HTML sea lo más cercano a HTML vanilla, me gustan que solo haya etiquetas HTML, como en Vue.

Contraargumento

Aunque aquí he puesto las cosas que menos me gusta de Svelte, tengo que decir que Svelte es actualmente el framework para Frontend 🚧 que más me gusta, es sencillo, fácil de aprender, tiene buen rendimiento, etc

Por qué mola tanto Svelte