En el mundo del desarrollo Front ya casi no es noticia cuando un nuevo framework JavaScript ve la luz, sabemos que ya hay decenas de ellos, pero Svelte viene para ofrecer un enfoque radicalmente diferente que le hace especial frente al resto.
Aunque Svelte surgió hace algunos años, fue en abril de 2019 cuando su creador, Rich Harris, presentó la versión 3 en la charla "Rethinking reactivity", levantando gran expectación dentro de la comunidad de desarrolladores JavaScript.
El lema de Svelte es "menos trabajo para ti y menos trabajo para el navegador". Esto suena muy bien, pero ¿cómo consiguen hacerlo?
Si comparamos a Svelte con los frameworks JavaScript actuales más populares, como React, Angular, Vue.js o Ember, nos encontramos con otro framework reactivo que sirve para crear aplicaciones web basadas en componentes, hasta aquí nada nuevo. Pero a diferencia del enfoque tradicional, donde todo sucede en tiempo de ejecución y se deja toda la carga al navegador web, Svelte realiza un paso de compilado previo para obtener el bundle final de nuestro código. Este concepto es clave.
Svelte es capaz de entender la composición de nuestra aplicación, saber dónde se encuentra el "state" de cada uno de nuestros componentes y convertir todo en un código súper optimizado para que nuestro navegador simplemente lo interprete de la manera más rápida posible. Es decir, no incluye como dependencia al propio framework en el bundle, sino que toda la "magia reactiva" se realiza en tiempo de compilación (o transpilación, según se quiera ver).
Se consigue así evitar que el navegador web tenga que apoyarse en el framework para ir "descifrando" qué partes de nuestra aplicación han ido cambiado para ir actualizándolas. Nuestro código compilado hará que el navegador actualice directamente el DOM de una forma casi "quirúrgica", lo cual es extremadamente eficiente.
Svelte por tanto, no recurre a técnicas como el Virtual DOM que introdujo React, lo que hace tener un mayor rendimiento y evitar los típicos cuellos de botella que se pueden producir en otros frameworks.
Esto significa que podemos pensar en interfaces de usuario más complejas, que usen más animaciones y transiciones sin que tengamos caídas de rendimiento o que, por ejemplo, podamos tener aplicaciones súper rápidas en dispositivos menos potentes, como smart watches, smart tv's, tpv’s bancarios, etc.
Uno de los mayores beneficios de no incluir al propio framework en nuestro código final, es el de obtener bundles de tamaños más reducidos. Se compila solamente el código que se va a utilizar, evitando incluir en nuestra aplicación código que jamás vamos a necesitar.
Esto, no solo se traduce en que nuestra aplicación estará disponible antes para el usuario, sino que además obtendremos una mayor velocidad de ejecución de forma continuada.
Aunque aquí hay que decir que las nuevas versiones de Angular, Ember e incluso Vue.js están yendo también en esta línea, por lo que Svelte supongo que dejará de ser único en este sentido.
Otra de las virtudes principales de Svelte, es que nos permite solucionar problemas con muchas menos líneas de código. Su creador asegura que, comparando componentes idénticos escritos por ejemplo en React que ya de por sí tiene un código bastante contenido, estaremos ahorrando hasta un 40% de código.
Esto es debido a que como es un compilador, realmente no está limitado por el propio JavaScript y puede organizar el código de la manera que quiera.
Para empezar, los componentes tienen la extensión .svelte en los cuales está contenida tanto la lógica JavaScript, como los estilos y el marcado HTML - te resultará familiar si ya has usado Vue.js - consiguiendo crear un lenguaje muy expresivo y conciso. En la práctica es como tener un "superset" de HTML.
Cada componente es código HTML perfectamente válido - nada de JSX - pero sin embargo podemos incluir código JavaScript en el propio HTML, tal y como hace por ejemplo Angular.
Sencillo ejemplo de un "Hello world!"en Svelte:
La programación reactiva es la base de cualquier framework JavaScript. La clave está en saber dónde está y cómo cambia el "state" de nuestra aplicación, cómo se propagan esos cambios y cómo hacer que todo esté sincronizado.
Svelte ha sabido implementar este paradigma de una manera realmente sencilla. La clave estaba en poder escribir una sintaxis sencilla que nos permitiera enlazar valores en cadena, es decir, que si por ejemplo tenemos dos variables (a, b) y el valor de a cambia, que el valor de b también cambie.
La clave está en el símbolo del dólar y los dos puntos. Esta es la forma de indicar que las dos variables están "conectadas" y que, si el valor de una cambia, el valor de la otra se vuelve a evaluar y por tanto también cambia. Aunque parezca extraño, es código JavaScript perfectamente válido y los linters no arrojarán ningún error.
Precisamente porque Svelte es un compilador, han podido apropiarse de esta sintaxis tan sencilla para usarla en su propio beneficio y funciona realmente bien.
Esta es también una parte muy importante de cualquier componente web. La forma que tiene Svelte de resolverlo es parecida, por ejemplo, a la que tiene Angular.
Los estilos por defecto están dentro del mismo scope del componente. Esto quiere decir que cuando se compila el código, Svelte genera nombres de clases únicos para que solamente afecten al componente en cuestión. De la misma forma también podemos crear estilos globales que afecten a toda la aplicación, lo cual es muy necesario también.
Sencillo ejemplo para mostrar el encapsulado de estilos:
Y otro aspecto muy importante para tener en cuenta es que se lleva bien con preprocesadores css. Con un pequeño cambio en nuestro archivo de configuración podremos usar, por ejemplo, Sass en nuestro proyecto.
Hemos visto unas pequeñas pinceladas de lo que es Svelte, pero si ya a priori es tan espectacular ¿viene a sustituir a corto plazo los frameworks actuales?
Si hablamos de desarrollar proyectos Front de gran envergadura, mi opinión es que no. La principal desventaja de Svelte ahora mismo es que no tiene a una gran empresa detrás, como Google o Facebook, y esto en muchos casos es clave para que los clientes confíen en este tipo de tecnologías.
Pero bueno, hay que tener en cuenta que a priori no tiene por qué ser un sustituto, sino que perfectamente puede complementarse. De hecho, puedes usar Svelte para construir Web Components e integrarlos de forma sencilla.
Otro aspecto puede jugar en contra de Svelte, es que los competidores ya están adoptando cambios para hacer las aplicaciones más rápidas, eficientes y de menor tamaño.
Mi opinión es que podemos estar en el mismo caso que Vue.js que, aunque no tiene una gran empresa detrás, con el tiempo ha ido ganando terreno gracias a la enorme comunidad que lo soporta.
Si te ha resultado interesante el artículo y tienes curiosidad por conocer un poco más sobre Svelte, te recomiendo echar un vistazo a la serie de tutoriales de su web oficial, te darán una base para empezar a construir tus primeras pruebas de concepto de forma rápida:
ifgeekthen.nttdata.com es un blog del grupo NTT DATA. Un proyecto que busca compartir con profesionales del mundo digital temas relacionados con la tecnología y el universo geek.
