¡Hola Frontender! Hoy te traigo un nuevo vídeo en mi canal para hablar de Svelte,
un framework para construir interfaces de usuario.
Eso suena a React, Angular, Vue... Sí, ¿verdad?
Pero hay un cambio bastante importante, y es que este framework está pensado para ser precompilado.
Esto significa que tiene un enfoque totalmente diferente, radicalmente.
Si te soy sincero, no conocía Svelte mucho, había leído alguna noticia por ahí,
pero no me parecía muy importante, hasta que vi la charla de Rich Harris,
que es el creador, en la última JS Camp, que comparó un web component con un componente de React
y un componente de Svelte. Y la verdad, fue muy, muy interesante.
Y como me pareció muy interesante, pues te lo quería traer aquí para ver qué opinabas.
Así que aquí te dejo la introducción al framework Svelte.
Pues esta es la web oficial de Svelte.
Ya te dice aquí que cibernéticamente, aplicaciones web mejoradas.
¡Wow! Esto es empezar a lo fuerte.
Pero esto sí que es interesante, que aquí tenemos como las tres características básicas, ¿no?
Que es escribir menos código.
Estos son componentes totalmente libres de boilerplate.
Esto es súper interesante.
Que no tiene Virtual DOM, ¿vale?
Esto es también muy importante.
Y es que Svelte compila tu código,
pero lo hace como una especie de código que no intenta tener muchas cosas.
Ya veréis como vemos el output y no tiene ningún tipo de Virtual DOM.
Y esto es porque considera que el vanilla JS es suficientemente rápido.
Y truly reactive.
Esto significa que no vamos a tener que manejar el estado con utilidades como un useState o...
Ya veremos a qué se refiere con esto, porque es muy interesante.
Bueno, vamos a saltarnos todo esto, que aquí nos comenta un poco cómo comenzar.
Esto lo podemos ver en un siguiente vídeo, porque a mí me gustaría enseñarte cómo es esto, ¿no?
De Svelte.
Y es esto.
Aquí tenemos Svelte.
Aquí ya podemos ver un poco la diferencia respecto a otros frameworks como React, Vue y Angular.
Y es que tenemos la parte de script y aquí tendríamos, digamos, el marcado, ¿no?
Y hacemos con las llaves esta evaluación de la variable name.
Así que si a esta palabra Word le cambiamos el valor y le ponemos frontender, muy bien, pues ya vemos aquí cómo está cambiando.
Lo interesante de Svelte que estaba comentando anteriormente es que es precompilado.
Creo que aquí arriba seguramente sí, aquí lo está comentando.
Dice que hay un compile step.
Compile step.
Exacto, exacto.
Hay un paso de compilado.
Y esto es muy interesante, porque esto es lo que nosotros escribimos, pero en realidad esto lo está convirtiendo en lo que podemos ver aquí.
Está generando todo el código que va a entender nuestro navegador.
Entonces está importando las bibliotecas que necesita internas de Svelte.
Y aquí tenemos pues cómo está creando en realidad estos componentes.
Así que esto es lo que escribimos y aquí en el output podemos ver lo que está compilando.
Podemos ver también CSS output que podemos ver que está vacío, aquí no hay absolutamente nada.
¿Cómo podemos hacer que aquí haya algo?
Pues vamos a añadir aquí una etiqueta style y vamos a decirle que el h1 va a tener el color 09f, que es mi favorito.
Ya vemos que ahora sí que tenemos un output del CSS y además fíjate que nos ha dejado aquí como un hash.
Ya nos ha dicho el h1 con Svelte y un hash.
Así que de alguna forma ya nos está solucionando también todo el tema de colisión con la etiqueta CSS.
Y podemos escribir los estilos del propio componente en el mismo fichero.
Así que wow, no está nada mal.
Vamos a ver el resultado, cómo queda este cambio que hemos hecho aquí.
Muy bien.
Hello from Tender, si aquí le ponemos ahora que esto es rojo, pues sale rojo.
Fíjate una cosa muy interesante.
Imagínate que hago esto y me he equivocado, ¿no?
Pues aquí tengo un error.
¿Por qué me muestra un error?
Bien, me muestra un error porque como está compilando este código, pues ya es capaz de identificar los problemas que puede tener nuestro componente de sintaxis.
Nos dice, bueno, aquí no puedo leer la propiedad start de undefined.
Muy bien, pues vamos a poner aquí el red.
Si ponemos, por ejemplo, y nos equivocamos aquí y pongo stilea, ¿vale?
Dice, oye, he intentado aquí cerrar el style, pero es que te has equivocado porque no la has abierto nunca.
Esto es muy interesante porque nos va a evitar hacer muchos errores.
Es verdad que con el linter esto ya lo estamos haciendo, ¿no?
De alguna forma.
Pero esto creo que va un poquito más allá y nos puede ayudar a evitar errores que de otra forma veríamos en runtime.
Así que nada, vamos a dejar aquí nuestro 0.9f y ya está.
Vale, ahora, ¿cómo es esto del estado, no?
Hemos visto aquí arriba que tenía el truly reactive.
Es muy interesante, ¿no?
Pero dice que no vas a necesitar más formas de manejar tu estado de una forma compleja, ¿no?
En React, por ejemplo, pues utilizaríamos el hook useState o un setState, ¿no?
¿Cómo lo hacemos aquí realmente?
Aquí tenemos name e imagina que lo que quiero es que cambie, ¿no?
Este frontender cambie y tenga, pues, otro valor.
Vamos a poner un timeout, ¿vale?
Y vamos a decirle que esto va a ejecutar una función cuando pase un segundo.
Y lo que va a hacer cuando pase un segundo es que name va a ser mundo.
Muy bien, pues, pum, ¿te has fijado lo que ha pasado?
Vamos a volver a escribir esto, vamos a poner ahora que sea en dos segundos.
Hero frontender y cuando pasa dos segundos, lo que estoy haciendo es cambiar el valor de la variable name.
Le estoy reasignando un string que es mundo, ¿no?
Cuando pasan dos segundos, pues, cuando pasan dos segundos, como estamos cambiándole el valor a esta variable,
Svelte está detectando este cambio y está volviendo a renderizar nuestro componente.
Pero no hemos puesto nada de state, no hemos puesto absolutamente nada.
Y es porque Svelte, gracias al paso de compilación, está detectando dónde está nuestro estado en la aplicación.
Por ejemplo, si aquí pusiéramos, por ejemplo, un prefix y ponemos que esto es hello.
Así que aquí en lugar vamos a poner el prefix y lo dejamos así.
Aquí Svelte ha sido capaz de diferenciar lo que es una variable normal y lo que es el state.
Y lo vamos a ver mejor en el output.
Aquí si vamos a output, podemos ver cómo estamos importando todo esto.
Muy bien.
Pero si somos capaces de discernir aquí dónde está, vamos a ver, vamos a ver.
Tenemos aquí la variable prefix, que es hello.
Como veis sigue siendo la variable.
Pero aquí hay ya otras cosas más complejas.
No hace falta que esto lo entendamos porque esto es totalmente transparente para nosotros.
Pero aquí podemos ver que ha creado una función instance donde le está pasando diferentes parámetros.
Y aquí está lo interesante, el invalidate.
Que básicamente lo que le dice es cuándo debe invalidar el componente o cómo se ha renderizado el componente.
Y va a disparar efectivamente un re-renderizado en nuestro componente.
Así que aquí en el timeout este que habíamos hecho, cuando pasan dos segundos,
lo que va a hacer es llamar a la función invalidate de forma que va a volver a re-renderizar el componente.
Así que esto es a lo que se refiere cuando dice que no vamos a necesitar una gestión del estado como lo hemos hecho hasta ahora,
sino que es realmente reactivo.
Es muy, muy interesante.
¿Qué más cosas?
Vale, aquí tenemos, bueno, este sería un poquito el ejemplo que hemos visto.
Aquí ya estaría utilizando un componente con nested.
Aquí ya ves lo sencillo que es un componente.
Esto sería un componente nested.svelte.
Aquí tiene el template y solo falta importarlo y utilizarlo aquí en la parte del template.
Muy bien.
¿Y qué más?
Aquí ya tenemos algo interesante que es para manejar los clics.
Tenemos exactamente un ejemplo del estado, el estado interno de nuestro componente con count,
pero ya podemos ver que si en React sería una cosa así, poner un onclick,
pues aquí en Svelte tenemos que es algo más parecido a como lo estamos haciendo en Vue o en Angular.
Tenemos aquí una, digamos como un DSL, un lenguaje de template que tiene específico para él,
para decirle cuándo va a hacer esta acción.
Vale, cuando haga un click en este botón, disparas este handleclick.
Y este handleclick lo tenemos dentro de script.
Aquí lo único que va a hacer es incrementar en uno el count,
que el count no deja de ser una variable que hemos inicializado a cero,
que no tiene nada, no le hemos dicho que sea un state.
Pero aún así, aquí lo tenemos.
Se está comportando como si fuese un estado interno de nuestro componente.
Y aquí tenemos el output y seguro que encontramos este invalidate.
Aquí lo tenemos exactamente.
Y este invalidate es como que ha envuelto esta variable,
ha detectado que esta variable es un estado, gracias al paso de compilación.
De verdad, es muy interesante.
Esto es Svelte.
Me parece muy interesante.
Además, porque en muy pocas líneas de código es impresionante lo que puedes llegar a hacer.
El tener un estado que de otra forma, pues esto quieras o no,
en componentes de React o de Vue o de Angular,
pues tendrías muchas más líneas.
Incluso tendrías que preocuparte, sobre todo en React,
que al ser puramente JavaScript,
es verdad que te tienes que preocupar más en cómo escribir los estilos y todo esto.
Aquí, esto es un framework y dependes totalmente de escribir tal y como te está diciendo Svelte
y cómo te da la solución del CSS y todo el tema del template.
Pero aún así, me parece muy interesante.
¡Gracias!
¡Gracias!