Svelte, nuevo chico en la oficina

¿Qué es Svelte?

Svelte es un framework para JavaScript, similar a otros frameworks como pueden ser Vue, React o Angular. Sin embargo, a diferencia de estos frameworks populares que necesitan incluir su propia lógica con tu aplicación, en Svelte no se incluye nada (o casi nada) adicional, dejando el código final producido de tu aplicación mucho más ligero.

Ventajas de Svelte:

• Más rápido que otros frameworks
• Simplicidad de código
• Curva de aprendizaje muy baja
• Reactividad
• Menor tamaño de la app generada

Hola Mundo con Svelte 🌍

Svelte utiliza el principio de SFC (Single File Component), lo que significa que el HTML, JS y CSS va todo en un mismo archivo. Esto lo ha popularizado mucho Vue y, en Svelte, podemos ver que es incluso un poco más sencillo.

Así pues... ¿cómo escribiríamos un Hola Mundo con este framework? ¡Fácil!

<script>
    let name = 'World';
</script>

<h1>Hello {name}!</h1>

Con este ejemplo tan básico ya se pueden ver las primeras diferencias si lo comparamos, por ejemplo, con React. Fíjate.

import React from 'react';

export default () => {
    let name = 'World';
    return <h1>Hello {name}!</h1>;
};

Diferencias:

• No se importa la libraría svelte. Al ser compilado, Svelte lo hará por nosotros.
• Más declarativo al no tener que indicarle que queremos exportar ese componente ni el marcado que queremos renderizar.
• Separación de conceptos. El marcado y el comportamiento e inicialización de datos están separados.

Queda más limpio con Svelte, ¿verdad?

¿Quieres añadirle estilos? 🎨

Muy fácil. Recuerda que es SFC. Entonces le añades los estilos que necesites:

<style>
    h1 {
        color: #ff0;
        text-transform: uppercase;
    }
</style>

Por lo que el ejemplo completo sería:

<script>
    let name = 'World';
</script>

<h1>Hello {name}!</h1>

<style>
    h1 {
        color: #ff0;
        text-transform: uppercase;
    }
</style>

Conclusiones

Este artículo es sólo la punta del iceberg de lo que es capaz de hacer Svelte. Te recomiendo que visites la web oficial porque, sin duda, dará más de que hablar.

Por cierto, ésta web se ha hecho con Svelte 🤪. Escribiré como la hice, que además, el blog está hecho con documentos Markdown.