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

npx degit sveltejs/template my-app-svelte

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

cd my-app-svelte

e) Instalamos sus dependencias (con npm o yarn)

npm install

f) Iniciamos nuestra App

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

<!-- Hello.svelte -->
<script>
	export let saludo = 'Mundo'
</script>
	<h1>
		Hola {saludo}
	</h1>
<style>
	h1 {
		color: tomato;
	}
</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:

<!-- App.svelte -->
<script>
	import Hello from './Hello.svelte'
	export let name = 'EDteam'
</script>
<main>
	<Hello saludo={name}/>
</main>
<style>
/* estilos */
</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.

<!-- Hello.svelte -->
<script>
	export let saludo = 'Mundo'
	// Valor inicial
	let length = saludo.length
	// Cambio reactivo, solo cuando se modifica saludo
	$: length = saludo.length
</script>
<input type="text" bind:value={saludo}>
<span>{length}</span>
<h1>
	Hola {saludo}
</h1>
<style>
	h1 {
		color: tomato;
	}
</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:

<!-- Hello.svelte -->
<script>
	export let saludo = 'Mundo'
	let length = saludo.length
	$: length = saludo.length
</script>
<h4>Escriba un nombre con mas de 4 caracteres</h4>
<input type="text" bind:value={saludo}>
<span>{length}</span>
{#if saludo.length > 4}
	<h1>
		Hola {saludo}
	</h1>
{:else}
	<h1>
		ya casi...
	</h1>
{/if}
<style>
h1 {
color: tomato;
}
</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.