Svelte, nuevo chico en la oficina

¿Qué es Svelte?

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 🌍

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

<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

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

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