Web Components: ¿qué son y por qué usarlos?

11min

En la creación de páginas web muchos sitios usan ya partes de las especificaciones de Web Components (o componentes web) para producir sus interfaces e implementar funcionalidad del lado del cliente. En este artículo, explicamos qué son exactamente los Web Components y qué objetivos o necesidades cubren, así como algunas de sus especificaciones, ya que suponen  una auténtica revolución en el mundo del desarrollo web y, poco a poco, han adquirido un mayor soporte por parte de los principales navegadores.

Los Web Components nos permiten extender el desarrollo para la web por medio de componentes web que cualquier desarrollador podría realizar. Bajándolo más a tierra, los Web Components permiten a los desarrolladores crear sus propias etiquetas HTML con sus propias funcionalidades y  encapsular el código cliente.

Índice

¿Por qué nacen los Web Components?

El estándar de los Web Components está enfocado a la creación de todo tipo de componentes utilizables en una página web, para realizar interfaces de usuario y elementos que nos permitan presentar información (tecnologías que se desarrollan en el lado del cliente). Usando las herramientas que incluyen los Web Components, los desarrolladores pueden crear esos nuevos elementos y publicarlos para que otras personas también los puedan usar.

Este nuevo estándar enriquece la web, y permite reutilizar, extender y crear unos componentes en base a otros.

Además, los Web Components pueden trabajar de manera aislada, permitiendo que las nuevas piezas puedan usarse en el contexto de una web sin que afecten a las otras existentes. Paralelamente, podemos cargar un nuevo componente en una página de manera atómica (es decir, en un solo bloque) en lugar de como se suele hacer con muchas librerías y plugins actuales que obligan al desarrollador a escribir los estilos por una parte y el javascript por otra.

¿Por qué usar Web Components?

En el mundo de la web nos mueven los estándares, lenguajes como HTML, CSS o Javascript. Mucha gente no sabe que algunas de las herramientas que usa en el día a día se pueden sustituir por un estándar. El estándar Web Components nos permite realizar muchas de las funciones que ofrecen las librerías como jQuery, React, Angular, etc. pero sin necesidad de recargar al navegador con pesados scripts que hay que descargar y procesar, consumiendo tiempo, rendimiento y batería de los dispositivos. Hoy todos los navegadores actuales son compatibles con Web Components, así que no hay un motivo para no usarlos.

Definición de Custom Elements (componente)

La definición de un componente, o elemento personalizado, se realiza mediante una clase (de programación orientada a objetos) de código Javascript. Para ello simplemente tenemos que extender la clase del elemento HTML genérico, llamado HTMLElement.

Luego usamos una instrucción del estándar de Web Components para registrar esa clase como implementación del elemento personalizado, indicando el nombre de una nueva etiqueta que queremos crear. Con el único detalle que ese nombre necesita llevar en medio el siguiente caracter «-«.

class FechaHoy extends HTMLElement {
// Definición del componente
}
window.customElements.define('fecha-hoy', FechaHoy);

Como puedes ver, el método usado para registrar un elemento personalizado se llama customElements.define(). Como primer parámetro le indicamos el nombre de la etiqueta y como segundo parámetro indicamos la clase que lo implementa.

Gracias al código anterior, ahora el navegador entenderá la etiqueta fecha-hoy y le asignará el mismo comportamiento que un elemento del HTML genérico, el que podría tener la etiqueta em <div> /em. 

Uso de Polyfill para compatibilidad con Web Components en navegadores

Actualmente, el navegador que más soporte da es Chrome. Para otros navegadores, como Firefox o Edge, es recomendable usar algún tipo de Polyfill.

Cuando una navegador no soporta una tecnología, siempre podemos echar mano de un Polyfill. Es decir, un parche que permite usar características de navegadores nuevos en navegadores antiguos. En este caso, existe una librería Javascript para dar soporte a los navegadores que aún no han implementado el estándar de los Web Components.  Actualmente, la tecnología tiene soporte nativo total en Chrome y en Opera, sin embargo los demás navegadores solo la soportan parcialmente.

