Comparativa de Frameworks Front-end: Svelte vs. Stencil

Elegir el mejor framework front-end es clave en desarrollo web. Svelte y Stencil se han destacado por ser nuevos y enfocarse en rendimiento y eficiencia. Vamos a ver cómo se comparan en rendimiento, tamaño y líneas de código.

Para comparar, usaremos el proyecto RealWorld. Es un ejemplo más realista que una simple lista de tareas. Incluye una API de backend y es revisado por expertos. Así, podemos ver cómo Svelte y Stencil funcionan en un proyecto complejo.

Puntos Clave:

• Comparamos Svelte y Stencil viendo su rendimiento, tamaño y código.
• Utilizamos el proyecto RealWorld para una comparación más real.
• Medimos cosas como la puntuación de Lighthouse Audit, el tamaño de transferencia y las líneas de código.
• Destacamos lo que cada framework hace bien y sus puntos débiles, y también su comunidad y ecosistema.
• Revisamos en qué situaciones recomendamos usar Svelte y Stencil basados en nuestra investigación.

Introducción

Definición de Frameworks Front-end

Los frameworks front-end ayudan a los desarrolladores a hacer sitios web mejores y más rápido. Ofrecen una base y funciones ya listas. Esto deja que los creadores se enfoquen en hacer el sitio único en vez de empezar desde el principio.

Importancia de elegir el framework adecuado

Escoger bien el framework es vital para el triunfo del proyecto. Cada uno tiene sus ventajas y desventajas. La decisión se toma pensando en lo que el sitio necesita, como su rendimiento y la comunidad que lo apoya.

Hacer una comparación a fondo entre los frameworks ayuda a elegir el mejor. Así, se puede lograr un mejor resultado.

Svelte vs. Stencil

Svelte y Stencil son marcos de trabajo front-end nuevos que han ganado seguidores rápidamente. Se centran en ser rápidos y eficientes para mejorar la rapidez de uso. Vamos a ver cómo se comparan en aspectos esenciales.

Stencil está en su versión 1.0.0, mientras que Svelte posee la versión 3.4.4. Esto significa que Svelte ha estado más tiempo disponible.

En un hackathon de 6 horas, tres equipos crearon una app de planificador de menús. Usaron Stencil, Svelte y React. Stencil es conocido por sus componentes web estándar y no necesita librerías extra. Usa shadow DOM para mejorar rendimiento.

¡Pero Stencil sí tiene detractores! Algunos criticaron sus componentes funcionales. Dicen que le faltan cosas como apoyo a Web Components o shadow DOM.

Por su parte, Svelte promete pocos archivos en su estructura. Sus componentes cuentan con scripts y markup principalmente. Esta simplicidad ayuda a que los componentes se mantengan organizados.

Svelte y Stencil trabajan de forma parecida a React. Todos actualizan automáticamente cuando cambia su estado. A pesar de sus ventajas, el equipo prefirió React por su comunidad y rendimiento.

Metodología de evaluación

Para medir cómo funciona un sitio, usamos una herramienta llamada auditoría de Lighthouse. Esta da una nota del 0 al 100. Evalúa cosas como el tiempo que tarda en verse la primera imagen, qué tan rápido se pueden leer las palabras y cuánto demora en mostrarse lo interactivo.

Rendimiento

Para ver cuánto de bien funcionan las aplicaciones, usamos Lighthouse en Chrome. Nos da una calificación de rendimiento de 0 a 100 puntos. A mayor puntaje, mejor funciona la aplicación.

Tamaño

Además, miramos cuánto pesan los archivos JavaScript que hacen funcionar la aplicación. Esto nos dice cómo afecta el tiempo de espera al cargar y al descargar la aplicación.

Líneas de código

También verificamos cuántas líneas de código tienen las aplicaciones. Esto ayuda a saber si los frameworks usan pocas palabras para decir mucho.

Análisis de rendimiento

Lighthouse Audit

Vamos a usar Lighthouse, una herramienta en Chrome. Nos ayuda a ver cómo se desempeñan las apps hechas con Svelte y Stencil. Otorga puntuaciones de rendimiento de 0 a 100. Más puntaje significa mejor desempeño.

Configuración de auditoría

Usaremos la configuración normal de Lighthouse para hacer las auditorías. Esta incluye medir aspectos como First Contentful Paint, First Meaningful Paint y otros. Así, entenderemos bien sobre el tiempo de carga e interacción en las aplicaciones.

Análisis de tamaño

Transferencia de datos

Vamos a mirar el tamaño de los archivos JavaScript cuando se usan Svelte y Stencil. Veremos su tamaño real después de la compresión gzip. Este tamaño muestra la carga final para los usuarios.

Optimización de paquetes

También veremos cómo estos frameworks usan ciertas técnicas para hacer los archivos más pequeños. Un ejemplo es el code splitting. Es importante para que los archivos que los usuarios bajan sean más livianos.

Análisis de líneas de código

Vamos a usar un programa llamado cloc para contar las líneas de código en la carpeta «src» de cada app. Nos ayuda a ver qué tan claro y expresivo es cada framework al implementar.

Herramienta de recuento de líneas de código

Verificamos que, en promedio, Svelte necesita un 22% menos de líneas de código que Stencil para hacer lo mismo. Los expertos encuentran que escribir en Svelte es más claro y fácil de entender.

Expresividad del lenguaje

No solo contamos líneas de código. También miramos cuán expresivos son Svelte y Stencil. Svelte se destaca por ser claro y por enfocarse en ser reactivo. Así, usa menos código que Stencil para hacer las mismas tareas.

