Primeros pasos en Svelte

Svelte es un framework frontend, que esta cobrando fuerza estos últimos días.

Y la pregunta de siempre, ¿Será mejor que Angular, React o Vue? El frontend es algo que va evolucionando, cada librería o framework tiene su característica especial y podemos aprovecharlos al máximo dependiendo el tipo de proyecto que estemos desarrollando.

Ahora sí, veamos cómo funciona.

Te invito a hacer un mini proyecto propio y lo dejes en los comentarios.

1. SvelteScript

Como todo framework tiene sus reglas, sus componentes se escriben .svelte, denominado SvelteScript.

Este SvelteScript se compila a Javascript entendible por el navegador, el resultado es una Aplicación Reactiva lista para dominar al mundo, ah y no utiliza el DOM Virtual. Whats?

2. Instalación

a) Tener instalado NodeJS.

b) Abrir nuestra terminal.

c) Generar un proyecto svelte con el nombre de my-app-svelte

1npx degit sveltejs/template my-app-svelte

d) Una vez que descargue el template entramos a la carpeta

1cd my-app-svelte

e) Instalamos sus dependencias (con npm o yarn)

1npm install

f) Iniciamos nuestra App

1npm run dev

g) Abrimos nuestro navegador localhost:5000

3. Estructura de archivos

El template básico de svelte tiene una estructura de carpetas parecida al de React o Vue, toda nuestra lógica estará en dentro de la carpeta src.

4. Nuestro primer componente

Algo importante de svelte es el manejo de los componentes, es una fusión entre React y Vue, muy fácil de escribirlos, los componentes tienen la extensión .svelte .

Creamos un archivo en la carpeta src llamado: Hello.svelte.

1<!-- Hello.svelte -->
2<script>
3	export let saludo = 'Mundo'
4</script>
5	<h1>
6		Hola {saludo}
7	</h1>
8<style>
9	h1 {
10		color: tomato;
11	}
12</style>

Explicando un poco:

• <script>, la variable saludo, con el hecho de usar export estamos indicando que es un prop del componente (una variable que el componente puede recibir), pero por defecto tendrá la cadena 'Mundo'

• <style>, es el estilo propio del componente, sin afectar a otros.

Y para importar nuestro componente vamos a App.svelte, pues te será muy familiar:

1<!-- App.svelte -->
2<script>
3	import Hello from './Hello.svelte'
4	export let name = 'EDteam'
5</script>
6<main>
7	<Hello saludo={name}/>
8</main>
9<style>
10/* estilos */
11</style>

Explicando un poco:

• import es la forma en la que importamos el componente.

• <Hello saludo={name} />, se acuerda de la variable saludo del componente Hello, pues así se asigna el valor.

5. Reactividad

Svelte es un framework reactivo, por ende tiene su forma de aplicarlo:

Nos vamos a Hello.svelte.

1<!-- Hello.svelte -->
2<script>
3	export let saludo = 'Mundo'
4	// Valor inicial
5	let length = saludo.length
6	// Cambio reactivo, solo cuando se modifica saludo
7	$: length = saludo.length
8</script>
9<input type="text" bind:value={saludo}>
10<span>{length}</span>
11<h1>
12	Hola {saludo}
13</h1>
14<style>
15	h1 {
16		color: tomato;
17	}
18</style>

Explicando un poco:

• Esta $: es sintáxis propia de Svelte, nos ayuda a procesar reactivamente. Si hago algún cambio en saludo, este automáticamente se ejecuta, y cambia el valor de length.

• bind:value escucha los cambios en una variable y los actualiza automáticamente.

6. Lógica en los componentes

Podemos manejar lógica de manera muy sencilla:

1<!-- Hello.svelte -->
2<script>
3	export let saludo = 'Mundo'
4	let length = saludo.length
5	$: length = saludo.length
6</script>
7<h4>Escriba un nombre con mas de 4 caracteres</h4>
8<input type="text" bind:value={saludo}>
9<span>{length}</span>
10{#if saludo.length > 4}
11	<h1>
12		Hola {saludo}
13	</h1>
14{:else}
15	<h1>
16		ya casi...
17	</h1>
18{/if}
19<style>
20h1 {
21color: tomato;
22}
23</style>

7. Y ahora ¿qué sigue?

Te invito a seguir aprendiendo Svelte, su entorno es muy interesante, no se queda solo en esto, podemos hacer cosas super avanzadas como el Server Side Render con Sapper o hacer Aplicaciones móviles con Svelte Native.