El Polyfill para los Web Components lo encontramos en Github, en esta dirección:

https://github.com/WebComponents/webcomponentsjs

Para usarlo simplemente tenemos que colocar el <script> ; hacia el archivo webcomponents.js del anterior repositorio, antes de comenzar a usar cualquier parte de los Web Components.

Librerías recomendadas para el desarrollo acelerado con Web Components

Dado que Web Components es un estándar cada vez más y mejor soportado por los principales navegadores, no es obligatorio contar con una librería adicional para desarrollar tus propios elementos, sino simplemente Javascript convencional. Sin embargo, para el desarrollo acelerado con Web Components existen diversas librerías que nos facilitan mucho la vida.

Las dos más relevantes en estos momentos son Polymer, promovida por Google, y X-Tag, impulsada por la comunidad Mozilla. Polymer está obteniendo gran apoyo por parte del gigante del buscador, que lo usa para el desarrollo de servicios tan destacados como Google Music. Por ello,  supone una excelente plataforma para desembarcar en el mundo de los Web Components, ya que ofrece muchas ventajas para el desarrollo rápido y la interoperabilidad entre los elementos.

Usar un componente

Para practicar un poco con Web Components vamos a usar un componente creado por otros desarrolladores. Nos permitirá de una manera sencilla realizar iconos de banderas del mundo.

Se trata de un componente realizado con Polymer, pero eso realmente no te debe preocupar porque, para usarlo, es realmente indiferente.

Los iconos de las banderas del mundo vienen de un único sprite CSS, lo que optimiza las conexiones con el servidor. Las dimensiones de los iconos son de 32×32.

Para usar el componente tenemos que instalarlo en nuestro proyecto. Para ello, nos valemos del gestor de paquetes Bower:

bower install dw-flagsprites

Una vez instalados los archivos del componente, podemos usarlos en cualquiera de las páginas del proyecto. Para ello tenemos que realizar dos pasos:

1. Importar el custom element:

<link rel='import' href='bower_components/dw-flagsprites/dw-flagsprites.html'>

2. Usar el custom element, indicando el código del país cuya bandera deseas mostrar en el icono:

<dw-flagsprites code='es'></dw-flagsprites>

Como ves, los códigos de los países son estándar, de dos letras como «es», «fr», «pt», etc.

Por supuesto, la etiqueta dw-flagsprites no es reconocida por ningún navegador a no ser que se haya realizado el anterior import del código del componente.

De manera opcional, pero muy recomendable, podemos valernos del mencionado Polyfill, de modo que este Custom Element sea compatible con la mayoría de los navegadores existentes en la actualidad.

Para ello, simplemente tememos que colocar el script al .js del Polyfill. Esto lo haremos escribiendo esta etiqueta justo antes del import del componente.

<script src='bower_components/webcomponentsjs/webcomponents.js'></script>

El código del componente usado para este ejemplo es muy sencillo y lo encontrarás en Github: https://github.com/deswebcom/dw-flagsprites

Personalizar el componente

Ahora veamos cómo aplicar un poco de contenido al componente. En nuestro caso queremos conseguir que el elemento muestre la fecha de hoy cuando se visualice en la página.

El mecanismo más potente para conseguir agregar marcado al componente que acabamos de crear es la generación de «Shadow DOM». Esto es un poco de lenguaje HTML que se puede agregar al componente y que permanecerá encapsulado, sin que otros elementos de la página puedan producir interferencias en él de manera accidental.

Para ello vamos a crear en el constructor el Shadow DOM con el método attachShadow() y agregarle algo de contenido con la conocida propiedad del DOM innerHTML.

