Introducción a Web Components: Reutilización de Código en Frontend

Los desarrolladores usan marcos de trabajo de JavaScript como React y Angular para hacer piezas web que se pueden usar de nuevo.¹ Pero, cada uno usa reglas distintas, lo que hace difícil reutilizar el código en otros proyectos.¹ Los web components son piezas de HTML que se pueden usar una y otra vez. Trabajan bien con todos los marcos de trabajo y los creó el W3C en 2012.² Ahora, los navegadores más comunes los soportan.² Estos componentes permiten poner todo lo que una pieza necesite dentro de ella. Esto incluye diseño, escritura especial y comportamiento, así se pueden usar en muchas webs y aplicaciones diferentes.

Aspectos Clave

• Los web components se basan en estándares web como Custom Elements, Shadow DOM, ES Modules y HTML Templates.¹
• Permiten crear componentes personalizados con comportamiento y apariencia única, reutilizables en múltiples aplicaciones.²
• Son compatibles con la mayoría de navegadores modernos, aunque en algunos casos pueden requerir polyfills.²
• Facilitan el mantenimiento y escalabilidad de aplicaciones web al encapsular funcionalidades en componentes independientes.¹
• Pueden ser implementados en el desarrollo de micro frontends en plataformas como Modyo.²

¿Qué son los Web Components?

Los web components son como piezas de Lego en el mundo digital. Son códigos que cubren el diseño interno de partes HTML. Esto incluye el estilo con CSS y las interacciones por JavaScript. Así, se pueden reutilizar fácilmente en diferentes páginas web y apps.³

Fueron creados por expertos del World Wide Web Consortium, conocido como el W3C. Se basan en cuatro reglas principales: Custom Elements, Shadow DOM, ES Modules y HTML Templates.³ Cualquier navegador actual ya los entiende y funcionan bien con distintas herramientas de programación web.³

Beneficios de Utilizar Web Components

Reutilización de Código

Frameworks populares como Angular o jQuery son útiles. Pero, no siempre son fáciles de reutilizar en varios proyectos.³

El W3C ha creado los web components para resolver esto. Ofrecen un método universal para reutilizar HTML, CSS y JavaScript.³

Esto hace que el código sea fácil de compartir. Los web components tienen una sintaxis simple. Eso es bueno para programadores nuevos.

Encapsulación

Los web components tienen ventajas importantes. Promueven la reutilización y la encapsulación del código.³

Con esta encapsulación, se pueden crear componentes personalizados. Tienen su propio estilo y función. Esto hace que el mantenimiento y la modularidad sean más fáciles en las aplicaciones web.

Compatibilidad con Frameworks

Una ventaja clave de los web components es que funcionan con cualquier framework.³

Esto significa que los componentes creados son reutilizables en varios proyectos. No importa qué framework uses, los web components serán compatibles.

Tecnologías que Componen los Web Components

Los web components utilizan técnicas avanzadas. Principalmente, incluyen Custom Elements, Shadow DOM, ES Modules y HTML Templates.³ Custom Elements son etiquetas especiales que guardan dentro suyo HTML, CSS y scripts.³ Shadow DOM oculta partes del código, mostrando solo lo que se debe ver.³ ES Modules ayudan a organizar y compartir código JavaScript entre archivos.³ Por último, las HTML Templates se usan para crear contenido web prediseñado, listo para ser usado.

Uniendo todas estas herramientas, los web components permiten desarrollar piezas únicas de página. Estos componentes se comportan y ven como quieras.

Custom Elements

Los Custom Elements son esenciales para los web components. Nos permiten crear nuestras propias etiquetas en HTML. Esto se logra con JavaScript y el método define.³

Shadow DOM

El Shadow DOM protege el código de nuestros componentes. Escondiéndolo del exterior, solo mostramos lo necesario.³

ES Modules

ES Modules simplifican compartir funciones, objetos o datos entre diferentes partes de nuestra aplicación.³

HTML Templates

