){kind=small}
Herramientas de componentes web: Una comparación
Tiempo de lectura: 11 minutos
En el último postaprendimos los fundamentos de los Web Components. Terminamos con el código necesario para construir un ejemplo básico. Con el desarrollo, las cosas rara vez son 'simples'. Construir Web Components puede involucrar mucho código repetitivo. Si tu plan es crear múltiples componentes, esto puede llegar a ser bastante engorroso.
Las herramientas de componentes web son la solución perfecta a este problema. Pueden ayudar a abstraer parte de ese código repetitivo en código más limpio y proporcionar un flujo de trabajo más eficiente. Una vez más, al igual que con el desarrollo, hay muchas herramientas para elegir, todas basadas en diferentes opiniones sobre la mejor manera de crear Web Components.
En este post, repasaremos algunas de estas herramientas y las compararemos. Se construirá el mismo componente para poder destacar las diferencias en el código. Además del código, otros criterios que compararemos son:
Características: ¿Qué sacamos de la caja?
Documentación: ¿Ejemplos? ¿Instrucciones claras? ¿Proyectos iniciales?
Facilidad de instalación: ¿Hay que seguir muchos pasos para poner en marcha un componente web?
Soporte: Foros, Discord, Slack, Comunidad, Blogs/artículos, YouTube, GitHub
Respaldo: ¿Quién mantiene la herramienta? ¿Quién la utiliza?
Investigando, me encontré con un sitio web que es un patio de recreo para los desarrolladores que construyen Web Components, https://WebComponents.dev. El sitio enumera todas sus muchas capacidades, pero la que vamos a utilizar es crear el mismo Web Component de inicio, un contador, con un solo clic. El sitio ofrece una amplia variedad de herramientas a utilizar.
Cuando empiece a construir en WebComponents.dev o en su investigación, verá los términos "biblioteca" o "compilador" al describir una herramienta. La diferencia radica en cuándo se utiliza el Web Component. En el caso de las bibliotecas, el componente depende de la herramienta utilizada para gestionar el renderizado y la actualización. En cambio, los compiladores tienen un paso de compilación al crear un componente que generará el código necesario para funcionar sin necesitar la herramienta más adelante.
Y ahora, ¡a comparar!
Como punto de partida, veamos lo que se necesita para crear el componente Counter con Vanilla JavaScript.
En primer lugar, estamos ampliando la clase base HTMLElement como punto de partida para nuestro Web Component.
El valor de recuento se fija en 0.
La plantilla del componente se establece como html y su estilo como style.
La plantilla y el estilo se adjuntan al Shadow DOM para que podamos verlo en la página.
Una vez renderizado, podemos obtener referencias a las diferentes partes y bandear las acciones del componente.
A continuación, definimos las funciones del componente inc(),dec()y update(). Observe que siempre que inc() y dec() son llamados, update() también se activa. De lo contrario, el valor del contador nunca cambiaría.
Entonces tenemos los componentes connectedCallback() y disconnectedCallback() del componente. Estos son llamados cuando el componente es agregado o removido de la página. Aquí estamos añadiendo y eliminando escuchadores de eventos de los botones. Esto es muy importante, especialmente cuando se hacen cosas como temporizadores, para evitar fugas de memoria. Puedes encontrar más información sobre los callbacks del ciclo de vida en los MDN web docs.
Por último, la nueva clase se adjunta al nombre del elemento personalizado mediante customElements.define.
Si los componentes que construyes no son mucho más complejos que este ejemplo, la opción Vanilla JavaScript puede ser para ti. De este modo, no tendrá que preocuparse por el "bloqueo de bibliotecas".
Si esto te parece demasiado y/o quieres crear muchos componentes con más funcionalidades, una herramienta puede ser lo que necesitas.
He aquí algunas de las muchas opciones disponibles.
A primera vista en el código para el componente de contador, usted puede notar la falta de una clase.
La primera línea de su sitio explica esto: "Hybrids es una librería UI para crear componentes web con un fuerte enfoque declarativo y funcional basado en objetos planos y funciones puras."
Así que si te gusta la programación funcional, Hybrids puede ser la biblioteca de componentes web para ti.
Aprecio mucho cuando la documentación de una herramienta contiene una lista con todas sus características. Aquí está directamente desde su sitio web:
La definición más simple - sólo objetos planos y funciones puras - sin clase y esta sintaxis
Sin ciclo de vida global: propiedades independientes con métodos de ciclo de vida propios y simplificados.
Composición sobre herencia: fácil reutilización, fusión o división de definiciones de propiedades.
Recálculo superrápido: caché inteligente integrada y mecanismos de detección de cambios
Plantillas sin herramientas externas: motor de plantillas basado en literales de plantilla etiquetados
Herramientas para desarrolladores incluidas - Soporte de sustitución de módulos en caliente para un desarrollo rápido y agradable.
La documentación está basada en Gitbook, que proporciona un diseño muy limpio y organizado. Dado que hybrids adopta un enfoque tan novedoso para la creación de Web Components mediante el uso de funciones puras, es necesario explicar algunos conceptos básicos y otros aspectos. La documentación lo hace muy bien con numerosos fragmentos de código (con botones para copiar al portapapeles) y enlaces para experimentar con muestras en StackBlitz.
Los híbridos se utilizan como cualquier otra biblioteca. Instálela en su proyecto npm i hybrids
e importar y utilizar en su archivo import { html, define } from 'hybrids';
También hay disponibles opciones para utilizar ES Modules o un enlace a un archivo unpkg.
Las principales vías que he encontrado para seguir el desarrollo de híbridos son GitHub y Gitter. En el momento de escribir esto, la biblioteca se está desarrollando activamente.
The @hybridsjs Twitter Account does not seem to be active.
Aparte de un par de presentaciones que hablan de híbridos, no hay mucho sobre la construcción de Web Components.
La documentación enlaza con algunos artículos de dev.to
Parece como si el creador de híbridos, Dominik Lubański, es también el único mantenedor de la biblioteca. No he podido encontrar una lista de empresas/organizaciones que utilicen híbridos en producción.
Si se compara el código utilizado para crear contadores con Lightning Web Components (LWC) con el de Vanilla JavaScript, se puede ver que se ha abstraído MUCHO. Observa cómo en lugar de extender un HTMLElement, el LWC extiende un LightningElement.
Componentes Web Lightning está desarrollado por Salesforce. Es cierto que no tengo experiencia con Salesforce. Así que cuando la investigación, que tipo de se dio la vuelta con todas las diferentes formas de integrar con la plataforma Salesforce. En este artículo, me centraré únicamente en la creación de Web Components con Lightning Web Components. Pero, si usted es un desarrollador de Salesforce y desea crear Web Components para el ecosistema, no creo que pueda equivocarse con LWC. Puede encontrar más información al respecto aquí.
Como se indica en su sitio, los componentes web Lightning (nota: Lightning Web Components es el marco, los componentes web Lightning son los componentes creados. Las mayúsculas importan) son:
Rápido como un rayo: 7kb de tiempo de ejecución optimizado para el rendimiento, con un mínimo de código repetitivo.
Basado en estándares: Lightning Web Components utiliza HTML estándar, JavaScript moderno (ES6+) y lo mejor de los componentes web nativos.
Fácil de aprender: deje atrás las abstracciones y construya elementos personalizados con HTML, JavaScript y CSS.
Parecen las afirmaciones habituales de muchas herramientas de componentes web.
Existe documentación sobre LWC en distintos lugares de Salesforce. Está lwc.dev que tiene una guía con fragmentos de código interactivos. Te da algo de información y presenta pequeños retos para introducir en un editor de código y ver los resultados inmediatamente.
Otro conjunto de documentación se encuentra en el dominio developer.salesforce.com dominio. Es posible que esto fuera lo que se utilizaba antes del sitio lwc.dev. Su información sobre LWC es más extensa pero menos interactiva.
Otras fuentes de información son los componentes recetas, galería de aplicaciones de ejemploy un zona de juegos de código.
Lightning Web Components dispone de una herramienta de andamiaje para poner en marcha una aplicación con sólo unos comandos:
npx create-lwc-app my-app
cd my-app
npm run watch
También se puede crear una aplicación web progresiva (PWA) utilizando la bandera -t pwa bandera.
En esta páginase enumeran formas de obtener más información sobre LWC. Hay enlaces a un foro de Salesforce Stack Exchange para hacer preguntas. Puede realizar cursos en Pluralsight y Salesforce Trailhead. Busque Lightning Web Components en YouTube y obtendrá muchos resultados de personas que muestran cómo crear componentes.
Como ya se ha mencionado, se trata de un proyecto de Salesforce y parece que hay un equipo de ingenieros trabajando en él.
En cuanto a quién lo utiliza, Lightning Web Components es tan compatible con su plataforma que muchos desarrolladores de Salesforce lo utilizan.
(Nota: TypeScript también se puede utilizar para construir Web Components con LitElement.) Una rápida visión general del código puede parecer como si hubiera muy poca diferencia entre los componentes construidos con Vanilla JavaScript y LitElement. Una diferencia pequeña pero significativa es la forma en que se actualiza la plantilla del componente.
Como se indica en el sitioLitElement utiliza lit-html para definir y renderizar plantillas HTML. Las actualizaciones del DOM son rápidas como el rayo, porque lit-html sólo vuelve a renderizar las partes dinámicas de tu UI - no requiere diffing."
Esto se debe en parte a literales de plantilla etiquetados.
A la pregunta "¿Por qué utilizar LitElement?", su respuesta incluye:
"Deliciosamente declarativo" - Utiliza JavaScript en tu plantilla.
"Rápido y ligero" - Como ya se ha mencionado, debido al método de actualización en el que sólo se vuelven a renderizar las partes que cambian, las actualizaciones son mucho más rápidas.
"Interoperabilidad sin fisuras" - Dado que LitElement se adhiere a los estándares establecidos por Web Components, sus componentes pueden funcionar por sí solos o ser compatibles con cualquier marco o biblioteca de frontend.
De nuevo, afirmaciones hechas por muchas herramientas de Web Component.
La documentación es bastante minimalista. Sólo tres secciones.
Pruebe: un recorrido paso a paso de la creación de un Componente Web con un editor de código StackBlitz incrustado.
Guía: una mirada más profunda a LitElement también con un editor de código en línea.
API: un explorador de API
En la sección "Primeros pasos" de la Guía se indica que puede crear un componente independiente o uno específico para una aplicación.
El primer paso para crear un componente independiente es descargar un proyecto de inicio (JavaScript o TypeScript).
Instale sus dependencias.
Si está utilizando la versión TypeScript npm run build o npm run build:watch.
A continuación, npm run serve.
El proceso para añadir LitElement a un proyecto existente es estándar.
Instala la biblioteca: npm i lit-element
Crea un componente.
Importe el componente.
Utiliza el componente.
Otra opción sería utilizar los generadores de Open Web Components generadores. Se trata de una CLI interactiva que generará un único Web Component o una aplicación inicial.
En la sección Comunidad del sitio web de LitElement hay una lista de algunos recursos. Entre ellos, un espacio de trabajo en Slack, una cuenta de Twitter bastante activa, una lista de correo y, por supuesto, StackOverflow.
LitElement forma parte del proyecto Polymer, desarrollado por Google.
Existe una Wiki en el GitHub de Polymer que enumera quién ha utilizado Polymer / LitElement. Esto incluye, por supuesto, varias propiedades de Google, pero también Coca-Cola, McDonald's, Electronic Arts, y muchos más.
Al mirar el código que Stencil utiliza para crear el componente contador, hay algunos '@' en el código. Estos son decoradores que vienen de TypeScript. Stencil los utiliza para abstraer parte del código repetitivo.
En todo su sitioStencil quiere que se sepa que uno de los objetivos de la herramienta es facilitar al máximo la creación de componentes web.
"En comparación con el uso directo de elementos personalizados, Stencil proporciona API adicionales que simplifican la escritura de componentes rápidos".
En la portada del sitio web y en la introducción, Stencil se asegura de señalar que es un compilador. Una vez generado el Web Component, ya no depende de Stencil.
Stencil se asegura de que sus características estén claramente indicadas:
Basado en componentes web
Canal de renderizado asíncrono
Compatibilidad con TypeScript
Vinculación unidireccional de datos
Preprocesamiento de componentes
Carga perezosa de componentes
Compatibilidad con JSX
Componentes sin dependencia
DOM virtual
Generación de sitios estáticos (SSG)
Una palabra para describir la documentación de Stencil sería completa. Se nota que se ha invertido mucho tiempo y esfuerzo en su elaboración.
La primera sección, Introducción, comienza explicando por qué existe Stencil.
A continuación, hay subsecciones:
Metas y objetivos - Metas y propuesta de valor de Stencil
Mi primer componente: desglose de un componente Stencil de muestra
FAQ - una lista de respuestas bastante larga y bien organizada
¿Qué es un sistema de diseño? - la documentación se toma la molestia de definir qué es un sistema de diseño.
Stencil para Sistemas de Diseño - En la sección anterior, te educan y luego te dice cómo Stencil puede crearlos para ti.
De nuevo, ¡eso es sólo la primera sección! La documentación profundiza en todos los aspectos de los Componentes, cómo integrar los componentes generados en Frameworks FrontEnd populares, Opciones de Configuración, Guías, Pruebas y mucho más. Nunca he tenido una pregunta que no haya sido respondida por la documentación.
En la parte de Introducción de la documentación, hay una sección de "Primeros pasos". Stencil tiene una herramienta CLI interactiva.
Ejecutar npm init stencil permite crear un Web Component, una aplicación Stencil o una Progressive Web App lista para producción.
En la sección Comunidad hay enlaces a Twitter, Slack y GitHub. También hay un montón de vídeos de YouTube centrados en Stencil y artículos y entradas de blog.
Stencil es mantenido por el equipo central de Ionic junto con las contribuciones enviadas por la comunidad.
En la primera página aparecen los logotipos de las empresas que utilizan Stencil. Aparecen Apple, Amazon, Porsche, Arm, Panera y Microsoft.
Éstas son sólo algunas de la creciente lista de herramientas para crear componentes web. Si ninguna de ellas está en tu lista de verificación de desarrollador, yo echaría un vistazo a lo que hay disponible en https://WebComponents.dev. En cuanto a nosotros con Vonage, hemos decidido utilizar Stencil. Con el soporte de TypeScript, una gran documentación y la capacidad de crear sistemas de diseño, estamos en el camino correcto para completar nuestro proyecto de Web Components.
En el próximo post, construiremos un Web Component con Stencil de principio a fin.
¿Ha creado un Web Component con alguna de estas herramientas? ¿Quizás alguna que no hayamos mencionado? ¿Cuál ha sido tu experiencia? Háznoslo saber en la sección de comentarios.