class FechaHoy extends HTMLElement {
  constructor() {
    super();

    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<div>${this.fecha()}</div>`;
  }

  fecha() {
    var today = new Date();
    var dia = String(today.getDate());
    var mes = String(today.getMonth() + 1); //January is 0!
    var ano = today.getFullYear();

   return `${dia}/${mes}/${ano}`;
  }
}
window.customElements.define('fecha-hoy', FechaHoy);

Ahora nuestra clase tiene dos métodos, el constructor, que se encargará de crear el marcado encapsulado en el elemento, y una pequeña función que se ocupará de la funcionalidad de obtener la fecha del día actual. Si quisiéramos, podríamos incluso agregar algo de estilos CSS al componente, simplemente colocando una etiqueta <style> dentro del marcado agregado al nodo de shadow DOM. Nos quedaría así:

shadowRoot.innerHTML = `
  <style>
    div {
      font-size: 0.8em;
      color: blue;
    }
  </style>
<div>${this.fecha()}</div>`;

Una vez incluido el script Javascript que define el componente (la clase de implementación que acabamos de realizar y el método de definición del componente «customElements.define»), podemos usar el nuevo elemento que acabamos de crear, como si fuera cualquier otra etiqueta HTML conocida.

<fecha-hoy></fecha-hoy>

El componente entonces lucirá de esta manera: Componente

Ejemplos de Web Components

El ejemplo más típico de Web Components lo podemos encontrar en un mapa de Google. Si no usamos Web Components, cuando queremos mostrar un mapa en una página web, tenemos que crear código en tres bloques:

  1. HTML con el elemento donde se va a renderizar el mapa
  2. CSS para definir estilos, por ejemplo dimensiones
  3. JavasScript para generar el mapa, indicando las coordenadas que deseas visualizar asi como otros detalles de configuración.

Otro ejemplo sería un calendario:

  1. HTML para crear el elemento donde se mostrará el calendario
  2. CSS para indicar las dimensiones de ese calendario, colores, y otros estilos
  3. JavaScript para especificar día, mes, año…

Sin Web Components, para agrupar estos bloques se usaba generalmente la etiqueta IFRAME.

A partir de ahora, gracias a los Web Components podemos expresar un mapa de Google con una etiqueta que simplifica la tarea y la acota a un pequeño bloque independiente:

<google-map latitude='12.678' longitude='-67.211'></google-map>

Para indicar los días libres u ocupados usaremos una etiqueta propietaria en la que indicamos las características del calendario:

<google-calendar-busy-now
    calendarId='TU_ID_CAL'
    apiKey='TU_LLAVE_API'
    busyLabel='Ocupado'
    freeLabel='Estoy libre'>
</google-calendar-busy-now>

Es como si estuviéramos inventando etiquetas nuevas capaces de lanzar el comportamiento que nos permiten no tener el HTML por un lado, el CSS y el Javascript por otro. Obviamente, en algún lugar habrá un Javascript genérico que se encargará de procesar esa etiqueta. Además, veremos que en el HTML se coloca información que antes estaría en el código JavaScript.

Por ejemplo, en el caso del mapa de Google los atributos latitude=»12.678″ longitude=»-67.211″ antes eran datos que se escribían en el JavaScript. Ahora, sin embargo,  se declaran en el HTML. El JavaScript, por tanto, nos vendrá dado por Google o por el creador del Web Component de turno.

Especificaciones de los Web Components

Ahora que ya sabemos lo que son los Web Components, vamos describir las distintas especificaciones que podemos encontrar:

  1. Custom Elements. Describe el método que nos permitirá crear nuevas etiquetas personalizadas para dar respuesta a cualquier necesidad que podamos tener.
  2. HTML Templates. Incorpora un sistema de templating en el navegador. Los templates pueden contener HTML o CSS e inicialmente no se mostrarán en la página. El objetivo es acceder al código que hay dentro del template con Javascript y manipularlo y incluirlo, las veces que haga falta, en otro lugar de la página.
  3. HTML Imports. Importa un pedazo de código que podrás usar en un lugar de tu página. Aunque se llame HTML Import», realmente sirve para cargar tanto HTML como CSS como Javascript. Además, podrás tener dentro un «HTML Template». Mediante código Javascript podremos registrar componentes personalizados o realizar otro tipo de acciones sobre el contenido de la página.
  4. Shadow DOM. Permite tener una parte del DOM oculta a otros bloques de la página para que no interfiera con otros elementos de la página.

Si te interesa el tema de los Web Components, te recomendamos echar un vistazo a webcomponents.org.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: