Svelte por primera vez: mi experiencia personal

A veces queremos aprender algo nuevo solo por diversión o para construir proyectos personales. Escuché hablar de Svelte en 2016, pero nunca lo probé hasta hace unos meses junto con Bezael para crear un pequeño microfrontend. Sin embargo, ayer comencé a construir un pequeño proyecto personal para mi hermana y quedé encantado con lo fácil y divertido que es Svelte.

Svelte se siente como volver a los años 90, cuando escribías tus aplicaciones con HTML, CSS y JavaScript, pero usando conceptos similares a React, Angular o Vue con algunas diferencias muy atractivas. Eso sí, requiere un proceso de compilación.

Tal vez te preguntes por qué es necesaria la compilación si estamos usando la plataforma web directamente, pero hacemos lo mismo en Angular al usar TypeScript para acceder a características que los navegadores no soportan de forma nativa. Aunque podemos escribir JavaScript puro, con Svelte necesitamos compilarlo para que funcione de manera eficiente.

Por qué no usa Virtual DOM

Una sorpresa para mí fue descubrir que Svelte no depende del Virtual DOM como lo hace React. Sé que el VDOM es una forma excelente de interactuar con el DOM, ya que evita modificaciones innecesarias al comparar el DOM original con una copia en memoria.

El Virtual DOM tiene un costo (el proceso de "diffing"), que consiste en comparar las diferencias identificadas en el Virtual DOM. A medida que el tamaño de la aplicación crece, este costo también aumenta.

Svelte utiliza un compilador para envolver los cambios de estado, métodos y propiedades, permitiendo actualizaciones precisas y directas en el DOM.

¿Por qué Svelte es divertido?

Svelte es simple y utiliza el concepto de SFC (Single File Component). Esto significa que usamos un único archivo para HTML, CSS y JavaScript sin necesidad de decoradores ni propiedades personalizadas, manteniéndose muy fiel a los estándares de la web.

Puedes probar este mismo ejemplo usando el REPL o playground de Svelte

<script>
    let title = "hashnode" 
</script>
<h1>Hello from {title}</h1>

Muy fácil y con mucho menos código repetitivo. Mira el siguiente ejemplo:

https://svelte.dev/repl/dc2de6e8c609485b98c69ac7fb0cac50?version=4.2.2

Como sabes, trabajo principalmente con Angular. Compara la cantidad de boilerplate entre Angular 16 y Svelte, por ejemplo:

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
 
