Web Components + Atomic design + Drupal

Atomic design es una metodología que se enfoca en la creación no de páginas sino de un sistema de componentes, con esto en mente es que podemos unirlo con la creación de web-components, siendo estos últimos componentes en toda su regla y definición serán el objetivo para la creación de una página web flexible.

Entre los mayores retos que se pueden encontrar al utilizar un sistema como el atómico para la creación de componentes cuando la escala de estos aumenta a cantidades grandes, es la posibilidad de regresiones visuales, que un componente se meta en el camino de otro o que incluso hayan reglas de estilos o de javascript que afecten otros componentes, siendo parte esencial la reutilización máxima de todas estas reglas para que el sistema atómico funcione de forma correcta se debe tener un gran cuidado y manejo de las clases y identificadores para poder dirigir bien qué elementos se quieren afectar.

La “autocontenibilidad” de cada uno de los componentes siempre es importante, así como es crucial que funcione correctamente cuando queremos usar un mismo componente varias veces en una misma página, respecto a esto es cuando web-components puede dar un nivel más de ayuda, ya que web-components pueden ser creados utilizando elementos HTML personalizados logrando evitar con mayor facilidad el “miss-targeting” en las reglas de CSS/JS, creando así un nivel de aislamiento del componente en sí mismo, sin la necesidad de crear identificadores únicos para el mismo.

Otra de las capacidades que nos provee los componentes web es la utilización de shadow DOM, que permite encapsular elementos HTML ocultándolos así del DOM general del sitio, llevando así a otro nivel la capacidad de que un componente no sea modificado de ninguna forma por accidente.

Entre la necesidad de reutilizar lo mejor posible el código y poder tener objetivos claros de tus reglas CSS/JS Shadow DOM nos permite tener una balanza entre lo que queremos compartir y tener disponible en toda la página web y lo que queremos tener aislado en sí mismo.

Mientras regularmente o por lo menos en algunos otros sistemas creamos “átomos” y/o “moléculas” con elementos regulares de HTML/TWIG como por ejemplo:

<button
{{ bem(button_base_class, (button_modifiers), button_blockname) }}
{% for  attribute,value in button_attributes %}
  {{ attribute }}="{{ value }}"
{% endfor %}
>
{% block button_content %}
  <span>{{ button_content }}</span>
{% endblock %}
</button>

Manteniendo la misma metodología y el sistema de diseño, el botón antes expuesto ahora podría ser representado como un componente web de la siguiente manera:

@customElement('outline-button')

export  class  OutlineButton  extends  OutlineElement {
  static  styles: CSSResultGroup = [componentStyles];
  @property({ type:  String }) url: string;
  @property({ type:  String }) variant: ButtonVariant = 'primary';

  render(): TemplateResult {
    return  html`
      <button
        class="btn ${this.variant}"
        .onclick="${this.onClick}"
        .onkeyup="${this.onKeyUp}"
      >
        <slot></slot>
      </button>  `;
  }

En los ejemplos anteriores podemos ver dos diferentes formas de crear un botón bajo el sistema de diseño atómico, siendo el botón un átomo que estamos reutilizando N cantidad de veces a través de todo nuestro proyecto. Si bien a nivel de código pueden parecer muy diferentes, el resultado final seguirá siendo el mismo, un botón HTML, y como sabemos en las últimas versiones de Drupal (8/9) podemos utilizar ambas formas de crear elementos, ya sean templates llanos de TWIG o bien web-components lo importante no es la técnica en si de codificación si no la estructura que se le de al código y cuanta reutilización se puede crear.

Si se sigue una estructura basada en web-components, claramente lo ideal sería que todos los elementos del sitio sean web-components, desde los más pequeños, como los átomos y moléculas hasta la definición completa de aquellos componentes que ayudarán a crear una página completa (normalmente llamados bajo el diseño atómico como Organismos), los web-components deberán definir todo aquello que se sabe será reutilizado, y se recomendará que los elementos más pequeños siempre sean “públicos” visibles para todo el DOM sin embargo cuando se entra en al definición de los componentes más grandes es cuando se podrán empezar a ver en ejecución el Shadow DOM, aislando así los componentes y logrando que estos sean 100% autocontenidos y autosuficientes.

Una vez que se definan los componentes más básicos que darán forma a los componentes más complejos se podrán ver interacciones como la ejemplificada en un extracto de contenido de un componente a continuación, el mismo permite la creación de un componente básico de “tarjeta” el cual entre varios elementos que posee tiene:

• Header
• Content
• Footer
• Links
• Botones
• Imagenes

Al ser capaz de juntar todos estos elementos en bajo un solo componente ejemplifica exactamente lo que desde un principio el sistema de diseño atómico busca, aunado a la utilización de componentes web, es un error común creer que web-component es solo para frameworks ya establecidos de JS como react.js, vue.js y otros mas, así como pensar que solo para poder crear componentes complejos sin embargo las herramientas que provee incluso a sistemas de manejo de contenido como Drupal y lo mucho que cambia el paradigma de diseño del Front-end de un proyecto así como la habilidad de utilizar herramientas como Pattern Lab y Storybook para poder avanzar en el desarrollo de toda la plantilla visual sin necesidad de poseer las estructuras funcionales del sitio (back-end) cambian por completo el campo de desarrollo.

export  const  CardWithImageHeader = Template.bind({});

CardWithImageHeader.args = {
  cardHeader:  html`
    <div  slot="header">
      <div  class="max-h-80 overflow-hidden object-cover">
        <outline-image>
          <img  slot="multimedia"  src=${sampleImage1}  alt="Random Image"  />
        </outline-image>
        <p  class="mb-4">Texto (opcional) que estará por encima de la imagen de la tarjeta.</p>
      </div>
    </div>
  `,

  cardContent:  html`
    <div  slot="content"  class="p-4">
      <outline-heading
        level="h2"
        level-size="5xl"
        level-style="semibold"
        class="mb-6"
      >
        Texto encargado de generar un título.
      </outline-heading>
      <p  class="mb-4">
        Contenido principal de la tarjeta, puede ser una línea o un párrafo o incluso múltiples líneas y/o párrafos.
      </p>
    </div>
  `,

  cardFooter:  html`
    <div  slot="footer"  class="p-4 flex justify-between">
      <p  class="font-semibold">02/2020</p>
      <p  class="font-semibold text-blue-500 hover:text-blue-900">
        <outline-link  link-href="#">Link componente</outline-link>
        <outline-button  url="#">Boton componente</outline-button>
      </p>
    </div>
  `,

  bgColorFooter:  'white',
  bgColorContent:  'white',
  isRounded:  true,
  hasShadow:  true,
};

En conclusión, adoptar nuevas tecnologías de desarrollo como lo es web-components dentro de Drupal no tiene porque representar un problema, y tampoco un cambio de metodología o de sistema de diseño, todo lo expresado anteriormente valida que los límites se encuentran solo en las manos del desarrollador, Atomic design + Web-Components + Drupal es totalmente posible, y es una fórmula perfecta para un proyecto exitoso, un proyecto que será capaz de avanzar en su desarrollo de back-end como de front-end en paralelo, y si a la fórmula se le suma una herramienta de presentación como Storybook, el cliente podrá ver avances incluso antes de haber levantado un ambiente de desarrollo en un servidor web, algo que todos los que se encuentran en este mercado saben que los clientes valorarán bastante.