Clever Geek Handbook

#lazy_builder (que no debe confundirse con carga diferida) en Drupal 8/9

Continuando con el estudio de Drupal, nos encontramos con una tecnología muy interesante que está incorporada. Y que, en nuestra opinión, se utiliza irrazonablemente poco. Y completamente en vano. Porque el enfoque utilizado por esta tecnología hace posible entregar instantáneamente al usuario una página muy cargada (o simplemente de formato largo), y luego "darle" datos que requieren mucho tiempo para formarse. Y mientras estudiamos esta tecnología, nos enfrentamos al hecho de que no existe una sola explicación simple de qué es y cómo ponerla en marcha. No, hay explicaciones. No hay simples. Ahora intentaremos compensar este problema.



descripción general



Entonces, tenemos una página que, por alguna razón, tarda mucho en formar parte de los datos. Las razones pueden ser diferentes: una gran cantidad de cálculos, una gran cantidad de datos, solicitudes largas a alguna base de datos lenta o, en general, es necesario acudir a un servicio de terceros desde el cual obtener información, que luego también debe procesarse. Las razones no son importantes. Es importante que nuestra página contenga datos que podamos dar de inmediato: encabezados, pies de página, algunas imágenes, un montón de marcos, texto, publicidad, al final. Y hay datos que necesitamos "obtener", y llevará una cierta cantidad de tiempo.



Eso es todo. Por lo general, esta tarea se resuelve mediante el mecanismo de "carga diferida": se carga una versión ligera de la página y luego se activa el script de carga diferida, que, usando JavaScript, va al backend, toma los datos de allí y los coloca en los lugares correctos. Pero la carga diferida tiene muchos inconvenientes. Comenzando con el hecho de que si, por ejemplo, nuestros datos se proporcionan solo a un usuario autorizado, entonces debemos autorizar adicionalmente este script perezoso. Además, siempre necesitamos JavaScript habilitado. Esta "cosa perezosa" no es muy amigable con los motores de búsqueda. Y así.



Y resulta que los creadores de Drupal son geniales. Y nos ofrecen otro mecanismo, que carece de casi todas las desventajas de la carga diferida. Y este mecanismo se llama "constructor perezoso" - constructor perezoso. Funciona como todo lo ingenioso, muy simple.

En el lugar de la plantilla de ramitas donde necesitamos mostrar datos "pesados", colocamos una variable ordinaria (casi), de una manera completamente normal, como esta: {{lazy_data}}. Pero en el preprocesador en el que preparamos esta variable, debemos decirle palabras mágicas para que se convierta en un constructor perezoso. Se parece a esto: 



$variables['lazy_data'] = [
  '#create_placeholder' => TRUE, // -  ,  Drupal   .
  '#lazy_builder' => [ // -     , -   .
    //...    
    ],
  ],
];


Y ahora Drupal, cuando renderizará la página, reemplazará esta variable con un marcador de posición de JavaScript, y los datos en sí no se generarán en el momento de la renderización. Es decir, esta página se formará rápidamente y se entregará al usuario con la misma rapidez. Y solo más tarde, cuando el navegador lo muestre en la pantalla, se activará este marcador de posición, que subirá al backend y le dirá: "Estoy listo, envía los datos". El backend se formará tranquilamente y proporcionará estos datos. Y se insertarán donde deberían estar.



¡Eso es todo! Y no se necesita autorización adicional, ya se ha realizado en el backend. Y no necesita incluir ningún script adicional, Drupal se encargará de todo. Y no necesita ninguna API de punto de entrada adicional que deba escribirse y mantenerse adicionalmente. No es necesario aclarar qué tipo de datos necesita; todo esto ya se ha hecho en el backend. Solo posponemos una parte de la "creación de páginas" para más adelante. Eso es todo lo que hicimos.



