- FRONTEND
- NOVIEMBRE 2020
Svelte. El framework no framework
Suscríbete a Insights
Déjanos tu email y te mantendremos al tanto de todas nuestras publicaciones. Solo recibirás una comunicación al mes aproximadamente. Tranquilo, no mandamos spam ;)
El término ‘JavaScript fatigue’ resume el pesar general entre los desarrolladores web y estado anímico y mental en el que vivimos quienes trabajamos en ecosistemas basados en JavaScript por la multitud de herramientas y frameworks que han surgido en los últimos años, y que te hacen sentir que cuando estás cómodo y dominas una de ellas irrumpe una nueva que es parcialmente similar pero sobradamente diferente y que te lleva de nuevo a la casilla de salida. Así una y otra vez. Esto puede sonar y ser frustrante pero en el fondo es evolución y cambio que siempre es positivo. Pero hoy no vamos a hablar de esto sino de Svelte, uno de los últimos actores en este juego.
Svelte (adj. esbelto/a) es una herramienta para construir interfaces de usuario orientada a componentes que en los últimos años ha ganado mucha popularidad y aunque no tiene la legión de seguidores que tiene Angular, React o Vue, es buen momento para analizarla y ver qué le diferencia de las anteriores.
Entre sus características principales, destacan:
-
Es un compilador
-
No utiliza Virtual DOM
-
Reactividad
-
Encapsula el CSS en los componentes
Es un compilador
La principal diferencia respecto a otras herramientas es que Svelte no realiza el trabajo en el navegador sino en el compilador, porque Svelte es un compilador y optimizador de JavaScript capaz de generar bundles (paquetes) muy pequeños al trasladar la complejidad al compilador en lugar de realizar el grueso de las tareas en el navegador, es decir, se realizan en tiempo de construcción en lugar de hacerlo en tiempo de ejecución.
Pero en la práctica, la sensación como desarrollador es la de estar utilizando un framework con una sintaxis especial y diferente que dota a nuestro HTML de gran flexibilidad y dinamismo al poder hacer uso de operadores lógicos y bucles, doble binding y reactividad, aunque cuando generamos la versión de producción todo desaparece y queda un marcado limpio.
No utiliza Virtual DOM
La principal diferencia con los frameworks tradicionales de UI es que Svelte no utiliza Virtual DOM. Ni virtual DOM ni shadow DOM. En lugar de replicar el DOM de manera virtual en memoria -con el coste que puede tener en aplicaciones grandes- y compararlos en busca de cambios para actualizar el DOM donde haya cambiado, directamente se ejecutan las operaciones necesarias en el DOM cuando el estado de la aplicación cambia. Y este enfoque funciona porque al ser un compilador, sabe en tiempo de construcción cómo las cosas podrían cambiar en la aplicación en lugar de esperar a hacer el trabajo en tiempo de ejecución, dando como resultado aplicaciones más ligeras y más rápidas.
Reactividad
Svelte apuesta por una reactividad verdadera y no utilizar librerías que manejan el estado de la aplicación sino variables en sí mismas, así que en su versión 3 el concepto de reactividad ha cambiado y cuando el estado de uno de tus componentes cambia se actualiza el DOM, no importa que la propiedad de un componente dependa de otra propiedad y que esta última sea modificada desde otros componentes.
Pero no solo atiende a propiedades reactivas sino también sobre otras declaraciones que además se pueden agrupar, o sobre bloques if
Para que la reactividad tenga lugar siempre necesita una reasignación de una propiedad, es decir, añadir elementos a un array no lo hará pero sí si posteriormente se reasigna.
// no disparará la reactividad
numbers.push(numbers.length + 1);
// ahora sí
numbers = numbers;
// o expresado así
numbers = [...numbers, numbers.length + 1];
La única regla a seguir es que el nombre de la variable actualizada debe aparecer en el lado izquierdo de la asignación.
Encapsula el CSS en los componentes
Los componentes en Svelte, al igual que en Vue, son un superset de HTML con tres partes diferenciadas en un único archivo: <script>, <style> y html en este caso con extensión .svelte y aunque como en cualquier aplicación web podemos tener una hoja de estilos global declarada en el <head> de nuestro documento, podemos modificar cada componente de forma local con los estilos declarados dentro de su etiqueta <style> sin afectar a otros componentes porque finalmente los estilos serán encapsulado por defecto en sí mismo.
¿Dejo todo y me paso a Svelte?
Al comparar Svelte con otros frameworks como Angular, Vue o React vemos sobre el papel y atendiendo a las características que hemos repasado, una herramienta para construir interfaces de usuario basadas en componentes muy potente y flexible, aunque puede que pronto echemos en falta otras funcionalidades a las que estamos más acostumbrados, como por ejemplo, un CLI, un Router o soporte para preprocesadores como Sass. Sin embargo existe un ecosistema de librerías entorno a Svelte que es bastante amplio y que nos ayudarán con estas carencias. Pero esto es así porque la idea en sí misma es la de poder empezar a construir aplicaciones web reactivas rápidamente y con una complejidad mínima, en lugar de disponer desde el principio de una gran caja de herramientas en la que al final muchas no son utilizadas.
Entonces, ¿Svelte es mejor o peor?
Es conveniente conocer todas las herramientas de tu entorno y formarte un criterio exacto sobre las mismas para que antes de empezar un nuevo desarrollo puedas valorar cuál sería más conveniente utilizar en función de las necesidades que tengas. Desde esta óptica no se puede afirmar que Svelte sea ni mejor ni peor que Vue, React o Angular. Existen artículos interesantes y comparativas de rendimiento entre ellos en los que unos puntúan mejor en algunos aspectos y otros destacan en otros, por eso insistimos en que tengas tu propia experiencia.
Para nosotros Svelte es una herramienta a tener en cuenta y por la que hay que apostar para determinados desarrollos, así que si no la has probado te recomendamos que lo hagas, que visites su sitio oficial, que realices el tutorial de iniciación y también que leas nuestro próximo insight en la que veremos como iniciar un proyecto y una demo :)
Para saber más
- Sapper
- REPL
- Librerías entorno a Svelte
- Cómo crear un Router
- Cómo añadir Sass a Svelte
- Cómo funcionan los estilos en un componente y :global
Svelte. La demo
Demo
En esta ocasión, para esta demo hemos creado un pequeño quiz para poner a prueba qué buenas prácticas conocemos y son las más recomendables para estos extraños tiempos de confinamiento y bien común.
Qué vamos a ver
-
Sintaxis y operadores lógicos para construir templates
-
Componentización de una interfaz
-
Encapsulación de estilos
-
Ciclo de vida de componentes
-
Comunicación entre componentes
- Pasar propiedades a un hijo
- Emisión de eventos desde un hijo
-
Propiedades reactivas
-
Manejo de eventos
-
Uso de Slots
-
Uso de transiciones y animaciones incluidas en Svelte
- Etiquetas especiales (ej: <svelte:head>)
Boream insights
Descubre tendencias y sigue el día a día de nuestros proyectos.
Ver todos los insights-
Backend Best practices
Aplicando soluciones de Inteligencia Artificial para la creación de Chatbots en Drupal
Con la rápida evolución de la Inteligencia Artificial (IA), las empresas y organizaciones buscan cada vez más formas de automatizar la atención al cliente y mejorar la experiencia del usuario. Los chatbots, impulsados por tecnologías de IA, se han convertido en una solución popular para estas necesidades. Drupal, con su arquitectura modular y flexible, es una plataforma ideal para integrar estas soluciones.
-
UX-CX
Solid, UX y datos personales. ¿Una utopía o una realidad?
Solid es una tecnología basada en los estándares actuales de Internet que permite la organización de datos e identidades en las aplicaciones que desarrollemos. Hasta aquí poca cosa nueva. La revolución viene dada porque con esta tecnología es el propio usuario quien tiene el control de sus datos y quien da el permiso de uso a las compañías a través de un WebID.
-
Diseño UX-CX Research
Sesgos cognitivos y prejuicios en los procesos de diseño de interfaz: como combatirlos
Como diseñadores de interfaz y de experiencia de usuario debemos tomar decisiones rápidas que impactan de manera notable en el resultado final de nuestros productos digitales. Generalmente no somos conscientes de que estas decisiones pueden verse profundamente afectadas por una interpretación errónea de la realidad, sesgada por nuestra propia experiencia y alejada de una comprensión racional del entorno.
-
Backend Best practices
Desarrollo Drupal conexión con LDAP: control de acceso.
Tras el primer insight donde comentamos los pasos básicos de conexión de un desarrollo Drupal con un Sistema LDAP, en esta nueva entrega profundizamos en algunos aspectos más avanzados o particulares.