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

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.

Queda mas 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.

Más artículos en https://alextomas.com/blog