El término ‘JavaScript fatigue’ resume el pesar general entre los desarrolladores web y estado anímico y mental en el que vivimos quienes trabajamos en ecosistemas basados en JavaScript por la multitud de herramientas y frameworks que han surgido en los últimos años, y que te hacen sentir que cuando estás cómodo y dominas una de ellas irrumpe una nueva que es parcialmente similar pero sobradamente diferente y que te lleva de nuevo a la casilla de salida. Así una y otra vez. Esto puede sonar y ser frustrante pero en el fondo es evolución y cambio que siempre es positivo. Pero hoy no vamos a hablar de esto sino de Svelte, uno de los últimos actores en este juego.

Svelte (adj. esbelto/a) es una herramienta para construir interfaces de usuario orientada a componentes que en los últimos años ha ganado mucha popularidad y aunque no tiene la legión de seguidores que tiene Angular, React o Vue, es buen momento para analizarla y ver qué le diferencia de las anteriores.

Entre sus características principales, destacan:

  • Es un compilador

  • No utiliza Virtual DOM

  • Reactividad

  • Encapsula el CSS en los componentes

Es un compilador

La principal diferencia respecto a otras herramientas es que Svelte no realiza el trabajo en el navegador sino en el compilador, porque Svelte es un compilador y optimizador de JavaScript capaz de generar bundles (paquetes) muy pequeños al trasladar la complejidad al compilador en lugar de realizar el grueso de las tareas en el navegador, es decir, se realizan en tiempo de construcción en lugar de hacerlo en tiempo de ejecución.

Pero en la práctica, la sensación como desarrollador es la de estar utilizando un framework con una sintaxis especial y diferente que dota a nuestro HTML de gran flexibilidad y dinamismo al poder hacer uso de operadores lógicos y bucles, doble binding y reactividad, aunque cuando generamos la versión de producción todo desaparece y queda un marcado limpio.

1
Svelte. El framework no framework

No utiliza Virtual DOM

La principal diferencia con los frameworks tradicionales de UI es que Svelte no utiliza Virtual DOM. Ni virtual DOM ni shadow DOM. En lugar de replicar el DOM de manera virtual en memoria -con el coste que puede tener en aplicaciones grandes- y compararlos en busca de cambios para actualizar el DOM donde haya cambiado, directamente se ejecutan las operaciones necesarias en el DOM cuando el estado de la aplicación cambia. Y este enfoque funciona porque al ser un compilador, sabe en tiempo de construcción cómo las cosas podrían cambiar en la aplicación en lugar de esperar a hacer el trabajo en tiempo de ejecución, dando como resultado aplicaciones más ligeras y más rápidas.

Reactividad

Svelte apuesta por una reactividad verdadera y no utilizar librerías que manejan el estado de la aplicación sino variables en sí mismas, así que en su versión 3 el concepto de reactividad ha cambiado y cuando el estado de uno de tus componentes cambia se actualiza el DOM, no importa que la propiedad de un componente dependa de otra propiedad y que esta última sea modificada desde otros componentes. 

Pero no solo atiende a propiedades reactivas sino también sobre otras declaraciones que además se pueden agrupar, o sobre bloques if

Para que la reactividad tenga lugar siempre necesita una reasignación de una propiedad, es decir, añadir elementos a un array no lo hará pero sí si posteriormente se reasigna.


// no disparará la reactividad
numbers.push(numbers.length + 1);
// ahora sí
numbers = numbers;
// o expresado así
numbers = [...numbers, numbers.length + 1];

La única regla a seguir es que el nombre de la variable actualizada debe aparecer en el lado izquierdo de la asignación.

Encapsula el CSS en los componentes

Los componentes en Svelte, al igual que en Vue, son un superset de HTML con tres partes diferenciadas en un único archivo: <script>, <style> y html en este caso con extensión .svelte y aunque como en cualquier aplicación web podemos tener una hoja de estilos global declarada en el <head> de nuestro documento, podemos modificar cada componente de forma local con los estilos declarados dentro de su etiqueta <style> sin afectar a otros componentes porque finalmente los estilos serán encapsulado por defecto en sí mismo.

¿Dejo todo y me paso a Svelte?

Al comparar Svelte con otros frameworks como Angular, Vue o React vemos sobre el papel y atendiendo a las características que hemos repasado, una herramienta para construir interfaces de usuario basadas en componentes muy potente y flexible, aunque puede que pronto echemos en falta otras funcionalidades a las que estamos más acostumbrados, como por ejemplo, un CLI, un Router o soporte para preprocesadores como Sass. Sin embargo existe un ecosistema de librerías entorno a Svelte que es bastante amplio y que nos ayudarán con estas carencias. Pero esto es así porque la idea en sí misma es la de poder empezar a construir aplicaciones web reactivas rápidamente y con una complejidad mínima, en lugar de disponer desde el principio de una gran caja de herramientas en la que al final muchas no son utilizadas.

Entonces, ¿Svelte es mejor o peor?

Es conveniente conocer todas las herramientas de tu entorno y formarte un criterio exacto sobre las mismas para que antes de empezar un nuevo desarrollo puedas valorar cuál sería más conveniente utilizar en función de las necesidades que tengas. Desde esta óptica no se puede afirmar que Svelte sea ni mejor ni peor que Vue, React o Angular. Existen artículos interesantes y comparativas de rendimiento entre ellos en los que unos puntúan mejor en algunos aspectos y otros destacan en otros, por eso insistimos en que tengas tu propia experiencia.


Para nosotros Svelte es una herramienta a tener en cuenta y por la que hay que apostar para determinados desarrollos, así que si no la has probado te recomendamos que lo hagas, que visites su sitio oficial, que realices el tutorial de iniciación y también que leas nuestro próximo insight en la que veremos como iniciar un proyecto y una demo :)

Para saber más

Svelte. La demo

Demo

En esta ocasión, para esta demo hemos creado un pequeño quiz para poner a prueba qué buenas prácticas conocemos y son las más recomendables para estos extraños tiempos de confinamiento y bien común.

2
Svelte Demo

Qué vamos a ver

  • Sintaxis y operadores lógicos para construir templates

  • Componentización de una interfaz

  • Encapsulación de estilos

  • Ciclo de vida de componentes

  • Comunicación entre componentes

    • Pasar propiedades a un hijo
    • Emisión de eventos desde un hijo

  • Propiedades reactivas

  • Manejo de eventos

  • Uso de Slots

  • Uso de transiciones y animaciones incluidas en Svelte

  • Etiquetas especiales (ej: <svelte:head>)