Clever Geek Handbook

#lazy_builder (jangan disamakan dengan lazy load) di Drupal 8/9

Melanjutkan mempelajari Drupal, kami menemukan teknologi yang sangat menarik yang dibangun di dalamnya. Dan yang, menurut kami, digunakan sedikit yang tidak masuk akal. Dan benar-benar sia-sia. Karena pendekatan yang digunakan teknologi ini memungkinkan untuk langsung memberikan halaman yang sangat dimuat (atau hanya membentuk panjang) kepada pengguna, dan kemudian "memberikan" dia data yang membutuhkan banyak waktu untuk terbentuk. Dan saat mempelajari teknologi ini, kami dihadapkan pada fakta bahwa tidak ada satu pun penjelasan sederhana tentang apa itu dan bagaimana memulainya. Tidak, ada penjelasannya. Tidak ada yang sederhana. Sekarang kami akan mencoba menebus masalah ini.



gambaran umum



Jadi, kami memiliki halaman yang, karena alasan tertentu, membutuhkan waktu lama untuk menjadi bagian dari data. Alasannya bisa berbeda - kalkulasi dalam jumlah besar, data dalam jumlah besar, permintaan yang lama ke beberapa database yang lambat, atau secara umum perlu pergi ke layanan pihak ketiga untuk mendapatkan informasi, yang kemudian juga perlu diproses. Alasannya tidak penting. Halaman kami harus berisi data yang dapat kami berikan langsung - header, footer, beberapa gambar, sekumpulan pembingkaian, teks, iklan, pada akhirnya. Dan ada data yang perlu kita "dapatkan", dan itu akan membutuhkan waktu tertentu.



Jadi begitulah. Biasanya tugas ini diselesaikan melalui mekanisme "pemuatan lambat" - versi ringan laman dimuat, dan kemudian skrip pemuatan lambat dipicu, yang, menggunakan JavaScript, masuk ke backend, mengambil data dari sana dan meletakkannya di tempat yang tepat. Tetapi pemuatan lambat memiliki banyak kerugian. Dimulai dengan fakta bahwa jika, misalnya, data kita diberikan hanya kepada pengguna yang berwenang, maka kita perlu memberi otorisasi tambahan pada skrip malas ini. Selain itu, kami selalu membutuhkan JavaScript yang diaktifkan. "Hal malas" ini tidak terlalu baik untuk ramah perayap. Dan seterusnya.



Dan pencipta Drupal, ternyata, luar biasa. Dan mereka menawarkan kita mekanisme lain, yang hampir tidak memiliki kekurangan dari pemuatan lambat. Dan mekanisme ini disebut "pembangun malas" - pembangun malas. Ia bekerja seperti segala sesuatu yang cerdik - sangat sederhana.

Di tempat di ranting-template di mana kita perlu menampilkan data "berat", kita meletakkan variabel biasa (hampir), dengan cara yang benar-benar normal, seperti ini: {{lazy_data}}. Tetapi dalam preprocessor di mana kita menyiapkan variabel ini, kita harus mengucapkan kata-kata ajaib untuk itu sehingga menjadi pembangun yang malas. Ini terlihat seperti ini: 



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


Dan sekarang Drupal, ketika akan merender halaman, akan mengganti variabel ini dengan placeholder JavaScript, dan datanya sendiri tidak akan dibuat pada saat rendering. Artinya, halaman ini akan terbentuk dengan cepat, dan akan diberikan kepada pengguna secepatnya. Dan hanya setelah itu, ketika ditampilkan oleh browser di layar, placeholder ini akan memicu, yang akan naik ke backend dan memberitahukannya - "Saya siap, kirim data." Backend akan dengan tenang membentuk dan memberikan data ini. Dan mereka akan disisipkan di tempat yang seharusnya.



Itu saja! Dan tidak diperlukan otorisasi tambahan - ini sudah dilakukan di backend. Dan Anda tidak perlu menyertakan skrip tambahan - Drupal akan mengurus semuanya. Dan Anda tidak memerlukan API titik masuk tambahan yang perlu ditulis dan dipelihara tambahan. Tidak perlu mengklarifikasi jenis data apa yang Anda butuhkan - semua ini telah dilakukan di backend. Kami hanya menunda sepotong "pembangunan halaman" untuk nanti. Hanya itu yang kami lakukan.