Las HTML Templates dejan preparado contenido sin mostrarlo. Este material espera hasta que se le llame para ser usado.³

Introducción a Web Components: Reutilización de Código en Frontend

Los web components ayudan a reutilizar código de HTML, CSS y JavaScript. Se basan en estándares web.² Esto hace que el desarrollo sea más fácil y los componentes sean independientes. Así, no causan problemas al usarlos en varios lugares.² Estos componentes se ajustan a estándares web y funcionan bien en la mayoría de navegadores nuevos. Aunque, en navegadores antiguos, pueden necesitar polyfills o herramientas especiales.

Al usar las tecnologías anteriores, los web components dejan crear componentes nuevos. Tienen un diseño y funcionamiento únicos.²

Ciclo de Vida de un Web Component

Un web component pasa por cuatro etapas claves. La primera es Defined, cuando se registra su custom element⁴. Luego viene el constructor(), donde se crea la lógica del componente⁴. connectedCallback() se llama cuando se añade al documento, y disconnectedCallback() cuando se quita⁴. También hay adoptedCallback(), para cuando cambia de documento, y attributeChangedCallback(), que monitorea cambios en sus atributos⁴.

Defined

Cuando se registra el custom element con window.customElements.define(), entra en el estado Defined.⁴

constructor()

El constructor() permite preparar el componente. Aquí se inicia el Shadow DOM y se establece su función principal.⁴

connectedCallback()

Al agregar el componente al documento, se activa su connectedCallback(). Es útil para tareas al inicio y mostrar contenido.⁴

disconnectedCallback()

Cuando el componente se quita del documento, se activa disconnectedCallback(). Sirve para limpieza final o detener procesos.⁴

Creando un Web Component Sencillo

Empezamos creando una clase especial. Esta clase extiende de HTMLElement.⁴ Ayuda a mantener juntas las partes HTML, CSS y JavaScript de nuestro componente. Así, se hace fácil ponerlo en cualquier web.

En esta clase, usamos algo llamado Shadow DOM.⁴ Es como un mundo privado para nuestro componente, donde no hay peligro de que otros estilos lo arruinen.

Hay funciones especiales, como connectedCallback() y disconnectedCallback().⁴ Ellas nos ayudan a arreglar nuestro componente cuando este se conecta o desconecta de la ventana. No olvidemos que podemos hacer más cosas, como mostrar o cambiar texto, usando otras funciones a nuestro alcance.⁴

Para terminar, debemos registrar nuestro componente. Lo hacemos con la función window.customElements.define().⁴ Al hacer esto, nuestro componente se comporta como cualquier otro HTML en la web. Y así, compartimos nuestro código de una manera ordenada y eficaz.

Herencia y Extensión de Web Components

Para no repetir código en los web components, heredar y extender componentes es útil. Se construye una clase base llamada «Schema».⁴ Esta clase incluye funciones que se usan mucho y se comparten. Luego, creamos nuevos componentes web basados en esta clase.

Así, los nuevos componentes obtienen toda la funcionalidad ya lista. Solo se añade la lógica que les es propia. Esto hace más fácil el mantener y reusar código.

Extendiendo componentes mediante ‘extends’ permite compartir funciones entre componentes. Se reduce el código duplicado, lo que simplifica el mantenimiento.⁴ Además, se pueden usar setters y getters para acceder y modificar propiedades fácilmente.⁴

Usar herencia y extensión en web components ayuda a crear una base fuerte de componentes que se pueden reusar. Ahorra tiempo y esfuerzo al desarrollar aplicaciones web.³⁴

Interactuando con Web Components

Con los web components, puedes definir cómo cambiar y leer las propiedades. Se usan setters para actualizar cosas como el texto mostrado.⁴ Mientras que los getters te permiten mirar el valor de las propiedades.⁴ Suena útil, ¿no? Además, pueden lanzar eventos personalizados. Estos eventos ayudan a decirle a otras partes cuando algo ha cambiado o ha pasado algo importante.⁵ Así, hacer que los web components trabajen bien con el resto de la web es más fácil.

