28/10/2019

Publicado el 28/10/2019

Svelte js es un golpe de aire fresco para el mundo de los frameworks, monopolizado de momento por la tríada Angular, React y Vue: esta nueva herramienta es considerada por muchos como la gran novedad en lo referente a frameworks UI, ya que cuenta con una particular visión sobre cómo un framework de interfaz de usuario debe funcionar.

Si bien su versión inicial, creada por Rich Harris, solo pretendía probar que un compilador podía generar código de alta calidad y con una gran experiencia de usuario, Svelte actualmente se encuentra en su versión 3, la cual trae consigo grandes mejoras, sobre todo relacionadas con la simplificación del código (guerra contra el boilerplate) y su reactividad (basada en asignaciones).

A continuación haremos un repaso de las principales características de Svelte.js, así como de sus ventajas y desventajas a la hora de utilizarlo en tus proyectos digitales:

1. Sencillo desde la perspectiva del programador

El principal y más importante rasgo de Svelte, desde el punto de vista del desarrollador web, es que es sencillo de utilizar. Con este framework no tendrás que ocuparte de complejos aspectos teóricos, propios de estas tecnologías: solo con Javascript básico podrás obtener los mismos resultados y beneficios que con Angular, React o Vue.

2. Compilación rápida de componentes

Svelte es un framework js que compila y empaqueta sus componentes en un fichero Javascript muy comprimido, solo con el código JS necesario para tu aplicación.

Esto significa que, gracias a Svelte, es posible crear aplicaciones mucho más pequeñas y rápidas que las ofrecidas por sus competidores.

3. Consola ágil

Dispone de una consola para iniciar tu aplicación e instalar dependencias. Sorprende la velocidad en la que sucede este proceso, sobre todo si se compara con Angular, por ejemplo.

4. Sintaxis simple

Svelte tiene una sintaxis mucho más simple que otros frameworks, lo que te permite conseguir los mismos objetivos que con otras tecnologías similares de una manera sencilla, directa, intuitiva y con menos líneas de código.

Esta característica se agradece especialmente si estás aprendiendo la programación de Single Page Application (SPA), ya que con los otros frameworks se hace bastante lento el acostumbrarse a sus paradigmas. En este sentido, Svelte no es tan monolítico, lo que se traduce en que rápidamente consigues código funcional sin pasar por tantos pasos.

5. CSS por componentes o en modo global

Puedes tener tus estilos CSS aislados por componentes para que no afecten a los demás, lo que evita posibles colisiones en las hojas de estilos en cascada. Además, en Svelte puedes utilizar tu librería preferida de CSS-in-JS e incluso mezclarla con la librería ya incorporada de este framework.

6. Componentes reactivos

Svelte entiende los componentes como bloques reutilizables de código (ya sea este HTML, CSS o Javascript) que están escritos dentro de un archivo .svelte. En este sentido, los componentes reactivos de este framework permiten que las actualizaciones se produzcan solo en el DOM afectado. En otras palabras, Svelte actualiza solamente el nodo afectado cada vez
que el estado de un app cambia.

Por esta razón, es destacable la buena composición de los componentes, ya que estos cuentan con una excelente comunicación entre ellos de una manera sencilla y ágil desde el punto de vista de la programación.

7. Hot reloading

Esta función provoca que, cuando cambias tu código, inmediatamente visualices el resultado en tu pantalla.

8. HTML, CSS y Javascript en un mismo fichero

Tener integradas estas tres tecnologías, además de contar con las promises en la propia template, puede parecer un problema para aquellos desarrolladores acostumbrados a utilizar Angular. Sin embargo, a quienes se estén iniciando en el mundo del desarrollo web o que quieren probar una nueva forma de trabajo, seguramente considerarán este enfoque mucho más productivo.

9. Sapper disponible

De manera opcional puedes utilizar Sapper, un paquete que cuenta con todo lo necesario para las exigencias del mercado actual: soporte offline, renderización de vistas desde el servidor e hidratadas desde el cliente y routing, entre otros. Lo mejor de todo es que esto ocurre utilizan un mínimo tamaño, ya que esta herramienta optimiza y complia solo el Javascript necesario – tal como lo hace Svelte.

10. Sin virtual DOM

A diferencia de Vue, React y Angular, Svelte no trabaja con un virtual DOM. Esto se traduce en dos asuntos muy claros e interconectados: por una parte, el cliente no debe lidiar con él; y por otra, permite una mejor performance del framework.

11. Sin Typescript

Por el momento Svelte no ha incorporado Typescript a su sistema, por lo que no podrás beneficiarte de sus facilidades para la programación orientadas a objetos y, en cambio, deberás hacerlo con js puro.

Cabe señalar que Typescript es un excelente aliado para la creación de código escalable, ágil y de calidad para interfaces, sobre todo cuando tienes entre manos un proyecto de gran tamaño que supone la participación de muchos programadores web.

12. Ayuda con markup inaccesible

Un principio básico del desarrollo de aplicaciones web es garantizar su accesibilidad a la mayor cantidad de usuarios posibles. Esto incluye a personas que, por ejemplo, tienen discapacidades visuales, no poseen conexiones rápidas de Internet o no cuentan con equipos informáticos de última tecnología.

En este sentido, la accesibilidad (conocida como a11y) puede abordarse de manera fácil a través de Svelte, ya que esta tecnología identifica y te advierte cada vez que escribes código inaccesible.

13. Comunidad pequeña

Aunque Svelte vaya por la versión 3, se trata de un framework muy nuevo; por lo que su comunidad es bastante pequeña de momento. Por esta razón, es posible que eches en falta algún componente disponible en otros frameworks de referencia, pero las mejoras en este sentido son una cuestión de tiempo.

Desde Suma TD te recomendamos darle una oportunidad de Svelte. Si bien es una tecnología joven, ya se posiciona como una excelente solución para crear aplicaciones web ligeras, rápidas y adaptadas a las necesidades de los usuarios actuales.

Foto perfil

Josep Caballero |

Full Stack Developer