Familiarizándose con Svelte, el nuevo marco del bloque

Durante los últimos seis años, Vue, Angular y React han dirigido el mundo de los marcos de componentes front-end. Google y Facebook tienen sus propios marcos patrocinados, pero podrían dejar un sabor amargo a cualquiera que abogue por una web abierta e imparcial. Vue es otro marco popular que tiene múltiples patrocinadores pero que no está administrado por una sola corporación, lo que puede resultar atractivo para algunas personas.

Hay otro jugador en el espacio del framework que está ganando atención y opera en gran medida con el mismo espíritu que Vue en cuanto a adoptar una licencia abierta del MIT: Svelte.

Svelte ya se ha cubierto aquí en CSS-Tricks, como la excelente descripción general de Ollie Williams sobre cómo se puede utilizar para escribir CSS basado en componentes más conveniente . Este artículo se ampliará un poco y proporcionará un poco más de contexto sobre Svelt, así como también sobre cómo se diferencia de otros marcos y cómo implementarlo en sus propios proyectos.

¿Qué hace que Svelte sea diferente?

Puedo decir con confianza que Svelte ha sido la biblioteca de componentes de JavaScript más fácil de aprender y comenzar a utilizar de manera productiva.

— Jeff Delaney, de Svelte Realtime Todo List con Firebase

Bien, entonces Svelte es una biblioteca de componentes de JavaScript. Pero también lo es React. Y angulares. Y VUE. ¿Qué hace que Svelte se destaque del resto?

Svelte intenta hacer algunas cosas que son diferentes del resto:

1. Todo el código se compila con anticipación.
2. No hay DOM virtual.
3. El alcance de CSS está integrado.

Analicémoslos un poco porque distinguen significativamente a Svelte de otros marcos front-end.

Todo el código se compila con anticipación.

Svelte es un compilador , lo que significa que el código de los archivos Svelte se convierte a partir de un lenguaje híbrido más fácil de escribir que mezcla HTML, JavaScript y CSS en archivos JavaScript, HTML y CSS optimizados de nivel inferior.

Esto es muy similar a la forma en que C# se compila en código de bytes, o cómo Typecript se compila en JavaScript. Pero mientras los compiladores tradicionales tienden a limitarse a un solo idioma, Svelte mezcla los tres.

Esto hace que la escritura de código sea mucho más flexible y beneficia al cliente (navegador web), ya que el cálculo se realiza cuando se crea la aplicación, no en cada navegador cuando se visita la aplicación web.

No hay DOM virtual.

Un DOM (o modelo de objetos de documento) es una interfaz que define la estructura lógica de una página web. Toma HTML y lo convierte en una estructura que se puede manipular y acceder. Chris tiene una publicación clásica que lo explica detalladamente .

El DOM virtual amplía el concepto de DOM al crear un “segundo” DOM ​​en la memoria. Al igual que el DOM, este es manipulado y accedido por marcos tradicionales (por ejemplo, Angular, Vue y React). En el momento de la compilación, este segundo DOM “virtual” se consolida con el DOM real, lo que permite que se represente la interfaz de usuario.

¿Y qué pasa con el Shadow DOM? Bueno, el Shadow DOM es técnicamente parte del DOM “real”, sólo que está en las sombras. Como tal, es una gran herramienta para aislar fragmentos de código que no se filtran ni entran en conflicto con otros elementos de la página, un poco como (pero al mismo tiempo casi nada como) un iframe. El DOM en la sombra es una especie de núcleo para la mayoría de los marcos front-end basados ​​en componentes porque aprovechan la naturaleza aislada del DOM en la sombra para servir código específico a elementos específicos.

Si bien ese no es exactamente un punto de venta clave de Svelte, es posible trabajar con Shadow DOM de forma experimental. Shadow DOM realmente no se ha popularizado en las prácticas web progresivas, lo cual es una pena, y probablemente debido a la confusión entre los borradores y la falta de soporte de IE y Edge.

Entonces, ¿a dónde voy con todo esto? La diferencia entre Svelte y otros marcos de JavaScript es la falta de un DOM virtual . Esto es importante porque contribuye a que las aplicaciones sean más rápidas, más rápidas que los marcos que utilizan un DOM virtual. Sí, el DOM virtual puede ser súper rápido porque solo actualiza partes del DOM cuando es necesario, pero a medida que las aplicaciones crecen, el impacto de un DOM duplicado almacenado en la memoria puede tener un impacto negativo general en el rendimiento.

