Clever Geek Handbook

Drupal 8/9の#lazy_builder（レイジーロードと混同しないでください）

Drupalの研究を続けると、それに組み込まれている非常に興味深いテクノロジーに出くわしました。そして、私たちの意見では、これは不当にほとんど使用されていません。そして完全に無駄です。このテクノロジーが使用するアプローチにより、高負荷の（または単に長い形式の）ページをユーザーに即座に提供し、作成に時間がかかるデータをユーザーに「提供」することが可能になるためです。そして、この技術を研究している間、私たちはそれが何であるか、そしてそれをどのように始めるかについての単一の簡単な説明がないという事実に直面しました。いいえ、説明があります。単純なものはありません。今、私たちはこの問題を埋め合わせようとします。



概要



そのため、何らかの理由でデータの一部を形成するのに長い時間がかかるページがあります。理由はさまざまです。大量の計算、大量のデータ、低速のデータベースへの長い要求、または一般に、情報を取得するためにサードパーティのサービスにアクセスする必要があり、それを処理する必要があります。理由は重要ではありません。私たちのページには、ヘッダー、フッター、いくつかの写真、一連のフレーミング、テキスト、広告など、すぐに送信できるデータが含まれていることが重要です。また、「取得」する必要のあるデータがあり、ある程度の時間がかかります。



以上です。通常、このタスクは「レイジーロード」のメカニズムによって解決されます。ページのライトバージョンがロードされ、レイジーロードスクリプトがトリガーされます。このスクリプトは、JavaScriptを使用してバックエンドに移動し、そこからデータを取得して適切な場所に配置します。しかし、怠惰な読み込みには多くの欠点があります。たとえば、データが許可されたユーザーにのみ提供される場合、この怠惰なスクリプトを追加で許可する必要があるという事実から始めます。また、JavaScriptを常に有効にする必要があります。この「怠惰なこと」は、検索エンジンにはあまり適していません。等々。



そして、Drupalの作成者は素晴らしいことがわかりました。そして、それらは、レイジーローディングのほとんどすべての欠点がない別のメカニズムを提供します。そして、このメカニズムは「レイジービルダー」と呼ばれます-レイジービルダー。それは独創的なすべてのように機能します-非常にシンプルです。

「重い」データを表示する必要がある小枝テンプレートの場所に、次のように、完全に通常の方法で通常の（ほぼ）変数を配置します：{{lazy_data}}。しかし、この変数を準備するプリプロセッサーでは、怠惰なビルダーになるように魔法の言葉を言わなければなりません。次のようになります。 



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


そして今、Drupalはページをレンダリングするときに、この変数をJavaScriptプレースホルダーに置き換え、データ自体はレンダリング時に生成されません。つまり、このページはすばやく作成され、同じようにすばやくユーザーに表示されます。その後、ブラウザによって画面に表示されると、このプレースホルダーがトリガーされ、バックエンドに移動して、「準備ができました。データを送信してください」と通知されます。バックエンドは落ち着いてこのデータを形成して提供します。そして、それらは本来あるべき場所に挿入されます。



それで全部です！また、追加の承認は必要ありません。バックエンドですでに実行されています。また、追加のスクリプトを含める必要はありません。Drupalがすべてを処理します。また、追加で作成および保守する必要のある追加のエントリポイントAPIは必要ありません。必要なデータの種類を明確にする必要はありません。これはすべて、バックエンドですでに実行されています。後で使用するために、「ページ作成」の一部を延期しました。それが私たちがしたすべてです。



そして、ここで最も独創的なことは、ユーザーがJavaScriptを有効にしていない場合、Drupal自体がこれを認識し、プレースホルダーを使用せずにこの重いデータをすぐに生成することです。つまり、延期された建設のメカニズムがなかったかのように。クローラーは、自分で作成した遅延ロードを処理する必要がなく、通常のページを取得できることに満足しています。しかし、数秒待つことは、人にとってほど重要ではありません。



そして今、このハエのすべてがどのように行うかについてのいくつかの技術的な詳細



繰り返しましょう-いつものように書いた小枝テンプレートで-必要な場所に変数を配置するだけです。これで、これ以上ジェスチャーをする必要はありません。

この変数を作成する必要があるテンプレートプリプロセッサで、「魔法の言葉」を記述して「遅延」にし、変数を遅延レンダリングするために呼び出す必要のあるものを記述します。 



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


次に、ビッグデータの形成に関与するDrupalの「サービス」を作成する必要があります。これを行うには、必要なモジュールのルートにあるファイルmodule_name.service.yml（必ずしも自己記述型である必要はありません）で、このサービス（module_name.lazy_renderer）を宣言する必要があります。それからそれはそのスタブ、ジャックが建てた家に行き ます。



このサービスでは、呼び出されるrenderBigData関数を作成します。そして、この関数は、ジャックが建てた家のページの適切な場所にレンダリングされて挿入されるテンプレートへのリンクを返す必要があります 。



しかし、あなたはこの関数に何かを渡したいですよね？これがその方法です。



まず、不要なものを販売するには、まず不要なものを購入する必要があり、レンダリングにテンプレートを使用するには、最初にそれを宣言する必要があることを思い出してください。つまり、ファイルmodule_name.moduleの関数promotion_theme（...）関数で、残りのテンプレートとともに、新しいテンプレートのテンプレートを返す必要があります。 



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


そして、すべてが単純です。サービス、関数、必要なすべてが準備され、この新しく宣言されたテンプレートがレンダリングに返され、転送する必要があるものが提供されます。



そして、このテンプレートには独自のプリプロセッサがあり、Drupalがテンプレートをレンダリングしようとしたときにトリガーされます。この時点で、プリプロセッサは宣言されて渡される変数を受け取ります。



つまり、技術的には次のようになります。 



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


もちろん、小枝テンプレート自体はモジュールのテンプレートディレクトリにある必要があります。



それで全部です。



そして再び、「誰が誰の上に立ったのか」を要約すると：



  • 「lazy_data」という変数があります。単純な変数として、あるページの小枝テンプレートに配置します。
  • プリプロセッサで形成します。そして、彼女は「怠惰」であり、レンダリングするテンプレート（別の「my_template_for_lazy_building」）を返すサービス（ 'module_name.lazy_renderer：renderBigData'）を呼び出す必要があることを彼女に伝えます。このテンプレートはレンダリングされ、「遅延データ」の代わりに挿入されます。
  • テンプレートを宣言することを忘れないでください。


Lazy Builderテクノロジーについて、簡単でありながら、可能な限り詳細に説明できたことを願っています。



ご清聴ありがとうございました。


More articles:


All Articles