headless

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

      ¿Qué es un Servicio?

          Nuestras aplicaciones están llenas de objetos útiles. Un ejemplo de ello es el objeto "Mailer", cuya implementación está relacionada con la gestión de mensajería y correos electrónicos, o por ejemplo, otros objetos, que nos ayudarán con toda clase de operaciones, relacionadas con tablas y bases de datos.  En resumen, casi todo lo que podemos ejecutar dentro de nuestras aplicaciones, se hace posible a través del uso o implementación de estos objetos.        

          En Symfony, a estos objetos se les conoce como Servicios, y cada servicio, a su vez, habita dentro de un objeto especial llamado Service Container, o contenedor de servicios.

         Debido a que, a partir de la versión 8, el núcleo de Drupal está basado en Symfony, podremos acceder y utilizar estos servicios, además de la posibilidad de crearlos a medida, para implementarlos dentro de nuestros proyectos.

         El proceso de creación e implementación de un servicio en Drupal 9, es relativamente simple. Se trata de crear nuestra clase, dentro del módulo personalizado y a continuación, declararla como servicio para poder reutilizarla en cualquier parte del proyecto, mediante el método conocido como Injección de dependencias. Pero antes de ir más allá, vamos a concentrarnos en conocer los fundamentos relacionados con la creación e implementación de un servicio personalizado en Drupal 9.

     Cómo crear un servicio personalizado en Drupal 9  

          Paso 1 - Creación de módulo personalizado:

               Cómo hemos mencionado antes, lo primero que debemos hacer antes de la creación del servicio, es crear nuestro propio módulo personalizado; si todavía no sabes cómo hacerlo, te invito a que pares un momento, antes de continuar,  y eches un vistazo al artículo Cómo crear un módulo en Drupal 9, donde te explico paso a paso y con un video, cómo hacerlo.

name: Saludo Service
description: 'Create A service Example'
package: drupaladicto

type: module
core_version_requirement: ^8.8.0 || ^9.0

          Paso 2 - Creación de nuestro servicio personalizado:

              Ahora que ya tenemos nuestro módulo personalizado, vamos a proceder con la creación del servicio. Para este ejemplo, crearemos un servicio al que llamaremos , SaludoService.php y que nos devolverá, mediante el método getSaludo(), y de forma aleatoria, varias frases que solemos utilizar para saludar.

              Si quieres más información relacionada con la estructura de los servicios y otros datos relacionados, puedes visitar la Página Oficial de Drupal

              La clase deberá estar ubicada dentro de la carpeta src, tal y como te muestro en la siguiente imagen:

A continuación, copia y pega el código dentro de nuestra clase:              

<?php

namespace Drupal\saludo_service;

/**
 * @file
 * Service Example
 */

class SaludoService {

  private $saludo;

  /**
   * Passing parameter to construct method
   */
  public function __construct(){

    $this->saludo = ['Hola','¿Qué tal estás?', 'Buenos Días!!'];

  }

  /**
   * @return string
   */
  public function getSaludo(){

    return $this->saludo[array_rand($this->saludo)];
  }

}

     Paso 3 - Declaración del servicio:

          Como comentábamos al principio de este artículo, los servicios se alojan dentro de un contenedor llamado Service Container, desde donde podrán ser llamados para utilizarlos dentro de cualquier lugar de la web mediante la Injección de Dependencias, para que nuestro servicio personalizado pueda cumplir con esta característica y por lo tanto, se incluido en este contenedor de servicios, tendremos que declararlo como tal, creando el archivo ".service.yml"., al mismo nivel que está nuestro ".info.yml"

          Dentro de este nuevo archivo, tendremos la estructura que te muestro a continuación, en la cual simplemente estamos declarando el servicio y a continuación, añadimos la ubicación de nuestro servicio. Recuerda respetar los espacios del formato "yml" o no funcionará. Además evita el uso de la tecla TAB para los espacios, en su lugar utiliza la barra espaciadora del teclado.

services:
  saludo_service.saludando:
    class: Drupal\saludo_service\SaludoService

     Paso 4 - Testeo del servicio utilizando un controlador:

          Aunque en versiones anteriores a Drupal 9, podíamos comprobar la ejecución de código PHP, directamente utilizando la interfaz de usuario, a la que se añadía esta opción cuando activábamos el modulo Devel, ésta fue eliminada del mismo, por motivos de seguridad. 

          Por esta razón, para poder comprobar nuestro servicio, en lugar de utilizar PHP Unit, utilizaremos un controlador, que nos permitirá crear una página test, donde podremos ver y comprobar el funcionamiento de nuestro servicio, una vez hayamos instalado y activado nuestro módulo personalizado.

          Para imprimir el contenido del servicio, crearemos una variable a la que asignaremos el método "getSaludo(); ", que hemos definido dentro de nuestro servicio y luego imprimiremos su valor utilizando la función ksm() del modulo Devel.

          Si todavía no sabes cómo crear un controlador en Drupal 9, te invito a que pares un momento antes de continuar y eches un vistazo a este artículo donde explico, con un video y su documentación paso a paso Cómo crear módulos con su Controlador y Plantilla en Drupal 9

          El siguiente código es el que deberá tener nuestra clase controlador SaludoServiceController.php para generar la página y posteriormente llamar al servicio e imprimir los resultados de prueba.

