Svelte: Haciendo tus códigos más livianos

Una valiosa herramienta para crear sitios web interactivos y ligeros, ideal para quienes no poseen conexiones de gran velocidad o equipos de alta gama.

Los frameworks de Javascript se han abierto paso en el desarrollo web durante la última década. Estos, con sus propiedades reactivas y manipulación del DOM, se han vuelto realmente atractivos para la creación de páginas web interactivas y visualmente atractivas. Sin embargo, la mayoría de estos se enfrenta a su bundle size (los elementos compilados necesarios para el funcionamiento del framework), el cual por lo general supera los 2 Mb, y no se desempeña muy bien en conexiones de red lentas, una realidad persistente en Latinoamérica. Aunque, para solucionar este problema existe Svelte.

Svelte, es un framework creado por el desarrollador y periodista Rich Harris, con el fin de promover sitios web interactivos que fuesen más pequeños, más rápidos, y por supuesto, más ligeros.

Si bien, los frameworks tradicionales funcionan como una capa intermedia entre la aplicación y el navegador; Harris desarrolló esta herramienta con un nuevo paradigma en mente. Con un trabajo de “capa intermedia” al momento de compilar el proyecto; desencadena que, al desplegarse la aplicación, no necesita de todos los archivos del framework, sino que solamente de aquellos que la misma aplicación utilice.

Desechando al Virtual DOM

El DOM (Document Object Model) es un árbol de objetos anidados que crea el navegador al momento de cargar un sitio web, y un Virtual DOM, es una representación en memoria de estos elementos, lo que le permite al navegador hacer actualizaciones de la interfaz gráfica entre el estado 1 (Ej: cuando hacemos clic en un botón para desplegar el modal) y el estado 2 (cuando el modal ya está desplegado).

Si bien el Virtual DOM permite hacer estas operaciones más rápidas, la cantidad de procesos que ejecuta terminan consumiendo la RAM de nuestros dispositivos, haciendo la navegación lenta y frustrante.

Svelte prefiere hacerlo simple, y trabajar directamente en el DOM durante el compilado de la aplicación, para llevarla al “punto ideal”, donde se mostraría en la interfaz exactamente lo que el usuario quiere ver.

Pero… ¿Tengo que aprender un lenguaje nuevo?

¡No te compliques! Si bien Svelte es un framework independiente, utiliza sintaxis populares entre los frameworks de Javascript, por lo que te será fácil leer y aprender a desarrollar aplicaciones con Svelte.

Por otra parte, Svelte permite simplificar el código, haciéndolo mucho más legible para cualquiera que tenga experiencia con Javascript.

Menos código, menos problemas

En comparación, un “Hola Mundo” de Svelte vs Angular, nos muestra algunas diferencias en el código. Si vemos el código de Angular:

// Angular
import { Component } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: '<p>{{message}}</p>',
  styleUrls: ['./hello-world.component.css']
})

export class HelloWorldComponent {
  message = "Hello world";
  constructor() { }
}

Vemos que Angular requiere ciertas estructuras básicas para funcionar, mientras que un “Hola Mundo” de Svelte:

<!-- Svelte --> 

<script>
  let message = "Hello world"
</script>

<p>{message}</p>

Interpreta directamente el código Javascript en el template. Al usar literalmente menos código, las apps hechas en Svelte terminan siendo más ligeras.

Un Framework prometedor

Si bien Svelte promete como framework, muchos desarrolladores se encuentran reticentes de implementar aplicaciones grandes y complejas con él, lo cual es bastante válido, ya que otras alternativas como Angular y React, son más robustos y tienen mejor soporte.

Sin embargo, Svelte es perfecto para desarrollar aplicaciones sencillas, o para implementar complementos dinámicos en sitios ya funcionales.

Originally published at https://blog.ida.cl on November 13, 2020.