Clever Geek Handbook

#lazy_builder (não deve ser confundido com carregamento lento) no Drupal 8/9

Continuando a estudar o Drupal, encontramos uma tecnologia muito interessante que está embutida nele. E que, em nossa opinião, é muito pouco usado. E em vão. Porque a abordagem que essa tecnologia usa torna possível fornecer instantaneamente uma página altamente carregada (ou apenas longa) a um usuário e, em seguida, "fornecer" a ele dados que levam muito tempo para serem formados. E enquanto estudávamos essa tecnologia, nos deparamos com o fato de que não existe uma explicação simples do que ela é e como iniciá-la. Não, existem explicações. Não existem simples. Agora vamos tentar compensar esse problema.



descrição geral



Então, temos uma página que, por algum motivo, leva muito tempo para fazer parte dos dados. Os motivos podem ser diferentes - uma grande quantidade de cálculos, uma grande quantidade de dados, solicitações longas para algum banco de dados lento ou, em geral, você precisa ir a um serviço de terceiros para obter informações, que depois precisa processar. As razões não são importantes. É importante que nossa página contenha dados que possamos dar na hora - cabeçalhos, rodapés, algumas fotos, um monte de emolduramento, texto, publicidade, no final. E há dados que precisamos "obter", e isso levará um certo tempo.



Então é isso. Normalmente, essa tarefa é resolvida por meio do mecanismo de "carregamento lento" - uma versão leve da página é carregada e, em seguida, o script de carregamento lento é acionado, que, usando JavaScript, vai para o back-end, pega os dados de lá e os coloca nos lugares certos. Mas o carregamento lento tem muitas desvantagens. Começando com o fato de que, se, por exemplo, nossos dados são fornecidos apenas a um usuário autorizado, então precisamos autorizar adicionalmente este script lento. Além disso, sempre precisamos de JavaScript habilitado. Essa "coisa preguiçosa" não é muito boa em ser amigável com rastreadores. E assim por diante.



E os criadores do Drupal, ao que parece, são ótimos. E eles nos oferecem outro mecanismo, que é desprovido de quase todas as desvantagens do carregamento lento. E esse mecanismo é chamado de "construtor preguiçoso" - construtor preguiçoso. Funciona como tudo genial - muito simples.

No local do twig-template onde precisamos exibir dados "pesados", colocamos uma variável comum (quase), de uma forma completamente normal, como esta: {{lazy_data}}. Mas, no pré-processador em que preparamos essa variável, devemos dizer-lhe palavras mágicas para que se torne um construtor preguiçoso. Se parece com isso: 



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


E agora o Drupal, quando renderizar a página, substituirá essa variável por um espaço reservado para JavaScript, e os dados em si não serão gerados no momento da renderização. Ou seja, esta página será formada rapidamente, e será dada ao usuário com a mesma rapidez. E só mais tarde, quando for mostrado pelo navegador na tela, esse espaço reservado será acionado, que irá subir até o back-end e dizer - "Estou pronto, envie os dados." O back-end se formará calmamente e fornecerá esses dados. E eles serão inseridos onde deveriam estar.



Isso é tudo! E nenhuma autorização adicional é necessária - isso já foi feito no back-end. E você não precisa incluir scripts adicionais - o Drupal cuidará de tudo. E você não precisa de nenhuma API de ponto de entrada adicional que precisa ser escrita e mantida adicionalmente. Não há necessidade de esclarecer que tipo de dados você precisa - tudo isso já foi feito no back-end. Apenas adiamos um pedaço de "construção de página" para mais tarde. Foi tudo o que fizemos.



E o mais engenhoso aqui é que se o usuário não tiver o JavaScript habilitado, o próprio Drupal reconhece isso e gera esses dados pesados ​​imediatamente, sem usar um espaço reservado. Ou seja, como se não existisse mecanismo de adiamento da construção. Os rastreadores ficarão felizes por não terem que lidar com cargas preguiçosas auto-escritas, eles obterão uma página normal. Mas esperar alguns segundos esta página não é tão importante para eles quanto para uma pessoa.



E agora, alguns detalhes técnicos de como tudo isso fly fazer



Vamos repetir - no modelo twig escrevemos como sempre - basta colocar a variável no lugar que precisamos. E é isso, você não precisa mais fazer gestos.

No pré-processador do modelo, no qual precisamos formar essa variável, escrevemos "palavras mágicas" para torná-lo "preguiçoso" e escrevemos o que deveria chamar para renderizar preguiçosamente nossa variável: 



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


Agora precisamos fazer um "serviço" Drupal que estará envolvido na formação de nosso big data. Para fazer isso, no arquivo module_name.service.yml, que está na raiz do módulo necessário (não necessariamente autoescrito), devemos declarar este serviço (module_name.lazy_renderer), que será chamado para formar o que precisa ser enviado para a variável 'lazy_data', que então irá para aquele toco , para a casa que Jack construiu .



Neste serviço, fazemos a função renderBigData, que será chamada. E essa função deve retornar um link para o template, que será renderizado e inserido no lugar certo da página , na casa que Jack construiu .



Mas você quer passar algo para essa função, certo? Veja como fazer.



Primeiro, lembramos que, para vender algo desnecessário, você deve primeiro comprar algo desnecessário e, para usar um modelo para renderização, primeiro você deve declará-lo. Ou seja, no arquivo module_name.module, na função promotion_theme (...), você precisa retornar, junto com o restante dos modelos, o modelo para o novo modelo: 



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


E então tudo é simples - no serviço, na função, tudo o que é necessário é preparado, e esse modelo recém-declarado é retornado ao render, passando o que você precisa para transferir para ele.



E esse template, por sua vez, possui seu próprio pré-processador, que será acionado quando o Drupal tentar renderizar o template. Neste ponto, o pré-processador receberá as variáveis ​​que são declaradas e passadas.



Ou seja, tecnicamente é assim: 



//        :
// '_.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
    ];
  }
}


O próprio modelo twig deve estar no diretório de modelos do módulo, é claro.



Isso é tudo.



E novamente, para resumir "quem resistiu a quem":



  • Temos uma variável lazy_data. Colocamos no modelo twig de alguma página como uma variável simples.
  • Nós o criamos no pré-processador. E nós dizemos a ela que ela é "preguiçosa" e que ela deve chamar o serviço ('module_name.lazy_renderer: renderBigData'), que irá retornar o template (outro, 'my_template_for_lazy_building') para renderizar. Este modelo será renderizado e inserido no lugar de 'dados preguiçosos'.
  • Não se esqueça de declarar nosso modelo.


Esperamos ter podido falar sobre a tecnologia Lazy Builder de uma forma simples, mas ao mesmo tempo o mais detalhada possível.



Obrigado pela atenção.


More articles:


All Articles