@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h1>Hello from {{ name }}!</h1>
  `,
})
export class App {
  name = 'hashnode';
}
 
bootstrapApplication(App);

Para agregar color y estilos usamos la etiqueta <style> (sí, igual que en HTML tradicional):

<script>
	let name = 'hashnode!';
</script>
<style>
	section {
		color: white;
		background-color: red;
		padding: 1rem;
		text-align: center
	}
</style>
<section>
<h1>Hello from {name}!</h1>	
</section>

Reactividad y optimización

El compilador de Svelte va un paso más allá que TypeScript o Babel en sus transformaciones, ya que también optimiza el código: elimina código muerto e identifica las variables usadas como estado para invalidarlas y actualizar el DOM directamente.

El equipo de Svelte lanzó un nuevo sistema de reactividad basado en Runes. Si te interesa el tema, puedes leer más en su anuncio oficial:

https://svelte.dev/blog/runes

Compara el código final en cada stack:

• Ejemplo en Angular: https://stackblitz.com/edit/stackblitz-starters-clsaav?file=src%2Fmain.ts

• Ejemplo en Svelte: https://svelte.dev/repl/6fa35f25caa4454694f9091d3507b85e?version=4.2.2

Componentes hijos

Ahora queremos crear un nuevo componente tag. Hagamos la misma implementación en Angular y en Svelte:

Componente Tag en Angular

Para crear un componente tag con una propiedad label personalizable en Angular, necesitamos lo siguiente:

• Usar el decorador @Component.

• Exportar la clase TagComponent.

• Usar el decorador @Input para recibir propiedades públicas.

import { Component, Input, OnInit } from '@angular/core';
 
@Component({
  standalone: true,
  selector: 'app-tag',
  template: `
  <span> {{ label }}</span>
  `,
  styles: [
    `
  span {
  background-color: black;
  color: white;
  border-radius: 0.5rem;
  padding: 0.2rem;
}
  `,
  ],
})
export class TagComponent {
  @Input() label = '.net';
}

Como estamos usando componentes standalone, necesitamos agregarlo en el arreglo de imports del componente principal:

import { TagComponent } from './tag/tag.component';
 
@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, TagComponent],
  template: `
   <section>
    <h1>Hello from {{name}}!</h1>	
    <button (click)="change()">change</button>
    
  <app-tag label='svelte'/>  
  </section>
  
  `,
  styles: [
    `
    section {
      color: white;
		  background-color: red;
		  padding: 1rem;
			text-align: center
	  }
    `,
  ],
})

Código final en Angular:

Código final en StackBlitz: https://stackblitz.com/edit/stackblitz-starters-clsaav?file=src%2Fmain.ts,src%2Ftag%2Ftag.component.ts

Componente Tag en Svelte

Creamos el componente, exportamos la propiedad label dentro de la etiqueta <script> y la usamos en el template:

<script>
	export let label = 'Svelte';
</script>
<style>
span {
 background-color: black;
  color: white;
  border-radius: 0.5rem;
  padding: 0.5rem;
}
</style>
 
<span> {label}</span>

Luego lo importamos en el componente App.svelte:

<script>
import Tag from './tag.svelte';
	let name = 'hashnode!';
	const change = () => {
		name = 'Hello world'
	}
</script>
<style>
	section {
		color: white;
		background-color: red;
		padding: 1rem;
			text-align: center
	}
</style>
<section>
<h1>Hello from {name}!</h1>	
 
<button on:click={change}>Change</button>
<Tag label="I love Svelte"></Tag>
 
</section>

Otra característica genial en Svelte son las spread props, que facilitan enlazar múltiples propiedades de una sola vez. Por ejemplo, si tenemos las propiedades label y tag:

<script>
	export let label = 'Svelte';
	export let tag = 'Svelte Framework'
</script>
<style>
....
</style>
<h2>{label}</h2>
<span >  {tag}</span>

Podemos pasar ambas propiedades fácilmente:

<script>
import Tag from './tag.svelte';
	let name = 'hashnode!';
	const tagConfig = {
		label: 'I love',
		tag: 'Svelte'
	}
</script>
<style>
...
</style>
<Tag {...tagConfig}></Tag>

Pasamos todas las propiedades del objeto tagConfig directamente al componente Tag.

Código final en Svelte: https://svelte.dev/repl/6fa35f25caa4454694f9091d3507b85e?version=4.2.2

Esto es apenas una introducción a los conceptos básicos de Svelte y a lo fácil que resulta escribir código y construir aplicaciones con él.

Resumen

Soy fanático de Angular, pero reconozco que Svelte simplifica muchísimo el desarrollo: no tenemos que lidiar con decoradores ni con tanto boilerplate. Aunque Svelte requiere un proceso de compilación, su gran ventaja es que no usa un Virtual DOM, permitiendo actualizaciones muy precisas directamente en el DOM.

Svelte ofrece una creación de componentes muy sencilla, reactividad limpia y optimización automática, además de utilidades prácticas como las spread props para enlazar múltiples propiedades. Todo esto con menos código repetitivo y una separación clara entre lógica y presentación.

El punto débil de Svelte sigue siendo su presencia en el mercado laboral. Conozco algunas empresas que lo usan, pero la mayoría son startups o proyectos pequeños si lo comparamos con el ecosistema de Angular o React. A pesar de eso, te recomiendo dedicarle un poco de tiempo para probarlo y experimentar con él en tus proyectos personales.

https://svelte.dev/ Sitio web oficial