Svelte adopta un enfoque diferente y realiza muchos de estos cálculos pesados ​​en el momento de la construcción. Todo ese trabajo pesado por adelantado, lo que le permite a Svelte insertar quirúrgicamente cambios solo donde sea necesario.

El alcance de CSS está integrado.

Svelte tiene un estilo incorporado, que es esencial en otros marcos modernos. La diferencia entre CSS en Svelte y CSS en otros marcos es que Svelte toma el CSS de cada componente y lo escupe en un archivo CSS separado durante la compilación.

Una queja personal que tengo con la mayoría de los enfoques CSS-in-JS es que parece una solución excesivamente diseñada. El enfoque de Svelte mantiene las cosas sencillas, vainilla y encapsuladas, mientras mantiene todo donde debería estar.

Para los amantes de los preprocesadores, existen complementos, ya sea para Sass, Less o Gulp. Pero dado que Svelte todavía está en su infancia, recomendaría usar CSS simple con un marco CSS minimizado de su elección para que pueda utilizar el práctico y elegante alcance de los componentes de Svelte.

Podrías fácilmente mantener tus preferencias de estilo habituales y renunciar por completo al generador CSS de Svelte. Sin embargo, yo diría que es una gran lástima, ya que la solución de Svelte ha sido extremadamente limpia y agradable, al menos según mi experiencia. Pero cualquiera que tenga que trabajar con IE11 ( ) e incluso navegadores más antiguos sabrá que normalizar los estilos es imprescindible. Este es un buen lugar para detenerse y revisar la publicación de Ollie porque profundiza mucho más en las características y ventajas de estilo de Svelte .

Cómo se compara Svelte con otros marcos

Acabamos de ver cómo Svelte tiene un enfoque diferente para compilar, interactuar con DOM y escribir CSS. Quizás se pregunte: ¿cómo se compara Svelte con otros marcos populares?

Ya existen muchas comparaciones , pero basta decir que Svelte es bastante rápido. Pero la velocidad no es la única base de comparación. En lugar de ello, hagamos un análisis en paralelo que analice una descripción general más amplia en un formato muy apreciado por la comunidad de desarrollo: ¡una mesa!

Svelte se encuentra en una posición sólida considerando su entrada tardía y su pequeña comunidad. La satisfacción de los desarrolladores es alta, mientras que los tres grandes han experimentado caídas recientes. La comunidad Svelte es pequeña, pero está creciendo, y el código es de código abierto, lo cual es una gran ventaja para toda la comunidad web.

Veamos un ejemplo del uso de Svelte.

Espero haberte convencido de que al menos vale la pena probar Svelte. Si es así, encendamos la terminal y probemos un ejemplo del mundo real de un caso de uso cotidiano: implementar Intersection Observer . Si alguna vez ha ejecutado un informe Lighthouse , es posible que le hayan gritado por no utilizar eventos de desplazamiento pasivo . Puede que sea la frase más aburrida que he escrito en mi vida, pero suma puntos por el rendimiento y no es demasiado complicado de hacer con el Intersection Observer en Svelte.

Saltemos todas las cuestiones de instalación y configuración porque podemos evitarlas con REPL , el editor en línea que Svelte utiliza para demostrar el marco en su sitio. El texto estándar “Hola mundo” está ahí. Continúe y descargue el archivo ZIP de la aplicación, en la esquina superior derecha de la pantalla.

Ahora, descomprima el archivo y el CD en la carpeta desde la terminal y ejecútelo npm -ipara inicializar el proyecto. Una vez hecho esto, ejecuta npm run build y obtendrás una copia de tu Svelte en miniatura y liviano “¡Hola, mundo!” aplicación.

Ahora podemos entrar en la tarea real de agregar IntersectionObserver.

Primero, importamos el código que amablemente ya ha sido escrito por el equipo de Svelte. Está en el código fuente del repositorio git svelte.dev (cuyos engranajes internos hacen que la lectura sea fascinante).

script  import { onMount } from 'svelte';  export let once = false;  export let top = 0;  export let bottom = 0;  export let left = 0;  export let right = 0;  let intersecting = false;  let container;  onMount(() = {    if (typeof IntersectionObserver !== 'undefined') {      const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;      const observer = new IntersectionObserver(entries = {        intersecting = entries[0].isIntersecting;        if (intersecting  once) {          observer.unobserve(container);        }        }, {          rootMargin      });        observer.observe(container);        return () = observer.unobserve(container);  }  function handler() {    const bcr = container.getBoundingClientRect();    intersecting = (      (bcr.bottom + bottom)  0       (bcr.right + right)  0       (bcr.top - top)  window.innerHeight       (bcr.left - left)  window.innerWidth    );    if (intersecting  once) {      window.removeEventListener('scroll', handler);    }  }  window.addEventListener('scroll', handler);    return () = window.removeEventListener('scroll', handler);  });/scriptstyle  div {    width: 100%;    height: 100%;  }/stylediv bind_this={container}  slot {intersecting}/slot/div