Setters y Getters

Imagina cambiar el texto de un componente web. Usas un setter para hacerlo. O, por ejemplo, usas un getter para ver el color del fondo.⁴ Esta forma de interactuar se llama interacción bidireccional. Ayuda a que los web components se integren bien en sitios web grandes.⁴

Eventos Personalizados

Además de cambiar y leer propiedades, también pueden enviar mensajes especiales. Estos mensajes dicen algo ha cambiado o pasado.⁵ Ayudan a que diferentes partes de un sitio web trabajen bien juntas. Mejoran cómo se organiza y conecta el código de un sitio web.

Herramientas para Desarrollo de Web Components

El desarrollo de los web components es más fácil gracias a herramientas como Polymer y Stencil.² Polymer, de Google, hace simple crear estos componentes y tiene muchas funciones.² Stencil, en cambio, se centra en ser eficiente y rápido.²

Polymer

Polymer, de Google, facilita hacer web components.² Ofrece muchas características y hace el proceso más sencillo.²

Stencil

Stencil se destaca por ser eficiente y rápido.² Es más ligero que Polymer y produce código optimizado sin necesitar más cosas.²

Las dos herramientas, Polymer y Stencil, funcionan en la mayoría de navegadores actuales.² Pero Polymer necesita polyfills para los navegadores viejos.² La decisión de usar Polymer o Stencil depende de lo que más necesite el proyecto. Es importante considerar madurez, tamaño, dependencias y rendimiento.²

En Modyo, los web components son útiles en los micro frontends con herramientas como Stencil o Lit.² Pero en sitios más simples manejados por Modyo, podrían existir limitaciones para usar web components. En esos casos, se pueden emplear alternativas como Snippets de Liquid y variables para hacer elementos reutilizables en plataformas con capacidad SSR.²

Implementación de Web Components en Modyo

En Modyo, los web components son fáciles de agregar en micro frontends. Estas herramientas usan tecnologías JavaScript comunes. Esto hace simple la integración de librerías como Stencil o Lit.²

Para proyectos más pequeños en Modyo, usar web components puede ser complicado. Esto pasa porque trabajan con HTML estático generado desde el servidor.²

Una solución es aprovechar el server-side rendering (SSR) de Modyo. Con Snippets de Liquid y variables, se pueden crear elementos reutilizables fácilmente. Esto ayuda a solucionar problemas de manera eficiente y sostenible.²

Implementar web components en Modyo podría tener desafíos. No obstante, ofrece soluciones fáciles y sostenibles con SSR y Liquid.²⁶

Soporte y Compatibilidad de Navegadores

Los web components tienen respaldo de estándares web. Son amigos de los navegadores modernos.² Aún así, para los navegadores viejos, necesitarás polyfills o herramientas extra. Esto es para asegurar que funcionen bien.²

Chromey otros (como Firefox, Safari y Edge) soportan tecnologías clave de web components. Estas incluyen custom elements, shadow DOM y más.³ Con el aumento del uso de estos estándares, los web components se hacen más fáciles de usar.⁷

Es importante saber que todas las versiones actuales de los grandes navegadores apoyan web components.⁷ También, hay bibliotecas como Lit. Añaden más funciones sin aumentar mucho el tamaño del código (solo unos 5KB más).⁷ Así, usar web components no te hace depender tanto de librerías adicionales.

Así que, el soporte de web components por navegadores modernos es sólido. Esto facilita su uso en desarrollo web.²³⁷

Enlaces de origen

1. https://tomascornelles.com/blog/2023/introduccion-a-vanilla-web-components/
2. https://docs.modyo.com/es/architecture/patterns/web-components.html
3. https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/web-components/
4. https://www.paradigmadigital.com/dev/crea-tus-primeros-web-components/
5. https://portal.gitnation.org/contents/hablemos-de-los-componentes-web
6. https://devjaime.medium.com/microfrontend-4eecf1498cd1
7. https://desarrolloweb.com/articulos/que-son-web-components.html