28-06-2020
~5m
Alejandro Mur

Análisis de Sveltejs y sus principales características

Tabla de contenidos

Svelte. El framework no framework

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.

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 atendiendo a las características que hemos repasado, vemos una herramienta para construir interfaces basadas en componentes muy potente y flexible, aunque puede que pronto echemos en falta otras funcionalidades a las que estamos más acostumbrados, como un CLI, Router o soporte para preprocesadores como Sass. Sin embargo existe un ecosistema de librerías entorno a Svelte 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 se puede apostar, 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 post en el que veremos cómo iniciar un proyecto y una pequeña demo :)

Para saber más

Sapper
REPL
Librerías entorno a Svelte
Cómo crear un Router
Cómo añadir Sass a Svelte
Cómo funcionan los estilos en un componente y :global