Svelte VS Vue: Una comparación temprana

Estos días he estado jugando con Svelte js. Aunque no soy un desarrollador frontend (mi css es lo peor que este mundo ha visto), me gusta estar al tanto de las nuevas tecnologías y los avances en la parte un poco más programática del front. He tenido la experiencia de trabajar con jQuery en los días de antaño, y más recientemente con Vue js. Estoy bien familiarizado con los patrones de state management de SPAs complejas, y puedo consumir Apis sin problemas (¡Oh, si tan solo supiera hacer hermosas interfaces!).

Asi que, cuando escuché de este nuevo framework y miré su landing (para ver, entre otras cosas, qué de nuevo aporta al juego), decidí que tenía que probarlo. ¡Tengo que hacerme mi propia opinión de esto!
Hay, fundamentalmente, tres diferencias entre Svelte y Vue (lo siento, no he usado React, solo he leído sobre él). En términos de features tanto Vue como Svelte tienen una oferta similar: propiedades, estado en componente, state management, routing, propiedades computadas, renderizado de DOM condicional, two-way-binding para valores de inputs, componentes nesteados, etcétera. Sin embargo, me gustaría obviar esas semejanzas y enfocarme en las cosas en las cuales pienso que Svelte es superior a Vue (y quizás, por extensión, a React).

Svelte es más simple

La mayoría de los frameworks tienen sus propias apis bien definidas para lidiar con sus componentes. En React, extiendes el componente base y defines métodos y propiedades, y el render con el jsx de tu componente. En Vue, exportas un objeto con una estructura bien definida (y si usas webpack, su estilo y template junto con él).

La api de Svelte no consta ni en extender un objeto ni exportarlo: se siente como si estuvieras usando simple javascript. Esto resulta en menos boilerplate y más claridad sobre lo que está sucediendo en tu componente. Tu componente se vuelve más fácil de navegar y leer.

A modo de ejemplo, así es como se implementa un componente que muestra un botón que cada vez que se presione incrementa un contador, en Vue y Svelte.

Primero el ejemplo en vue:

HTML

Y ahora el ejemplo de Svelte:

HTML

El ejemplo en Vue es casi el doble de líneas más largo que el de Svelte, y un poco más contaminado visualmente (debido a la sintaxis de objeto). Eso sin mencionar que en el ejemplo de Svelte nos saltamos líneas en pro de la legibilidad.

Svelte es más eficiente

Svelte es más un compilador de cambios del DOM que una librería de reactividad. Cuando haces una build de una aplicación Svelte, lo que estás buildeando son instrucciones imperativas para cambiar el DOM de acuerdo a cierto estado. Por esto, Svelte no mantiene un DOM virtual como React o Vue. Esto es mucho más eficiente en términos de procesamiento y de memoria: no hay que procesar el virtual DOM para renderizarlo y mantenerlo sincronizado con el DOM real, y no hay que gastar espacio en memoria manteniendo este virtual DOM (ya es suficiente memoria para un browser manejar el DOM real y bastante trabajo para un garbage collector).

Este compilador no solo permite a Svelte mantener una api más declarativa con poder imperativo, sino que permite a dispositivos de bajos recursos ejecutar tu código sin problema alguno y con la mayor velocidad posible.

Por último, aunque puedes usar Svelte con Webpack, la opción por defecto en el skeleton es Rollup, que es mil veces más liviano que el monstruo de Webpack. Esto, sumado a que Svelte es más liviano que React o Vue, harán que tu aplicación tenga tiempos de carga considerablemente más bajos.

Svelte maneja mejor el estado

Una cosa es que los componentes tengan estado, pero otra muy distinta es cuando necesitamos compartir estado entre múltiples componentes. Aquí es donde entran complejas librerías de state management de los frameworks que dominan el mercado (Redux, Vuex, Mobx). Todas ellas tienen una api muy específica e introducen conceptos complejos como namespaced stores, store modules, actions, mutations, etcétera.

Svelte entiende esto y se da cuenta de que lo único que necesitamos es un objeto con tres simples acciones:

  1. Que nos permita setear estado
  2. Que nos permita actualizar estado
  3. Que nos permita enterarnos de cualquier cambio de ese estado

Para esto, nos ofrece una función llamada writable que hace esto por nosotros. Podemos exportar esto en un módulo ES6 e importarlo en cualquier componente que necesitemos. Tienes la libertad de agregar más funciones a este objeto y de mezclarlo con lógica de negocio o llamadas a servicios externos por HTTP. ¡Tú estas en control! No tienes que ponerlo en un objeto definido con la jerga complicada de mutations, actions y cosas por el estilo: tú puedes diseñar tu propia api.

Claro, esto requiere desarrolladores que sepan lo que están haciendo, pero es precisamente cuando tenemos la oportunidad de diseñar una api (y no meramente de convertirnos en usuarios de una) cuando crecemos como desarrolladores.

Conclusión

Espero que esta breve comparativa entre Svelte y Vue haya sido de utilidad. Creo que Svelte tiene muchísimo potencial gracias a las decisiones inteligentes que ha tomado, y no me sorprendería ver crecer su popularidad en los próximos años.

UPDATE: Si quieres revisar el mini proyecto que hice para aprender Svelte, puedes mirarlo aquí.

Leave a Reply

Your email address will not be published. Required fields are marked *