Dan hal yang paling cerdik di sini adalah jika pengguna tidak mengaktifkan JavaScript, maka Drupal sendiri mengenali ini dan segera menghasilkan data yang berat ini, tanpa menggunakan placeholder. Artinya, seolah-olah tidak ada mekanisme penundaan pembangunan. Bot mesin pencari akan senang bahwa mereka tidak perlu berurusan dengan pemuatan lambat yang ditulis sendiri, mereka akan mendapatkan halaman biasa. Nah, menunggu beberapa detik halaman ini tidak sepenting bagi mereka seperti bagi seseorang.



Dan sekarang, beberapa detail teknis tentang bagaimana semua lalat ini bekerja



Mari ulangi - di ranting-template yang kita tulis seperti biasa - cukup letakkan variabel di tempat yang kita butuhkan. Dan hanya itu, Anda tidak perlu melakukan isyarat lagi.

Dalam template preprocessor, di mana kita perlu membentuk variabel ini, kita menulis "kata ajaib" untuk membuatnya "malas" dan menulis apa yang seharusnya dipanggil untuk membuat variabel kita malas: 



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


Sekarang kita perlu membuat "service" Drupal yang nantinya akan bergerak dalam pembentukan big data kita. Untuk melakukan ini, di file module_name.service.yml, yang terletak di root dari modul yang diperlukan (tidak harus ditulis sendiri), kita harus mendeklarasikan layanan ini (module_name.lazy_renderer), yang akan dipanggil untuk membentuk apa yang perlu menjadi output ke variabel 'lazy_data', yang mana kemudian akan menuju ke rintisan itu , ke rumah yang dibangun Jack .



Dalam layanan ini, kami membuat fungsi renderBigData, yang akan dipanggil. Dan fungsi ini harus mengembalikan tautan ke templat, yang akan dirender dan disisipkan di tempat yang tepat pada halaman , di rumah yang dibangun Jack .



Tapi Anda ingin meneruskan sesuatu ke fungsi ini, bukan? Begini cara melakukannya.



Pertama, kami mengingatkan Anda bahwa untuk menjual sesuatu yang tidak perlu, Anda harus terlebih dahulu membeli sesuatu yang tidak perlu, dan untuk menggunakan template untuk rendering, Anda harus menyatakannya terlebih dahulu. Artinya, di file module_name.module, di fungsi promotion_theme (...), Anda harus mengembalikan, bersama dengan template lainnya, template untuk template baru: 



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


Dan kemudian semuanya sederhana - dalam layanan, dalam fungsi, semua yang diperlukan disiapkan, dan templat yang baru dideklarasikan ini dikembalikan ke render, memberikan apa yang Anda butuhkan untuk ditransfer ke sana.



Dan template ini, pada gilirannya, memiliki preprocessornya sendiri, yang akan terpicu saat Drupal mencoba membuat template. Pada titik ini, preprocessor akan menerima variabel-variabel yang dideklarasikan dan diteruskan.



Artinya, secara teknis terlihat seperti ini: 



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


Template ranting itu sendiri harus ada di direktori template modul, tentunya.



Itu saja.



Dan lagi, untuk menyimpulkan "siapa yang berdiri di atas siapa":



  • Kami memiliki variabel lazy_data. Kami meletakkannya di ranting-template dari beberapa halaman sebagai variabel sederhana.
  • Kami membentuknya di preprocessor. Dan kami memberitahunya bahwa dia "malas" dan bahwa dia harus memanggil layanan ('module_name.lazy_renderer: renderBigData'), yang akan mengembalikan template (lainnya, 'my_template_for_lazy_building') untuk dirender. Template ini akan dirender dan disisipkan sebagai pengganti 'data malas'.
  • Jangan lupa untuk mendeklarasikan template kami.


Kami berharap dapat memberi tahu Anda tentang teknologi Lazy Builder dengan cara yang sederhana namun mendetail.



Terima kasih atas perhatiannya.


More articles:


All Articles