Autor del artículo

Jose Chirinos
@josechirinosVer perfil
Frontend Developer en EDteam, Javascript Lover #NoTeDetengas
Svelte, es un framework frontend que esta cobrando mucha fuerza, es hora de verlo en acción y ver su verdadero potencial.
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.
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?
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
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
.
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.
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 inicial5 let length = saludo.length6 // Cambio reactivo, solo cuando se modifica saludo7 $: length = saludo.length8</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.
Podemos manejar lógica de manera muy sencilla:
1<!-- Hello.svelte -->2<script>3 export let saludo = 'Mundo'4 let length = saludo.length5 $: length = saludo.length6</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>
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.
Jose Chirinos
@josechirinosVer perfil
Frontend Developer en EDteam, Javascript Lover #NoTeDetengas
Librerías JavaScript
Beto Quiroga
¿Cómo elegir entre React, Angular y Vue?
Beto Quiroga
Comentarios de los usuarios
@guidochirinos
Excelente, muy conciso y práctico
Recuerda iniciar sesión para comentar este articulo