<?php

/**
 * @file
 * Implement hook_controller()
 */

namespace Drupal\saludo_service\Controller;

use Drupal\Core\Controller\ControllerBase;


class SaludoServiceController extends ControllerBase {


  public function content(){


    $miservicio = \Drupal::service('saludo_service.saludando');
    $misaludo = $miservicio->getSaludo();

    ksm($misaludo);

    return [
      '#markup' => $this->t('Hello @misaludo', ['@misaludo' => $misaludo ]),
    ];

  }
}

          Además, te dejo el código del archivo saludo_service.routing.yml, donde he definido la dirección a nuestro controlador y su método content para acceder a la página test.

saludo_service.saludopage:
  path: '/test-page'
  defaults:
    _controller: '\Drupal\saludo_service\Controller\SaludoServiceController::content'
  requirements:
    _permission: 'access content'

 

          Cuando hayas comprobado que no te falta ningún archivo, podrás activar el módulo y acceder a la url definida en el path del routing.yml "/testpage" y deberías ver el mismo resultado que te muestro a continuación.

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     Ya que tenemos arrancando y funcionando, todo lo que vamos a necesitar, para comenzar con nuestra implementación usando diseño de patrones, empezaremos por realizar los primeros cambios que marcarán el estilo y apariencia de nuestra web. Para ello, realizaremos la exploración de los archivos del Storybook o guía de estilos, para ir conociendo las opciones disponibles y sacar el mayor provecho de ello.

     Paso 1 - Definición de la paleta de colores:

        El primer lugar donde comienza nuestro viaje hacia la personalización de nuestra guía de estilos, será la definicición de la paleta de colores que vamos a utilizar en nuestra web. Para ellos tendremos que abrir varios archivos, que iremos explicando paso a paso.

        Si abrimos nuestra guía de estilos, encontraremos la Paleta de colrores, dentro del menú Colors, tal y como muestro en la siguiente imagen, desde aquí podremos comprobar en tiempo real, cada uno de los cambios que realicemos relacionados con este apartado.

      Ahora que ya tenemos claro, dónde comprobaremos los cambios aplicados, abriremos el primero de los archivos de configuración, relacionados con esta parte, que encontraremos, dentro de "NUESTRO-THEME-PERSONALIZADO/components/00-base/01-colors/_00-colors-vars.scss". Se trata de un archivo, en formato SASS, donde se definen todos los colores, utilizando variables.

     Una vez entiendas el concepto, será fácil comenzar a aplicar los cambios, aunque no tengas conocimientos previos de SASS, ya que al ejecutar el comando para arrancar la guía de estilos (npm run develop), ésta se encargará de realizar las compilaciones para que todo se vea de acuerdo a lo que se ha definido.

     Vamos a realizar una rápida comprobación de que todo funciona correctamente, y de que no tendremos que ejecutar comando de SASS, para ver los resultados inmediatamente; en la última línea del archivo encontraremos la variable "$blue: #005de0;", vamos a cambiar el código del color por el de uno completamente diferente ($blue: #ff6600;) y guardaremos los cambios, sin hacer nada más, a continuación, volveremos a la guía de estilos y veremos de inmediato el cambio, en el color llamado PRIMARY.

     El otro de los archivos, relacionado con la paleta de colores, ubicado justo debajo el anterior, es el llamado _01-colors-used.scss, si lo abrimos, veremos que existen dos variables principales, que definen dos Perfiles de color ($defaultColors y $darkColors), para nuestra instalación, que se mostrarán en función del navegador, el modo default se muestra para todos navegadores en general y el modo Dark, sólo en aquellos navegadores que soporten este tipo de presentación, como los dispositivos MAC. 

     Dentro de cada uno de estos perfiles, están todas las variables que se encuentran definidas en el anterior archivo, con el nombre que se muestra dentro de la paleta. Esta es una de las razones por las cuales al realizar el cambio código de color en el archivo de variables, se aplica automáticamente al resto de archivos relacionados.

     Esto quiere decir, que además de los colores existentes, podremos agregar nuestros nombres personalizados y asignarles las variables que hayamos definido en otro archivo para poder emplearlas al momento de aplicar nuestros estilos.

   Aplicando lo colores dentro de nuestra hoja de estilos

      Durante el proceso de creación de nuestro proyecto, puede que en algún caso necesitemos utilizar, alguno de estos colores, en un elemento en concreto, para que el color se aplique correctamente, en lugar de llamar a la variable de forma directa, tendremos que emplear la función clr(), de esta foma, mantendremos el concepto de "centralizar" y obtendremos mejores resultados al utlizar el diseño de patrones.

     El siguiente código, muestra la forma en que se aplica el color a los enlaces del menú principal, dentro del archivo _00-main-menu.scss, ubicado en "NUESTRO-THEME-PERSONALIZADO/components/02-molecules/menus/main-menu/ _00-main-menu.scss.

&--open {
  background-color: clr(background);
  display: block;
  left: 0;
  overflow-y: scroll;
  position: absolute;
  top: 134px;
  right: 0;
  width: 100%;
}

     Configuración de los nombres de los colores en el Storybook

         Por último, pero no menos importante, está el archivo donde se definen los nombres de los colores que se muestran dentro de nuestra guía de estilos, se trata del archivo colors.yml. Podremos comprobarlo, si cambiamos el nombre de cualquiera de los colores y, sin hacer nada más que guardarlo, abrimos la guía de estilos.

     Una vez tengamos configurada correctamente la paleta de colores, todos los cambios relacionados con esta parte, estarán centralizadas, fáciles de modificar, y además, dichos cambios se aplicarán autormáticamente, a través de todo el proyecto Drupal.

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     Llegados a este punto, ya tenemos al menos los conocimientos básicos, sobre el diseño de patrones o atómico, también conocido como "Pattern Labs", además de haber realizado, un pequeño recorrido por la estructura de archivos de la guía de estilos o storybook, que nos generó la instalación del módulo Emulsify y de nuestro tema personalizado, dentro del proyecto Drupal 9, con el cual estamos trabajando en este curso.

     Es el turno de comenzar a aplicar este diseño de patrones, dentro de una de las plantillas Twig de Drupal 9, para entender mejor las posibilidades ofrecidas, por esta nueva forma de trabajo, cuyo fin principal, además de permitir que los diseñadores puedan trabajar paralelamente con los programadores, sin previos conocimientos sobre Drupal, ni dependencias entre ellos; la posibilidad de "Centralizar" y "Reutilizar" al máximo todos los componentes, disminuyendo así el tiempo de implementación, en todas sus fases.

     Aplicando Pattern Labs en las plantillas Drupal 9

          Paso 1 - Activación del modo Debug o Depurador de Drupal:

             Ya que el diseño de patrones, implica la modificación de las plantillas que vienen por defecto en Drupal, lo primero que deberíamos hacer antes de comenzar con esto, será activar el modo debug o depurador, para conocer el nombre de cada pantilla, de acuerdo con los nodos, campos o vistas que estemos modificando. Existen dos meneras de hacerlo:

            Opción 1: Consiste en renombrar el archivo default.services.yml, ubicado dentro de la carpeta /web/sites/default, y a continuación cambir los valores de debug y cache, como se muestra en la imagen.

           Opción 2: Configurando el archivo settings.local, tal y como te explico en Configuración desarrollo local Drupal 8 Haz clic aquí.

     Una vez hayas activado el modo depurador, ejecutarás los comandos drush cr y drush updb, para borrar la caché de drupal y actualizar la base de datos. Entonces al hacer clic en la tecla F12 o seleccionar la opción explorar del navegador, verás los nombres sugeridos por drupal para las plantillas, como te muestro en la siguiente imagen.

         Paso 2 - Explorar plantillas por defecto generadas por Emulsify

             Como ya hemos mencionado antes, uno de los propósitos del Diseño de patrones es reutilizar siempre que podamos, por esta razón, cuando se genera el Tema personalizado, Emulsify crea varias pantillas Twig, que nos pueden servir, tanto como guia para entender la manera en que trabaja o como base para generar plantillas más complejas.

            Si abrimos la carpeta Templates, veremos varias de ellas, clasificadas por su tipo, esta estrucutra nos facilita la ubicación y nos marca la guia de trabajo que deberíamos mantener durante nuestro desarrollo.

        Paso 3 - Explorar nuestros contenidos y opciones a implementar

           Es muy importante tener claro que nuestra mentalidad debe ser "NO REINVENTEMOS LA RUEDA", esto significa, que deberíamo evaluar constantemente, a medida que vayamos avanzando en nuestro proyecto, para saber si es necesario crear un nuevo componente o simplemente reutilizar uno que ya esté listo.

          Por ejemplo, si vamos a la carpeta llamada VIEWS, econtraremos dentro la plantilla para una Vista del tipo lista sin formato, con el nombre views-view-unformatted--frontpage.html.twig, esto significa que si en nuestra página principal pensamos tener un listado de artículos, productos o de imágenes, sólo tendríamos que crear una vista del tipo correspodiente y obtendríamos un resultado al instante.

         En la siguiente imagen, he generado algunos artículos, utilizando el módulo Devel y sin hacer nada más, como por defecto, los artículos vienen configurados para mostrarse en la página principal del sitio, obtuve lo que te muestro a continuación:

         Si abrimos la plantilla por dentro, encontraremos el siguiente código...

{% embed "@organisms/grid/grid.twig" with {
  grid_type: 'card',
  grid_label: title
} %}
  {% block grid_content %}
    {% for row in rows %}
      {{ row.content }}
    {% endfor %}
  {% endblock %}
{% endembed %}

          Eplicación: 

          Lo primero que vemos aquí es la inclusión o importación del modelo o patrón para este tipo de vista, en este caso a través de embed en lugar de include, a continuación se definen el tipo de patrón para los contenidos que se mostrará dentro del las cuadrículas, usando CARD, y el campo título de la vista.

         Si vamos a la documentación de la Página Oficial de Symfony, podremos leer la siguiente explicación:

" La etiqueta incrustada combina el comportamiento de incluir y extender. Le permite incluir el contenido de otra plantilla, al igual que lo hace include. Pero también le permite anular cualquier bloque definido dentro de la plantilla incluida, como cuando se extiende una plantilla.

Piense en una plantilla incrustada como un "esqueleto de micro diseño ".

          En la siguiente parte del patrón de diseño, se define un bloque, dentro del cual estará contenida la vista completa, por eso verás que al final están las etiquetas de cierre correspondientes al cierre del bloque y al cierre del embed declarado al principio.

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     IMPORTANTE: Emulsify nos permite crear un BASE THEME a partir de Emulsify NO un Subtheme     

     Si eres de l@s que estás interesad@ en aprender a implementar, las utilizar tendencias en maquetación y diseño web, este es uno de los principales módulos que deberías considerar conocer, ya que te ayudará, en caso de que quieras darle un Giro de 360º a tus proyectos en Drupal, utilizando los componentes y el conocido como Diseño Atómico. Si quieres aprender más sobre esta tendencia revolucionaria, tienes el curso Introducción a Pattern Lab y Drupal 9 usando Emulsify.

     Emulsify Drupal, según su página oficial, "es una herramienta de código abierto para crear sistemas de diseño con componentes reutilizables y pautas claras para los equipos. Emulsify ayuda a las organizaciones a escalar su diseño al tiempo que reduce los costos, agiliza los flujos de trabajo y mejora la accesibilidad".

     A diferencia de otros themes contribuidos de Drupal, su instalación supone varias diferencias con respecto al resto. Su propósito fundamental, es ofrecernos todo lo que vayamos a necesitar para crear un Base Theme para Drupal, utilizando componentes. 

     Por esta razón, he creado esta guía paso a paso, de la instalación del módulo, desde su Página oficial 

     Prerrequisitos:

• PHP 7.1
   

• Node (we recommend NVM)
   

• Composer
   

• Yarn (optional)

   Instalación del módulo Emulsify Drupal para Drupal 9

       Ya que desde la página de Drupal han anunciado hace tiempo, que el final del soporte tanto para Druapl 7 como para Drupal 8, terminará previsiblemente, a finales de este mismo año 2021, he decidido enfocarme en la instalación para Drupal 9, pero puedes seguir la guía con los cambios para otras versiones que están en la misma página.

     Paso 1 - Descarga del módulo usando composer

        A estas alturas, ya debes estar totalmente familiarizado con la instalación de módulos y themes en Drupal, utilizando el gestor de paquetes Composer, que nos facilitará enormemente las tareas de descarga o actualización de nuestros proyetos.

        Así que, nos colocaremos en la carpeta raíz del proyecto y en este caso, el comando a utilizar será el siguiente:

composer require emulsify-ds/emulsify-drupal

     Paso 2 - Preparación para generar el Tema Base

       Aquí es donde comienzan las diferncias, con respecto a otras instalaciones, como por ejemplo la del módulo Bootstrap, en este caso, al descargar el módulo se ha creado la carpeta contrib, dentro de la carpeta themes y dentro podremos ver todos los archivos relacionados con Emulsify, a continuación, nos moveremos hacia dicha carpeta, para poder generar un base theme que heredará todas las características y funcionalidades necesarias. O sea, que escribiremos en consola lo siguiente para movernos hasta la carpeta del theme padre:

cd web/themes/contrib/emulsify-drupal

   Paso 3 - Generar el Tema base

     Una vez colocados dentro de la carpeta del Theme padre, podremos ejecutar el siguiente código, para que se autogeneren todos los archivos relacionados con nuestro nuevo Tema base o personalizado:

php emulsify.php "THEME NAME"

    Si quieres conocer alguna otras opciones puedes ejecutar también el comando:

php emulsify.php -h

   Paso 4 - Descargar las dependencias del Base Theme

     Como he mencionado al principio, esta instalación rompe con lo que estábamos acostumbrados, esto significa, que tendremos que colocarnos dentro de la carpeta de nuestro nuevo_base_theme, que acabamos de generar, para poder comenzar con la descarga del resto de dependencias que hace tan pontente este tipo de instalación:

cd ../../custom/base_theme_name/

    Paso 5 - Instalación de dependencias para el Base Theme

     Este proceso suele tardar algo más de lo habitual, ya que tendrá que descargar un considerable número de archivos, destinados a facilitarnos la vida de aquí en adelante, por lo que no deberías inmpacientarnos. En mi caso en particular, tuve que abrir una segunda pestaña en mi consola, para asegurarme de que no se había quedado bloqueada la descarga, podemos usar cualquiera de las siguientes opciones:

yarn

npm install

 

   Paso 6 Construcción del Tema base

     Ya que tenemos descargardo, todo lo que vamos a necesitar para comenzar con nuestra implementación, nos toca construir la estructura, antes de poder utilizarlos en nuestro proyecto, también tenemos dos opciones a elegir:

yarn build

npm run build

 

   Paso 7 - Habilitar el base theme y sus dependencias

     Como ya tenemos todo a punto y listo para comenzar, nos toca activar el theme y sus dependencias, para ello utilizaremos la herramienta Drush, además tendremos que movernos a la carpeta principal para poder ejecutar el comando, fíjate que en lugar de utlizar en se emplea then, que es el comando correcto a partir de las versiones de drush =>9:

drush then base_theme_name -y && drush en components emulsify_twig -y

   Paso 8 - Activación del Tema Base

     Ahora sí, ya podemos activar nuestro theme para comenzar a soltar nuestra imaginación y creatividad, para ello, volveremos a utlizar la herramienta Drush:

drush config-set system.theme default base_theme_name -y

 

  Comprobación

    Si nos vamos a la página principal de nuestro proyecto, ahora podremos ver el cambio en la estructura y diseño para comenzar con esta nueva aventura...

   Arrancando la Guía de Estilos

     Si todo funciona correctamente, podremos arrancar nuestra guía de estilos, para comenzar a trabajar con el diseño, en paralelo con el desarrollo de nuesro proyecto Drupal, ejecutando el siguiente comando desde dentro de la carpeta de nuestro tema personalizado

npm run develop

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

       Uno de los cambios más significativos, al utilizar Emulsify y Pattern Lab en nuestros desarrollos, con respecto todo lo conocido hasta ahora, en cualquier proyecto de Drupal, es la implementación de la Metodología BEM, que afecta a todas las plantillas y componentes que vayamos creando a medida que generamos nuestra estructura.

     El objetivo principal de esta metodología, es simplificar al máximo, tanto la estructura de cada componente, como la gestión de sus clases y estilos, dentro de nuestros archivos css, facilitando de esta forma, el mantenimiento y comprensión de todas las posibles variantes o transformaciones de color, tamaño, dimensiones, etc., sobre cualquiera de los elementos de nuestro proyecto. 

     En la siguiente imagen, a pesar de que se trata de un proyecto Drupal 9, con un diseño a medida, creado a partir de un Subtheme personalizado con Bootstrap Barrio, puedes apreciar la intrincada estructura de <DIV></DIV>, que se ha generado, para que poder llegar hasta el elemento Botón.

   ¿Qué cambios implica la metodología BEM?

      El concepto principal es simplificar cualquier estructura en tres partes fundamentalmente, que son el Bloque, el Elemento y los Modificadores. Esto permitirá dividir todo en componentes más fáciles de reutilizar y mantener.

     La metodología BEM, propone la siguiente forma para nombrar nuestros componentes:

     class="nombrebloque": Para identificar el elemento padre o div principal.

     class="nombrebloque--elemento": Se añaden dos guiones bajos para el nombre del elemento, es decir, aquello que esté contenido dentro del bloque

     class="nombrebloque--elemento-modificador": Esta nueva clase, permitirá introducir la variaciones, por ejemplo, de color, tamaño, etc, para un elemento que se comparte dentro de varios componentes. 

     En la siguiente imagen, sacada desde su página oficial, nos explican una propuesta de implementacíon, en el caso de configurar un componente ATOM, del tipo botón. El nombre del Bloque, en este caso sería la clase button, que cómo puedes ver está presente al pricipio, en los tres elemementos.

     El Elemento, sería la clase button--state, que hace a la posibilidad de añadir una característica específica, a medida que vayamos utilizando dicho componente y por último está el Modificador de esta clase, que añade un dichas variaciones al estado del botón, button--state-danger. Presta atención a la nomemclatura en cada uno de los casos, para que tengas claro, a qué se refiere cada uno de ellos.    

   Si quieres conocer más sobre la Metodología BEM, visita su Página Oficial.

   ¿Cómo aplicar BEM con Emulsify en Drupal 9?

       En el caso de Drupal, al implentar Emulsify, en algunos casos, los guiones medios son sustituidos por guiones bajos, y como utilizaremos SASS, ya que es compatible con Emulsify, podremos aplicar estilos de manera muy simplificada.

       Ya que tenemos instalado y arrancado nuestra guía de estilos Storybook, que explicamos en el capítulo Emulsify Drupal, podremos echar un vistazo al componente BOTON, dentro de la carpeta de componentes ATOMS:

 

     Ahora, vamos a utilizar nuestro IDE para explorar y explicar un poco, la implementación de BEM que nos propone Emulsify, en este proyecto desarrollado con Drupal 9, para ello navegaremos hasta la carpeta dentro de /themes/custom/MISUBTHEME/components/01-atoms/buttons y a continuación abriremos el archivo button.twig, donde veremos lo siguiente:

{#
/**
 * Available variables:
 * - button_content - the content of the button (typically text)
 *
 * Available blocks:
 * - button_content - used to replace the content of the button with something other than text
 *   for example: to insert an icon
 */
#}

{% set button_base_class = button_base_class|default('button') %}

{% set additional_attributes = {
  class: bem(button_base_class, button_modifiers, button_blockname),
} %}

<button {{ add_attributes(additional_attributes) }}>
  {% block button_content %}
    {{ button_content }}
  {% endblock %}
</button>

 

   Explicación:

{% set button_base_class = button_base_class|default('button') %}

     Lo primero que podemos observar es la declaración una variable, cuyo valor es el nombre del Bloque, en este caso será la clase button_base_class, una vez importemos este bloque dentro de nuestras plantillas de Drupal, podremos asignarle un valor dinámico, dependiendo de las necesidades para nuestro proyecto, la forma de realizar este paso lo explicaremos en detalle más adelante.

{% set additional_attributes = { 
  class: bem(button_base_class, button_modifiers, button_blockname),
} %}

     En esta línea, en el caso específico del botón, se están definiendo las clases que generarán, de forma dinámica, los nombres equivalentes, para el Bloque, Elemento y el Modificador, respectivamente, concatenando la clase button_base_class y añadiendo los guiones correspondientes; esto quiere decir, que si explorarmos el código en el navegador, verás que se han generado, el nombre del Bloque, y luego, con dos guiones, en el caso del Elemento y uno el el caso del Modificador.

     Quizás el botón, al ser una de las estructuras más simples, no te permite ver todo lo que genera Drupal automáticamente, pero si exploras la molécula, llamada Main, encargada de generar la plantilla de ejemplo para el menú principal, en el navegardor, verás un claro ejemplo de todo. donde la clase toggle-expand es el nombre del bloque, toggle-expand__open, es el nombre del elemento y si quisiéramos aplicar un cambio de color, toggle-expand__open_red

  Añadiendo las clases personalizadas en nuestros componentes en Drupal

    Una vez hayamos declarado las variables, podremos añadir valores personalizados, dinámicamente en nuestros componentes, mediante la funcionalidad de Twig para agregar atributos.

    Si te fijas en el nombre que está entre los paréntesis, podrás comprobar que es el mismo que se declara al principio, en la variable, por lo que podrás pasar como parámetros los nuevos valores, para cada uno de estos "atributos adicionales" y adaptarlos a las necesidades específicas del proyecto.

<button {{ add_attributes(additional_attributes) }}>

   En la siguiente imagen, podrás ver cómo se puede alterar uno de los valores, declarados en un componente, que en este caso está dentro de otro, llamado CARD y cuál es el resultado final, al explorar el código generado en el navegador:

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     IMPORTANTE: Emulsify nos permite crear un THEME a partir de Emulsify NO un Subtheme     

     Desde la aparición de Pattern Lab y su adaptación para poder implementarlo con Drupal 8, se han ido realizando un gran número de cambios, tanto en la estructura de todos los módulos relacionados, especialmente Emulsify Drupal, como en la manera de activar y utilizar comandos, librerías y el código dentro de las plantillas, que permiten conectar nuestro diseño con el proyecto.

     En este capítulo trataré de abarcar todos los prerrequisitos, que necesitarás conocer, antes de comenzar a trabajar de lleno con Pattern Lab y Emulsify en Drupal 9. Y que tengas la información más actual relacionada, ya que en el momento en que escribo este artículo, si visitas la Página Oficial de Emulsify, y ves sus videos, te darás cuenta, de que no están actualizados desde su lanzamiento en 2016, a pesar de que casi todo ha sido modificado para adaptarlo a Drupal 9 y posteriores.

   Novedades y Prerrequisitos en Pattern Lab para Drupal 9

     El módulo Pattern Lab no es compatible para Drupal 9

        La primera noticia es bastante impactante, ya que los primeros cuatro videos, que están publicados en la Página Oficial de Emulsify, en el apartado de Videos y tutoriales, nos muestran las pantallas y algunos comandos y ejemplos, implementando el módulo Pattern Lab, compatible con Drupal 8, pero que ha sido totalmente sustituido por el nuevo módulo Emulsify Drupal, cuya instalación ya tienes disponible dentro de este curso y que nos permite generar un Theme basado en Emulsify, no un Subtheme, como estábamos acostumbrados.

     Las Páginas de referencia para Twig ya no son de Sensiolbas sino de Symfony

        Esto también es bastante importante, ya que lo enlaces que aparecen en casi todos los videos relacionados con Pattern Lab y Drupal, nos llevan a los enlaces de la documentación de la empresa Sensiolabs, que ahora ya están bajo el dominio de Symfony. Por lo tanto, si quieres aprender sobre el uso de las funcionalidades como include, embed o extends de Twig deberías visitarte la Página Oficial de Synfony para Twigs

     La compatibilidad con Drush ha cambiado

        Como todo evoluciona, también es el turno de actualizarnos, con respecto a los comandos drush de los videos, relacionados con la instalación y ejecución de Emulsify Drupal, el cambio más importante es que el comando yarn start o npm start, que nos permitía arrancar nuestra Guía de estilos, ha sido cambiado por el siguiente comando:

npm run storybook

yarn develop

npm run develop

 

   Nuevos módulos para trabajar con las plantillas Twig y Emulsify

     Otro de los cambios más importantes en esta evolución, sobre la implementación de Pattern Lab en Drupal 9, es la creación de varios módulos, que nos facilitarán la compatibilidad entre las plantillas y el código, y que al principio teníamos que instalar desde el repositorio github de four kichen, a continuación te añado el enlace a las páginas de cada uno de ellos:

• Components! El módulo Componentes facilita que un tema organice sus componentes. Permite que los temas (y módulos) registren los espacios de nombres de Twig y proporciona algunas funciones y filtros adicionales de Twig para usar en las plantillas de Drupal.

• Twig Attributes Twig Attributes permite a los desarrolladores establecer atributos HTML (como clases o una identificación) en una plantilla Twig principal a elementos en una plantilla secundaria, eliminando la necesidad de crear una anulación de plantilla o implementar un enlace de preproceso solo para agregar un atributo.

• Emulsify Twig Este módulo proporciona dos extensiones Twig utilizadas en el Emulsify Design System.

• Twig Field Value Twig Field Value permite a los usuarios de Drupal 8 obtener datos parciales de matrices de renderizado de campo.

• Twig Typography Este módulo proporciona un filtro Twig que integra la biblioteca PHP Typography y la aplica a cadenas.

• Twig Render This Este módulo le permite representar campos y entidades en sus plantillas Twig.

• More Global Variables Este es un pequeño módulo que brinda a los usuarios algunas variables globales que luego pueden imprimirse en cualquier plantilla de ramitas.

• Twig Tweak Twig Tweak es un pequeño módulo que proporciona una extensión Twig con algunas funciones y filtros útiles que pueden mejorar la experiencia de desarrollo.

• BEM Un tema base de Drupal obstinado que proporciona clases de estilo BEM en todas partes.

• Devel Que nos servirá para depurar nombres de las variables

• Devel Kint Extras Los complementos de Kint responsables de mostrar los métodos disponibles de los objetos y las propiedades de las clases estáticas se eliminaron del módulo Devel para Drupal 8 desde la versión 3.0. Este módulo vuelve a agregar esas características como un módulo externo.

• kint-php/kint: Añade funcionalidades a Devel y se instala con composer "composer require kint-php/kint"

 

     Requisitos de instalación implementación Guia o Storybook en Drupal 9

        Como ya sabrás, esta clase de implementación está pensada para que los diseñadores y desarrolladores puedan trabajar en paralelo, por lo tanto, una vez esté funcionando el Drupal9 y se haya generado el Theme basdo en Emulsify, podremos acceder a la guía de diseño con el comando mencionado al principio e instalar y configurar algunas herramientas para comenzar a diseñar.

      El Preprocesador de CSS Sass

      Node Version Manager

   Errores con Twig

     En toda implementación existe la posibilidad de encontrarnos con algunos errores, uno de ellos es el uso del include en las plantillas Twig. Te dejo el enlace al issue reportado en la Página de Drupal https://www.drupal.org/project/drupal/issues/2817553

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     En el desarrollo de páginas web, existen múltiples escenarios y posibilidades, que nos permiten especializarnos en determinadas herramientas o procedimientos, de acuerdo con nuestras destrezas y/o formación. De ahí que, es cada vez más habitual, encontrar algunos profesionales, que aunque inicialmente se habían formado o especializado en el Diseño Gráfico, hayan decidido experimentar o reinventarse, dedicándose a la maquetación web o Diseño Frontend, como se conoce hoy en día.

     Uno de los problemas más frecuentes, al inicio de esta nueva experiencia, es la rapidez con la que puede cambiar, todo lo relacionado con la apariencia y funcionalidades de la web, ya que intervienen factores como la experiencia de usuiaro (UX), la velocidad de respuesta de la web al conectarse al servidor, o la posilidad de adaptarse a múltiples dispositivos.

     De ahí que resulte casi imposible, mantenerse al día en una herramienta específica o procedimiento, pensado para facilitar o mejorar el diseño Frontend, ya que constantemente se efectúan cambios y mejoras, que nos pueden crear una sensación de frustración, a pesar de que hayan pasado a penas, un par de años desde que aprendimos, por ejemplo, un framework como angular, react, vue.js, next, nuxt o cualquier otro.

     Por suerte, hace ya varios años, a un señor de nombre Brad Frost, se le ocurrió una idea revolucionaria, que todavía se aplica a día de hoy, y que nos facilitará mantener el ritmo de evolución, acorde con cualquier herramienta o procedimiento relacionado con la maquetación o Frontend. Se trata de la metodología llamada Diseño Atómico o Atomic Design, cuyo propósito fundamental es, según sus propias palabras:

"Atomic Design detalla todo lo que se necesita para crear y mantener sistemas de diseño sólidos, lo que le permite implementar interfaces de usuario más consistentes y de mayor calidad más rápido que nunca. " 

     ¿Qué es el Diseño Atómico?

        En resumen, el objetivo de esta metodología es establecer una jerarquía, que nos permita analizar y dividir,  nuestros proyectos web, en varios elementos y/o estructuras, comenzando por el más sencillo, al que llamaremos átomo, ejemplo un icono, hasta ir al más complejo que sería la unión de todos en un Sistema, ejemplo una página completa.

       La siguiente imagen muestra de forma más gráfica el conjunto de fases, o elementos que forman esta metodología:

     Nuestro proyecto web es un proyecto de piezas Lego

        Todos conocemos el famoso juego para niños, conocido como Lego, formado por varias piezas que permiten crear, prácticamente toda clase de estructuras complejas, a partir de la unión de éstas. Si comparamos el juego con un proyecto web en este caso, podríamos entender, más fácilmente, de qué se trata esta metodología y lo mucho que puede aportarnos ante cualquier reto de desarrollo.

        A continuación te cuento en qué consiste cada una de las "Piezas" con las que deberíamos trabajar a partir de ahora, para sacar el mayor provecho de este nuevo enfoque. 

        Recuerda que esto es sólo una guía, para simplificar la categorización de tu proyecto, no obstante, puedes añadir tanto como necesites de acuerdo a tus propias necesidades de análisis y estructura.

      Atomo

         Son aquellos elementos más pequeños o con una jerarquía menor. Un átomo es aquel elemento que por sí mismo no significa nada y necesitará ser acompañado por otros átomos para tener sentido. Un ejemplo de un átomo podría ser un título, un texto, un área, un icono, una línea. El átomo debe ser nombrado, definido y acotado con márgenes para conocer cómo se comporta al ser juntado con otros átomos y no crear una lucha entre ellos.

     Moléculas

        Cuando dos o más átomos se juntan, crean moléculas. Las moléculas es el mínimo elemento que empieza a poder ser usado de manera aislada. Una molécula ofrece información suficiente como para guiar una acción dentro de la interfaz. Se debe evitar sobrecargar la molécula de átomos. Éstas son secciones en nuestra interfaz una cabecera, un footer, un post, etcétera. Como ocurre con los átomos, la molécula debe ser definida y acotada de nuevo para poder saber como se comporta en convivencia con sus semejantes.

    Organismos

        Formados por dos o mas moléculas, los organismos forman una sección o parte de nuestro producto. Los organismos ofrecen una experiencia completa al usuario. En productos digitales sencillos como una web, organismos serían todas aquellas páginas (home, contact, about, etc.) que la forman.

     Sistema

        El sistema, por lo tanto, sería el todo. La web, aplicación, software o cualquier producto digital que estemos construyendo.

     Aplicado a un entorno web, en la siguiente imagen podrás ver la diferencia entre átomo y molécula, en el caso de un carrusel de imágenes, que a su vez, forma parte de un organismo mayor, que sería la página Home o principal del proyecto.

     El diseño atómico es una metodología compuesta por cinco etapas distintas que trabajan juntas para crear sistemas de diseño de interfaces de una manera más deliberada y jerárquica. Las cinco etapas del diseño atómico son:

1. Átomos
2. Moléculas
3. Organismos
4. Plantillas
5. Paginas

     El diseño atómico no es un proceso lineal , sino un modelo mental que nos ayuda a pensar en nuestras interfaces de usuario como un todo cohesivo y una colección de partes al mismo tiempo . Cada una de las cinco etapas juega un papel clave en la jerarquía de nuestros sistemas de diseño de interfaces. Vamos a sumergirnos en cada etapa con un poco más de detalle.

     Si a partir de ahora, en cada nuevo proyecto o renovación de algún proyecto existene, aplicamos y manteneos este tipo de organización de elementos en nuestro trabajo de diseño, ahorraremos esfuerzo y malentendidos entre nuestro diseño y el departamento de programación. Además, facilitará su trabajo, haciendo que puedan visualizar y traducir el diseño a código de una manera más directa.

     Si quieres aprende más sobre el Diseño Atómico visita la Web Oficial de su creador