Introducción a Web Components

Los Web Components pueden definirse como un conjunto de tecnologías para desarrollar interfaces y funcionalidades en el lado del cliente utilizando para ello las tecnologías nativas que soporta cualquier navegador. Esto es: HTML, CSS y JavaScript.

Si bien la idea de Web Components (o Componentes Web) nació hace ya unos años, su avance hacia una implementación global y estándar en el desarrollo web no ha sido la esperada.

Afortunadamente, esto ya está cambiando y, aunque su avance es lento, poco a poco las empresas tecnológicas se están sumando a desarrollar Web Components para conseguir ganar tiempo de desarrollo y, por qué no, ganar más dinero gracias a la facilidad de implementación que este conjunto de tecnologías tiene.

La idea de un Web Component es facilitar y agilizar el desarrollo de una característica o funcionalidad web. Concretando, este conjunto de tecnologías permite a los desarrolladores que lo utilizan crear sus propias funcionalidades con código nativo y entendible por el navegador y encapsularlo todo en forma de “librería” o paquete para poder reutilizarlo y/o extenderlo en cualquier otro proyecto.

La reutilización es una de sus principales ventajas, ya que al utilizar código nativo (HTML, CSS, Javascript) no es necesario comprometerse con ningún framework JavaScript como puede ser Angular, React o Vue.js, por lo que cualquier funcionalidad desarrollada con Web Components tan solo debe incorporarse al proyecto que necesitará esa funcionalidad y podrá ser usada sin necesidad de cualquier otro factor externo.

Como se ha comentado anteriormente, los Web Components forman un conjunto de tecnologías. Estas tecnologías pueden ser usadas independientemente de las otras o utilizarlas conjuntamente, que sería el caso ideal.

• Custom Elements: Mediante esta tecnología o funcionalidad es posible crear etiquetas HTML personalizadas, de forma que si son invocadas, ejecuten o actúen conforme se haya definido toda su lógica interna. El objetivo entonces es agrupar tanto la interfaz como su lógica en un mismo elemento/etiqueta HTML creado por el desarrollador. Un ejemplo de Custom Element sería una etiqueta llamada “<app-table></app-table>” y al ser invocada proporcione una estructura de tabla personalizada.
• HTML Templates: La idea de utilizar plantillas surge cuando una misma estructura de código se usa varias veces. Creando una etiqueta “template”, introducir todo el contenido ahí y estableciendo un nombre (“id”) para posteriormente ser referenciado mediante Javascript para introducir ese mismo bloque en otras partes visuales de la aplicación. Este funcionamiento es similar a lo que en Angular se conoce como “ng-template».
• Shadow DOM: Esta característica resuelve muchos de los problemas que aparecen a la hora de definir estilos CSS y/o funcionalidades con JavaScript que no se saben si afectarán a otras partes de la aplicación web por ser necesario tocar el DOM del documento, causando conflictos con otros elementos. Hay veces que se definen estilos CSS para una propiedad HTML concreta sobre su clase o id correspondiente y el resultado no es el esperado. Es entonces cuando se recurren a soluciones como “!important” u otros selectores que no hacen más que cargar y dar señal de que algo no se está haciendo bien. Lo mismo pasa a la hora de definir elementos con una clase CSS o id concreto, que no se sabe si en el mismo documento (mismo ámbito del DOM) puede ocasionar colisión. Es entonces cuando esta funcionalidad entra a solucionar estos problemas. Shadow DOM permite establecer un ámbito propio por cada Web Component, esto quiere decir que cada uno de ellos tendrá su propio DOM por lo que cualquier clase/id definida, estilo CSS o lógica con JavaScript afectará únicamente a los elementos del Web Component.
• HTML Imports: Esta última característica está obsoleta desde 2019. Nació con la primera especificación de Web Components y venía a solucionar la importación de elementos HTML en otros documentos HTML. Con la etiqueta “link” y el atributo rel=”import” y si el navegador era compatible, se podía incluir un archivo .html en otro documento. Esta característica aunque útil, su funcionamiento está cubierto de forma razonablemente parecida con los módulos de JavaScript, a partir de la especificación ES6. Otra alternativa sería utilizar polyfills concretos para esta característica que lo hacen compatible con más navegadores (en su momento, solo Chrome tuvo compatibilidad) como Firefox o Edge.

Los Web Components nacieron con la idea de ser un estándar para el desarrollo web, pero todavía no puede considerarse como tal ya que no todos los navegadores lo soportan al 100%. El objetivo a medio plazo es que acabe siéndolo, por lo que la tendencia de su uso está al alza.

Actualmente, en 2019, los navegadores (en el enlace, apartado “Summary”) que tienen soporte total de las principales tecnologías que conforman los Web Components (todas excepto HTML Imports) son Chrome, Firefox y Opera. Edge, Safari y algunos navegadores para móviles tienen soporte parcial mientras que IE 11 o inferiores no lo soportan.

Según se ha visto en el apartado anterior, los Web Components son ya compatibles, según la página “Can I use” con casi el 90% del uso de navegadores en el mundo.

Pero, ¿qué ocurre con los navegadores que no soportan (o no soportarán, ejemplo: IE 11) Web Components? Una solución a este problema, es la utilización de polyfills. Los polyfills son trozos de código que hacen posible la ejecución de características modernas (como los Web Components) en navegadores que no las soportan nativamente. Aquí hay ejemplos de utilización para trabajar con Web Components.

También está en auge la utilización de librerías para el desarrollo de Web Components. Dos de las más famosas son Polymer y Stencil.js. Aunque parezca curioso, los Web Components salieron con la intención de ser agnósticos a cualquier framework JavaScript. La realidad es que estas herramientas incorporan una serie de ventajas con respecto al desarrollo de estos utilizando código nativo.

Estas herramientas ayudan a definir una estructura de desarrollo para crear Web Components, incorporan Polyfills por defecto para evitar tener que estar pendientes también de ver qué elementos son compatibles o no de forma nativa, incorporan herramientas de Tests unitarios, etc.

Al igual que las numerosas ventajas que incorporan los frameworks JavaScript frente a JavaScript nativo (Vanilla), también pasa lo mismo con las herramientas que han surgido para ayudar con el desarrollo de Web Components.

Estando ya a finales de 2019, los Web Components si bien no se han expandido al ritmo que pretendían, ya están cerca de considerarse una solución óptima a la hora de desarrollar proyectos o funcionalidades concretas reutilizables en multitud de aplicaciones.

Puede ser interesante su uso para desarrollar pequeñas funcionalidades concretas, desplegarlas y usarlas en cualquiera de los desarrollos que se vayan a realizar. Por ejemplo, crear un Web Component de una tabla con datos, de un calendario, de un buscador o de un botón con estilos predefinidos. Las posibilidades son todas las que se puedan imaginar.

La utilización de frameworks como Polymer o Stencil.js hacen el diseño y el desarrollo de cada Web Component mucho más fácil, por lo que es la opción recomendada dado que ya proporcionan una estructura definida (o al menos, esquematizada) para desarrollar, más aparte la multitud de documentación que hay sobre estas herramientas.