Pegue esto en un archivo llamado IntersectionObserver.svelteen una src/componentscarpeta. Luego, haga referencia a él desde el archivo principal de Svelte: App.svelte.

import IntersectionObserver from “./components/IntersectionObserver.svelte”;

Ahora que tenemos Intersection Observer disponible como componente, podemos envolver otros elementos con él.

IntersectionObserver let:intersecting top={400} {#if intersecting}    section      This message will Show if it is intersecting    /section  {:else}    section      This message won't Show if it is intersecting    /section {/if}/IntersectionObserver

¡Eso es realmente todo! Puede ver cómo el componente Intersection Observer nos permite usarlo IntersectionObserver como un contenedor y definir dónde debe activarse la intersección, que está a 400 píxeles desde la parte superior en este ejemplo. Como recordatorio, ¡todo esto se exporta como JavaScript básico ! Súper rendimiento, nada gracioso. Estamos intercalando JavaScript y HTML, lo cual es genial porque podemos ver lo que Intersection Observer está afectando directamente, sin dejar ambigüedad y sin ser penalizados por el rendimiento.

La OnMountfunción es necesaria para decirle a Svelte que este código debe ejecutarse dentro del navegador, ya que Intersection Observer no se puede descifrar de antemano.

Necesitaremos agregar algo de estilo para que podamos experimentar al observador en acción, y podemos hacerlo directamente en su App.sveltearchivo. Esto puede resultarle muy familiar si ha trabajado con cualquiera de los otros marcos de front-end:

style  .somesection {    display: flex;    align-items: center;    justify-content: center;    width: 100%;    height: 100vh;  }    .somesection.even{    background: #ccc;  }          .content{    text-align: center;    width: 350px;  }/style

Finalmente, podemos copiar y pegar nuestro elemento Intersection Observer cuatro veces para crear más intersecciones. Esto nos brinda una mini aplicación web que agrega y elimina contenido de manera reactiva a medida que aparece, perfecta para usar con medios, como la carga diferida . Vea una demostración del resultado final y asegúrese de abrir DevTools para ver Intersection Observer.

Algunas reflexiones finales

Mi recomendación personal es darle una oportunidad a Svelte. En este artículo solo hemos arañado la superficie del marco, pero después de convertir mi sitio web personal a Svelte, puedo decir con confianza que es un placer trabajar con él. Es eficaz, tiene un linter VSCode brillante y, lo mejor de todo, es fácil de usar. Puede que sea pequeño y nuevo en el mercado, pero tengo la viva sensación de que es el alivio de los inflados marcos de “Goliat”, el “David” que los líderes han estado buscando.

Entonces, ¿ deberías utilizar Svelte en un proyecto real? Definitivamente entra en juego comparar riesgo y recompensa. La comunidad es más pequeña que otros frameworks, lo que significa que es probable que encuentres menos soporte y menos tutoriales que te guíen. Al mismo tiempo, Svelte está en su tercera generación, lo que significa que la mayoría de los gremlins deberían haber sido ahuyentados, dejando un marco ágil y confiable.

Como ocurre con cualquier regla nueva y de sentido común, pruébelo con algo no comercial, pruébelo y vea cómo le va.

¿Hay algo mas? ¡Es curioso que deberías preguntar! Hay dos coproyectos que viven en el Ecosistema Svelte: Sapper y Native . Sapper es un marco que utiliza Svelte para crear aplicaciones web completas, incluido enrutamiento, trabajadores de servicios y todo lo bueno que necesita para comenzar. Lo he usado para reconstruir mi sitio web personal y, hasta ahora, soy un fan. Svelte Native es el más experimental de los proyectos de Svelte, un creador de aplicaciones móviles NativeScript que utiliza Svelte internamente. Confieso que ahí terminan mis conocimientos sobre el tema. Por suerte, tiene una web con más información.

¿Qué opinas? ¿Le has dado una oportunidad a Svelte? ¿Crees que se compara con otros marcos? ¡Discutámoslo en los comentarios!

1. Basado en una combinación de contribuciones de Github, descargas de NPM y temas de StackOverflow
2. Revisión del estado de JS 2019