Web Components

En este artículo vamos a ver desde mi punto de vista y pensando siempre en su utilidad con WordPress, que son los web components y la importancia que van a tener en mis desarrollos. El tema es muy extenso y quizá tenga que ir haciendo una serie de artículos explicando los puntos mas importantes.


¿Dónde se pueden usar en WordPress? La idea principal es poder hacer uso de ellos en algún Theme, utilizarlos también con alguna librería de componentes externa o hacer nuestra propia biblioteca de componentes para usar en desarrollos con WordPress headless.

¿Qué es esto de los web components?

Los Web components son un estándar compuesto de un conjunto de especificaciones que deberemos seguir para poder extender su desarrollo. Son pequeñas piezas reutilizables (HTML Templates) que utilizaremos para crear interfaces de usuario (UI) con su funcionalidad y que podemos reutilizar en distintas secciones de nuestra web.

Un componente web te permite tener su propio nombre personalizado, se representa mediante una etiqueta HTML y encapsula toda su funcionalidad. Están pensados para que se puedan extender de una forma sencilla, de modo que también podamos crear componentes en base a otros.


Así como en el mundo del diseño existe el Atomic Design, podríamos trasladar esta misma idea y representarla como programación atómica.

Atomic Design

Esta encapsulación facilitará su distribución y se podrá reutilizar una y otra vez con mucha facilidad. Imagina tener una etiqueta html (por ejemplo <hero-cta></hero-cta>) que nos añade una sección Hero con un CTA, además donde se pueda personalizar mediante atributos, como por ejemplo:

  • Ancho y alto de la sección, pudiendo utilizar medidas como width: 100% y height: 100VH.
  • Añadir una imagen de fondo con una posición específica.
  • Overlay para resaltar texto y botón, con control de opacidad y color.
  • Texto destacado con control de color, tamaño y grosor.
  • Subtexto con control de color, tamaño y grosor.
  • Botón con control de texto, enlace, colores, estilos varios de un botón y comportamiento en estado hover.
  • Determinar la posición del contenido del Hero.

Como ves, podríamos desarrollar este componente tan completo de manera inicial e ir escalando con el tiempo su funcionalidad hasta el límite que queramos. El resultado de todo esto será, disponer de una etiqueta HTML totalmente personalizable e inteligente, con cierta funcionalidad y que podamos poner en cualquier parte de nuestro desarrollo. Me vienen a la cabeza estas nuevas librerías de componentes inteligentes como TailwindCSS .

¿Necesitas un desarrollo web con WordPress a medida?

Me especializo en desarrollar sitios webs avanzados, programando soluciones personalizadas para proyectos web.

Especificaciones: (APIs)

Custom Elements

Esta especificación nos permite crear nuevas etiquetas HTML personalizadas con un propósito concreto y es la encargada de asegurarse de que los navegadores comprenden como usar estas etiquetas

HTML Templates

Nos permiten definir estructuras HTML en el DOM, que luego podemos reutilizar en distintos lugares del desarrollo

HTML Imports

Permite importar trozos de código HTML, CSS y Javascript para utilizar en algún lugar de la página. El código importado se puede acceder y manipular mediante Javascript. También puede tener HTML Templates, se pueden registrar Custom Elements mediante Javascript o realizar acciones sobre el contenido de una página.

HTML Imports => ES6 Modules

Shadow DOM

Nos permite encapsular el contenido del componente en un nuevo DOM oculto. Este nuevo DOM no interfiere en otros elementos de la página, permitiéndonos tener clases y estilos únicos para ese componente, evitando que extensiones de terceros interfieran en el comportamiento y estilos de un web component.

VENTAJAS

✅ Reutilización de código (DRY)

✅ Utiliza los estándares de la web (construidos de forma nativa).

✅ Características integradas en los navegadores.

✅ Rendimiento ligero, enviamos menos Javascript.

✅ No necesita CSS global o CSS en Javascript (obtenemos un CSS que se lee mejor).