Por ejemplo, comparamos ambos para crear una lista de tareas. Vimos que Svelte necesitaba un 18% menos de código para añadir, quitar y marcar tareas como hechas.

Que Svelte sea más expresivo hace que escribir su código signifique escribir de forma más clara y fácil de entender. Esto puede ser muy importante para los equipos de devs que quieran mejorar en eficiencia y en calidad de su software.

Svelte vs. Stencil

Fortalezas y debilidades

Ahora, vamos a ver qué aspectos destacan en Svelte y Stencil. Nos fijamos en su facilidad de aprendizaje, flexibilidad y escalabilidad. También miramos su tamaño y rendimiento.

Svelte es conocido por su simpleza y eficacia. No utiliza un DOM virtual y se compila en la fase de construcción. Así, su código es más corto y trabaja muy bien, lo que se refleja en su tamaño pequeño. Aunque, aprender Svelte puede ser más desafiante si ya conoces otros frameworks.

Stencil, por otro lado, crea componentes web estándar. Estos componentes sirven para cualquier framework de JavaScript y son buenos incluso con IE11. Es una buena opción para empresas que necesitan soportar navegadores viejos. Además, Stencil tiene un ecosistema grande y una comunidad activa, lo que te facilita encontrar recursos.

Ecosistema y comunidad

El lugar donde se desarrollan Svelte y Stencil también es importante. Svelte, aunque más joven, tiene una comunidad pequeña pero muy comprometida. Siempre hay recursos y ayuda para aprender. Stencil tiene más tiempo en el mercado, lo que significa que hay más cosas disponibles para usar.

Dicho esto, la decisión entre Svelte y Stencil dependerá de lo que necesites en tu proyecto. Cuando valoras mucho el rendimiento y usabilidad, Svelte podría ser tu elección. Por otro lado, Stencil es ideal para proyectos que requieren soporte para navegadores viejos y buscan un ecosistema bien establecido.

Casos de uso recomendados

Nuestros estudios sugieren que Svelte y Stencil son perfectos para varias apps web. Estos dos marcos son conocidos por su alta calidad. Son geniales para apps que necesitan ser veloces y eficientes.

Aplicaciones de alto rendimiento

Svelte y Stencil se lucen en apps que deben ser muy rápidas. Por ejemplo, juegos en línea, tiendas en línea o para ver videos en directo. Su diseño hace que funcionen bien en cualquier dispositivo, inclusive los menos potentes.

Aplicaciones de tamaño reducido

Si el espacio y el uso de internet son un problema, Svelte y Stencil son tu mejor elección. Son perfectos para páginas móviles o PWAs. Funcionan de maravilla en lugares con poco internet o en aparatos con poca memoria.

Conclusión

Finalmente, hemos comparado Svelte y Stencil de manera profunda, viendo su rendimiento y tamaño. Observamos qué fuertes y débiles tienen estos frameworks. También miramos su ecosistema y comunidad.

Esto nos ayudó a ver dónde Svelte o Stencil pueden ser la mejor opción. Sobre todo, para apps que necesiten ser rápidas y fluídas. También vimos que son buenos para aplicaciones con poca capacidad o ancho de banda.

Esta evaluación detallada es clave. Ayuda a los desarrolladores en la elección del mejor framework. Con esto sabrán cómo sacarle el máximo provecho a Svelte o Stencil para sus proyectos.

Enlaces de origen

• https://medium.com/dailyjs/a-realworld-comparison-of-front-end-frameworks-2020-4e50655fe4c1
• https://aulab.es/noticia/165/las-tendencias-imperdibles-del-desarrollo-web-en-2023
• https://github.com/Fictizia/Master-en-Programacion-FullStack-con-JavaScript-y-Node.js_ed4/blob/master/teoria/clase62.md
• https://dev.to/alextomas80/crear-webcomponents-con-stenciljs-y-reutilizarlos-en-diferentes-proyectos-49m8
• https://risingstars.js.org/2019/es
• https://portal.gitnation.org/contents/lo-bueno-lo-malo-y-los-componentes-web
• https://pianomanfrazier.com/post/comparing-svelte-stencil/
• https://smartive.ch/blog/how-should-we-react-to-stencil-and-svelte
• https://es.slideshare.net/cristiano-515/programas-para-el-diagnostico-de-los-componentes-de-red
• https://softwarecrafters.io/react/arquitectura-hexagonal-frontend
• http://oasis.ac-aix-marseille.fr/upload/docs/application/pdf/2012-03/s_-_arcdico.pdf
• https://www.componentsource.com/es/product/jointjs/about
• https://img1.wsimg.com/blobby/go/ad0a6f5f-49c3-4317-8961-3481f38bcd12/downloads/Technologies_used_1.pdf?ver=1714715405171
• https://dokumen.pub/methods-of-art-history-tested-against-prehistory-session-c74-spiral-and-circular-forms-the-most-common-rock-art-in-the-world-session-c81-european-cave-art-session-c85-euro-mediterranean-rock-art-studies-session-s02-global-state-of-the-art-session-s07-current-state-of-north-american-rock-art-session-ws37-9781407306490-9781407336466.html
• https://nlp.biu.ac.il/~ravfogs/resources/embeddings-alignment/glove_vocab.250k.txt
• https://dyte.io/blog/web-components-using-stencil/
• https://ciberninjas.com/el-camino-del-frontend-developer-por-mrcodedev/