Y lo más ingenioso aquí es que si el usuario no tiene JavaScript habilitado, entonces Drupal mismo lo reconoce y genera estos datos pesados ​​inmediatamente, sin usar un marcador de posición. Es decir, como si no existiera un mecanismo para demorar la construcción. Los robots de los motores de búsqueda estarán felices de no tener que lidiar con cargas perezosas escritas por ellos mismos, obtendrán una página normal. Bueno, esperar unos segundos esta página no es tan crítica para ellos como lo es para una persona.



Y ahora, algunos detalles técnicos de cómo funciona toda esta mosca .



Repitamos, en la plantilla de ramitas escribimos como de costumbre, simplemente coloque la variable en el lugar que necesitamos. Y eso es todo, no es necesario que hagas más gestos.

En el preprocesador de plantilla, en el que necesitamos formar esta variable, escribimos "palabras mágicas" para que se vuelva "perezoso" y escribimos lo que debería llamar para representar perezoso nuestra variable: 



$variables['lazy_data'] = [
  '#create_placeholder' => TRUE, // -  ,  Drupal   .
  '#lazy_builder' => [ // -   , -   .
    '_.lazy_renderer:renderBigData', [ // -   ,   . ,    .
      'info' => ' ', // -   ,     . . 
      'params' => ['foo' => 'boo'],
        'something_else' => 11
    ],
  ],
];


Ahora necesitamos crear un "servicio" de Drupal que se dedique a la formación de nuestro big data. Para hacer esto, en el archivo module_name.service.yml, que se encuentra en la raíz del módulo requerido (no necesariamente autoescrito), debemos declarar este servicio (module_name.lazy_renderer), que se llamará para formar lo que debe enviarse a la variable 'lazy_data', que luego irá a ese trozo , a la casa que construyó Jack .



En este servicio, hacemos la función renderBigData, que será llamada. Y esta función debería devolver un enlace a la plantilla, que se renderizará e insertará en el lugar correcto de la página , en la casa que construyó Jack .



Pero quieres pasar algo a esta función, ¿verdad? He aquí cómo hacerlo.



Primero, te recordamos que para vender algo innecesario, primero debes comprar algo innecesario, y para poder usar una plantilla para renderizar, primero debes declararlo. Es decir, en el archivo module_name.module, en la función Promotion_theme (...), debe devolver, junto con el resto de las plantillas, la plantilla para la nueva plantilla: 



'my_template_for_lazy_building' => [
  'variables' => [
    'info' => '',
    'params' => [],
    'something_else' => 1
  ],
],


Y luego todo es simple: en el servicio, en la función, se prepara todo lo que se necesita, y esta plantilla recién declarada se devuelve al render, pasándole lo que necesita transferir.



Y esta plantilla, a su vez, tiene su propio preprocesador, que se activará cuando Drupal intente renderizar la plantilla. En este punto, el preprocesador recibirá las variables declaradas y pasadas.



Es decir, técnicamente se ve así: 



//        :
// '_.lazy_renderer:renderBigData'
//   :

class lazy_renderer {
        public function renderBigData($info, $params, $something_else) {
        //    
    //-  ,  .
    return [
        '#theme' => 'my_template_for_lazy_building',
      '#info' => $info,
      '#params' => $params,
      '#something_else' => $something_else
    ];
  }
}


La propia plantilla twig debe estar en el directorio de plantillas del módulo, por supuesto.



Eso es todo.



Y de nuevo, para resumir "quién estuvo sobre quién":



  • Tenemos una variable lazy_data. Lo ponemos en la plantilla de ramitas de alguna página como una variable simple.
  • Lo formamos en el preprocesador. Y le decimos que es "vaga" y que debe llamar al servicio ('module_name.lazy_renderer: renderBigData'), que devolverá la plantilla (otra, 'my_template_for_lazy_building') para renderizar. Esta plantilla se procesará e insertará en lugar de "datos diferidos".
  • No olvide declarar nuestra plantilla.


Esperamos haber podido contarte sobre la tecnología Lazy Builder de una forma sencilla, pero a la vez lo más detallada posible.



Gracias por la atención.


More articles:


All Articles