✅ Los componentes funcionan en todas las partes y todos los frameworks.

✅ Se pueden publicar para que otros puedan utilizarlos con una simple importación.

✅ No es necesario utilizar una librería de Javascript.

✅ Muchos sitios están usando parte de las especificaciones en sus interfaces con Github, Youtube.

INCONVENIENTES

❎ No tiene el soporte del 100% en todos los navegadores. (sobre todo Internet Explorer)

❎ Tendremos que poner un polyfill para dar ese soporte que nos falta.

El soporte es estable para todos los navegadores.

Buenas prácticas

  • Piensa siempre en construir componentes que se puedan reutilizar y tengan mucha flexibilidad.
  • Para nombrar un componente, se recomienda utilizar varias palabras separadas por un guión (-), para evitar posibles conflictos en un futuro, si se introducen nuevas etiquetas HTML.
  • Crea soluciones en forma de microservicios.

Ciclo de vida de un componente (los veremos más en detalle en otro artículo)

constructor()
connectedCallback ()
disconnectedCallback ()
attributeChangedCallback (name, oldValue, newValue)
adoptedCallback ()

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    ...
  }
  disconnectedCallback() {
    ...
  }
  attributeChangedCallback(name, oldValue, newValue) {
    ...
  }
  adoptedCallback() {
    ...
  }
}
window.customElements.define('my-custom-element', MyCustomElement );
<my-custom-element></my-custom-element>

En WordPress…

Los web components los podríamos comparar con los bloques, bloques reutilizables, template parts o incluso los shortcodes.

Un bloque en sí, encapsula toda su funcionalidad dentro de un marcado HTML, no deja de ser simplemente HTML, CSS y Javascript construido con React.js, Vue.js, Vanilla Javascript o cualquier librería de Javascript.

Además, su función y uno de los objetivos de un bloque reutilizable es que si modificamos un bloque padre, entonces se modificarán todos los bloques que se hayan generado a partir de este bloque padre, ocurre lo mismo con los shortcodes o los template-parts de igual forma que nos ofrecen los web componets.

Los Template Parts de WordPress, son bloques de código encapsulado que se repiten por todo un desarrollo y nos evitan tener que repetir el código, además nos permiten de igual forma controlar los cambios que queramos realizar, desde un único sitio. Para lo cual utilizamos la función de WordPress

get_template_parts()

Por ejemplo queremos hacer un bloque en WordPress de una tarjeta de perfil de usuario de la persona que ha escrito un post, esto es muy característico en webs de noticas, o blogs colaborativos, donde existen varios editores dentro de una web.

Entonces después de tener cientos de artículos decidimos que la imagen que tenemos como avatar que tiene una forma cuadrada ahora queremos que se represente en el front-end de forma redondeada. Con modificar los estilos del elemento padre veremos cómo afectará ese cambio al resto de bloques, modificando los cientos de artículos haciendo un simple cambio de estilos.

De igual forma podemos añadir una función a este bloque que nos diga, cuántos posts ha escrito esa persona y representarlo en la misma tarjeta. Y así con cualquier modificación o funcionalidad añadida al bloque.

Conclusión final

Como ves en este primer artículo sobre los web components hemos visto ¿qué son?, ¿Dónde los podemos utilizar?, sus ventajas e inconvenientes, su estructura y su utilidad y comparación dentro de WordPress. El futuro de WordPress va ligado a desarrollos con Javascript, con lo que debemos trabajar desde ya en el desarrollo de temas y plugins basados en esta tecnología y hacer uso de los web components, para sustituir aquellas partes que se repiten dentro de un sitio, como los template parts, shortcodes, etc.

Enlaces de interés

¿Qué más podemos hacer?

  • Podemos crearnos nuestra propia colección de componentes.
  • Publicar para que otras personas los puedan utilizar con una simple importación, publicarlo en webcomopents.org.
  • Construye componentes como microservicios.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *