Clever Geek Handbook

#lazy_builder (nicht zu verwechseln mit Lazy Load) in Drupal 8/9

Als wir Drupal weiter studierten, stießen wir auf eine sehr interessante Technologie, die darin eingebaut ist. Und was unserer Meinung nach unangemessen wenig genutzt wird. Und vergebens. Weil der von dieser Technologie verwendete Ansatz es ermöglicht, dem Benutzer sofort eine hoch geladene (oder nur eine lange Form) Seite zu geben und ihm dann Daten zu "geben", deren Erstellung viel Zeit in Anspruch nimmt. Und während wir diese Technologie studierten, wurden wir mit der Tatsache konfrontiert, dass es keine einzige einfache Erklärung dafür gibt, was es ist und wie man es startet. Nein, es gibt Erklärungen. Es gibt keine einfachen. Jetzt werden wir versuchen, dieses Problem auszugleichen.



allgemeine Beschreibung



Wir haben also eine Seite, die aus irgendeinem Grund lange braucht, um Teil der Daten zu sein. Die Gründe können unterschiedlich sein - eine große Menge an Berechnungen, eine große Menge an Daten, lange Anforderungen an eine langsame Datenbank oder im Allgemeinen ist es erforderlich, zu einem Drittanbieter zu gehen, um Informationen zu erhalten, die dann ebenfalls verarbeitet werden müssen. Die Gründe sind nicht wichtig. Es ist wichtig, dass unsere Seite Daten enthält, die wir sofort senden können - Kopfzeilen, Fußzeilen, einige Bilder, eine Reihe von Rahmen, Text, Werbung am Ende. Und es gibt Daten, die wir "bekommen" müssen, und es wird eine gewisse Zeit dauern.



Also. Normalerweise wird diese Aufgabe durch den Mechanismus des "verzögerten Ladens" gelöst - eine leichte Version der Seite wird geladen, und dann wird das Skript zum verzögerten Laden ausgelöst, das mit JavaScript zum Backend geht, die Daten von dort nimmt und an den richtigen Stellen platziert. Aber faules Laden hat eine Menge Nachteile. Ausgehend von der Tatsache, dass zum Beispiel, wenn unsere Daten nur an einen autorisierten Benutzer weitergegeben werden, wir dieses faule Skript zusätzlich autorisieren müssen. Außerdem muss JavaScript immer aktiviert sein. Diese "faule Sache" ist nicht sehr gut darin, Crawler-freundlich zu sein. Und so weiter.



Und die Schöpfer von Drupal sind großartig. Und sie bieten uns einen weiteren Mechanismus, der fast alle Nachteile des faulen Ladens aufweist. Und dieser Mechanismus heißt "Lazy Builder" - Lazy Builder. Es funktioniert wie alles Geniale - sehr einfach.

An der Stelle in der Zweigvorlage, an der "schwere" Daten angezeigt werden müssen, setzen wir eine ganz normale (fast) Variable wie folgt ein: {{lazy_data}}. Aber in dem Präprozessor, in dem wir diese Variable vorbereiten, müssen wir magische Worte dazu sagen, damit sie zu einem faulen Builder wird. Es sieht aus wie das: 



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


Und jetzt ersetzt Drupal beim Rendern der Seite diese Variable durch einen JavaScript-Platzhalter, und die Daten selbst werden zum Zeitpunkt des Renderns nicht generiert. Das heißt, diese Seite wird schnell erstellt und dem Benutzer ebenso schnell zur Verfügung gestellt. Und erst später, wenn es vom Browser auf dem Bildschirm angezeigt wird, wird dieser Platzhalter ausgelöst, der zum Backend klettert und ihm sagt: "Ich bin bereit, senden Sie die Daten." Das Backend wird sich ruhig bilden und diese Daten geben. Und sie werden dort eingefügt, wo sie sein sollten.



Das ist alles! Und es ist keine zusätzliche Autorisierung erforderlich - dies wurde bereits im Backend durchgeführt. Und Sie müssen keine zusätzlichen Skripte hinzufügen - Drupal kümmert sich um alles. Außerdem benötigen Sie keine zusätzlichen Einstiegspunkt-APIs, die zusätzlich geschrieben und verwaltet werden müssen. Sie müssen nicht klären, welche Art von Daten Sie benötigen - all dies wurde bereits im Backend durchgeführt. Wir haben gerade ein Stück "Seitenerstellung" für später verschoben. Das ist alles was wir getan haben.



Und das Genialste dabei ist, dass Drupal dies erkennt und diese umfangreichen Daten sofort generiert, ohne dass ein Platzhalter verwendet wird, wenn der Benutzer kein JavaScript aktiviert hat. Das heißt, als gäbe es keinen Mechanismus für eine verzögerte Konstruktion. Suchmaschinen-Bots werden froh sein, dass sie sich nicht mit selbst geschriebenen Lazy Loads befassen müssen, sondern eine reguläre Seite erhalten. Aber um ein paar Sekunden zu warten, ist diese Seite für sie nicht so kritisch wie für eine Person.



Und jetzt einige technische Details, wie all diese Fliegen funktionieren



Lassen Sie uns wiederholen - in der Zweigvorlage, die wir wie gewohnt schreiben - setzen Sie einfach die Variable an die Stelle, die wir brauchen. Und das war's, Sie müssen keine Gesten mehr machen.

In dem Vorlagenpräprozessor, in dem wir diese Variable bilden müssen, schreiben wir "magische Wörter", um sie "faul" zu machen, und schreiben, was es heißen soll, um unsere Variable faul zu rendern: 



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


Jetzt müssen wir einen Drupal- "Service" einrichten, der sich mit der Bildung unserer Big Data befasst. Dazu müssen wir in der Datei module_name.service.yml, die sich im Stammverzeichnis des erforderlichen Moduls befindet (nicht unbedingt selbst geschrieben), diesen Dienst (module_name.lazy_renderer) deklarieren, der aufgerufen wird, um zu bilden, was in die Variable 'lazy_data' ausgegeben werden muss dann geht es zu diesem Stummel , zu dem Haus, das Jack gebaut hat .



In diesem Dienst erstellen wir die Funktion renderBigData, die aufgerufen wird. Und diese Funktion sollte einen Link zu der Vorlage zurückgeben, die an der richtigen Stelle auf der Seite in dem Haus, das Jack gebaut hat , gerendert und eingefügt wird .



Aber Sie möchten dieser Funktion etwas übergeben, oder? Hier erfahren Sie, wie es geht.



Zunächst möchten wir Sie daran erinnern, dass Sie, um etwas Unnötiges zu verkaufen, zuerst etwas Unnötiges kaufen müssen. Um eine Vorlage zum Rendern zu verwenden, müssen Sie sie zuerst deklarieren. Das heißt, in der Datei module_name.module, in der Funktion Promotion_theme (...) müssen Sie zusammen mit den übrigen Vorlagen die Vorlage für die neue Vorlage zurückgeben: 



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


Und dann ist alles einfach - im Service, in der Funktion wird alles vorbereitet, was benötigt wird, und diese frisch deklarierte Vorlage wird an das Rendering zurückgegeben und übergibt ihr, was Sie zum Übertragen benötigen.



Diese Vorlage verfügt wiederum über einen eigenen Präprozessor, der ausgelöst wird, wenn Drupal versucht, die Vorlage zu rendern. Zu diesem Zeitpunkt empfängt der Präprozessor die Variablen, die deklariert und übergeben werden.



Das heißt, technisch sieht es so aus: 



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


Die Zweigvorlage selbst muss sich natürlich im Vorlagenverzeichnis des Moduls befinden.



Das ist alles.



Und noch einmal, um zusammenzufassen, "wer auf wem stand":



  • Wir haben eine Variable namens "lazy_data". Wir haben es als einfache Variable in die Zweigvorlage einer Seite eingefügt.
  • Wir bilden es im Präprozessor. Und wir sagen ihr, dass sie "faul" ist und dass sie den Dienst ('module_name.lazy_renderer: renderBigData') aufrufen soll, der die Vorlage (eine andere, 'my_template_for_lazy_building') zum Rendern zurückgibt. Diese Vorlage wird gerendert und anstelle von "Lazy Data" eingefügt.
  • Vergessen Sie nicht, unsere Vorlage zu deklarieren.


Wir hoffen, dass wir Ihnen auf einfache, aber gleichzeitig so detaillierte Weise wie möglich etwas über die Lazy Builder-Technologie erzählen konnten.



Vielen Dank für Ihre Aufmerksamkeit.


More articles:


All Articles