Conozcamos a Svelte.js
¡Hola devs! 🔥 soy Juan Carlos y hoy hablaremos sobre el nuevo aliado (o tal vez no tan nuevo) en el team de los JS Frameworks y que ha tenido una buena acogida en la comunidad de desarrolladores web. Señoras y señores, con ustedes el nuevo miembro de los KND: Los chicos del barrio (versión JavaScript ): Svelte.js 🎉
Uy los KND, que tiempos aquellos.. pero bueno, volvamos a Svelte.js amigos 😄
¿De donde sale Svelte.js?
Svelte fue creado por Rich Harris, quien es desarrollador y que por mucho tiempo buscaba una forma de mejorar el desempeño de las aplicaciones que desarrollaba, él trabaja cumpliendo ciertas características:
- Entregar productos con un excelente rendimiento y fácil desarrollo.
- Que la librería o framework tuviera una curva de aprendizaje muy corta para que otras personas puedan integrarlo en sus proyectos sin mucha complicación o boilerplate.
- Hacer más liviano el trabajo del navegador del lado cliente y reducir lo más posible la carga de código de librerías o frameworks por código JavaScript puro.
El man en pocas palabras, se hartó y creó su propio JS framework a su gusto . Es broma 😄
Luego de haber mencionado las intenciones de Rich harris, entonces ya te preguntarás Si Juan Carlos, muy bonita la historia pero ¿qué rayos y centellas es Svelte? , a eso vamos maifren (my friend)
¿Qué es Svelte.js?
Es un framework reactivo y basado en componentes que utiliza un paso de compilación al momento de realizar cambios en el DOM (Document Object Model).
Tal vez digas, reactivo?, con que se come eso? bueno, un framework reactivo significa que utiliza conceptos de la programación reactiva para realizar los cambios correspondiente en el estado de nuestras aplicaciones.
Pero Juan Carlitos y ¿qué es programación reactiva? pues de manera corta y precisa, es un tipo de programación que trabaja con el flujo de datos (streams) de forma asíncrona y que reacciona según el cambio de datos.
Un ejemplo, serían las hojas de cálculo en excel donde si pones una fórmula en una celda se pone a la espera a que el usuario introduzca los valores (asincronía) correspondientes para realizar el cálculo total e imprimir el resultado en pantalla (streams) y si modificas alguna celda, cambia el resultado total según ese nuevo dato sin ejecutar la operación en toda la tabla, solo donde se necesitó un cambio.
Puedes conocer más acerca de este tipo de programación en el curso de Programación Reactiva con RxJS
Características de Svelte.js
- No utiliza virtual DOM para realizar cambios en la aplicación como React o Vue: Este paso se basa en compilar nuestros componentes cuando realizamos un cambio, quitándole el trabajo al navegador de estar guardando en memoria nuestro árbol de elementos para hacer una comparación de un cambio que se hizo y solo se encarga de renderizar.
- Tiene su propio manejador de estado (Stores): Para los que sufren con entender Redux o otras librerías, Svelte ya trae su propio manejador y bastante más sencillo de aprender.
- Su sintaxis es sencilla: Esto ayuda al desarrollador escribir componentes con los lenguajes que ya conoce como HTML, CSS, JavaScript e incluso para quienes buscan aprender su primer framework JavaScript esta sería su oportunidad de darle un vistazo.
- Totalmente reactivo: Ayuda en la escalabilidad de nuestros proyectos para que sean más mantenibles y robustos.
- El tamaño de las apps que compilas a producción son bien reducidos a diferencia de otras alternativas y con código optimizado para producción**.**
- La documentación es super mega fácil de seguir paso a paso.
- Puedes utilizarlo para el server side rendering (SSR) con Sapper (propió de Svelte)
Ya se que luego de haber leído lo anterior ya estas ansioso de ver código. Pues como diría Tommy el power ranger: ¡Morfosis amigos!
Si quieres probar Svelte, ve al sitio oficial donde tienen un playground en el que puedes testear código con Svelte.
En caso que quieras crear un proyecto desde cero solo debes ejecutar este comando en tu terminal: npx degit sveltejs/template \$&nombre-de-tu-proyecto\$& y luego haces npm install para instalar las dependencias del proyecto. Por último npm run dev para levantar el servidor de desarrollo y hacer tus pruebas.
Los componentes en Svelte.js
Constan de 3 elementos:
- Etiquetas script para tu JavaScript:
<script></script> - Etiquetas de estilo para tu CSS en ese componente:
<style></style> - Escribir tu HTML en el componente sin impedimentos (es en serio, sin funciones render, return nada de esas vainas)
- Deben tener extensión
.sveltepor ejemplo: App.svelte
Si quieres usar SASS para los estilos, puedes hacerlo sin problema, pero debes instalar un preprocesador (lo encuentras aquí) y separar tus estilos generales en carpetas diferentes si así lo deseas.
Como se ve en la imagen, es una representación de un componente en svelte que luego en pantallas se ve así:
En nuestra etiqueta script tenemos la variable name que sería un estado del componente y luego en nuestro HTML solo debemos llamar el estado dentro de { } . Así de fácil, es crear un componente y si quieres colocar estilos a ese componente solo lo pones dentro de una etiqueta <style> como mencionamos anteriormente.
Si necesitas pasarle propiedades a un componente es aún mucho más fácil. Digamos que necesitas crear el componente Tareas.svelte y le vas a pasar un arreglo de objetos que luego vas a iterar.
Una vez crees tu componente, debes importarlo en el App.svelte (o donde lo vayas a utilizar pero en mi caso tengo el código en el App.svelte) y le pasamos la props al componente.
<Tareas tareas = {tareas} /> //tambien puede ser con ES6 <Tareas { tareas } />
En ese componente solo necesitas tener esto en tu etiqueta script:
<script>
export let tareas
</script>
El export let tareas es para poder capturar las propiedades que vienen desde el componente padre y puedan utilizarse en el archivo completo. Ahora que las propiedades están disponibles en el componente vamos a iterar sobre el objeto mediante los templates .
Nuestro objeto luce de la siguiente manera
let tareas = [
{
id: 1,
nombre: "Lavar la ropa"
},
{
id: 2,
nombre: "Cocinar arroz"
}
];
En Svelte puedes utilizar el template each para iterar sobre elementos de la siguiente forma:
<script>
export let tareas;
</script>
{#each tareas as tarea}
<p>{tarea.nombre}</p>
{/each}
Y tan sencillo como eso podrás ver el resultado en pantalla (le añades un poquito de sabor 😁)
La API de Svelte.js
Tiene bastantes utilidades como:
- Animaciones
- Transiciones
- Eventos del DOM (onClick, mouse move, etc.)
- Ciclo de vida de un componente
- Templates para peticiones async/await, if/else
Y muchas otras cosas que de verdad llaman la atención y curiosidad de echarle un ojo a este framework. Además, si quieres ver qué otros proyectos se han hecho con Svelte puedes visitar este enlace: https://madewithsvelte.com
Si quieres darle un vistazo más profundo a Svelte, con solo ir a la documentación podrás construir un pequeño proyecto y ver qué te parece. No digo que re-escribas toda tu app en producción en Svelte sino que como toda herramienta puedes aprovechar lo que ofrece para tu proyecto y así tener felices a tus clientes.
Espero que haya sido tu agrado este blog y nos vemos en una próxima entrega amigos. Como diria mi amigo Terminator: Hasta la vista devs 😎