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 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

--

--

--

alextomas.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Tomás

Alex Tomás

alextomas.com

More from Medium

How to use :hover pseudoclass in Tailwind only when really needed (when the cursor is present)

Cross-Origin iframe communication with Window.postMessage

Do You Really Need React State to Format Inputs?

Svelte for React Developers