Primeros pasos en Svelte

Svelte, es un framework frontend que esta cobrando mucha fuerza, es hora de verlo en acción y ver su verdadero potencial.

Diseño web
Lectura de 8 minutos
10 jun. 2020
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. Estructura de Svelte

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.

Avatar

Jose Chirinos

@josechirinosVer perfil

Frontend Developer en EDteam, Javascript Lover #NoTeDetengas

Comentarios de los usuarios

Avatar
Guido Chirinos

@guidochirinos

Excelente, muy conciso y práctico

Recuerda iniciar sesión para comentar este articulo

Cursos recomendados

Librerías JavaScript

Librerías JavaScript

Avatar

Beto Quiroga

5

4.6

¿Cómo elegir entre React, Angular y Vue?

¿Cómo elegir entre React, Angular y Vue?

Avatar

Beto Quiroga

5

4.7