This document discusses Drupal's BigPipe module, which improves front-end performance by allowing content to be flushed to the browser in stages. It describes how BigPipe works, how to install the module, and how to create custom lazy builders to render parts of a page in isolation after initial load. Custom lazy builders are defined as services and return render arrays to replace placeholders in the page.

1. Drupal 8: lazy builder.
What we need to build a house?
We will draw it and will live.
Anton Faibyshev
Facebook: facebook.com/afaibyshev
Email: afaibyshev@adyax.com

2. Who am I?
● Drupal Developer in Adyax
● 1+ year Drupal 8 experience
https://www.drupal.org/u/faibyshev
Anton Faibyshev

3. Big Pipe Lazy builders

4. How does this work?
Big Pipe
https://www.drupal.org/project/big_pipe
01
During rendering, the personalized parts are turned into placeholders.
02
By default, Drupal 8 uses the Single Flush strategy (aka "traditional") for replacing the
placeholders. i.e. we don't send a response until we've replaced all placeholders.
03
The BigPipe module introduces a new strategy, that allows us to flush the initial page
first, and then stream the replacements for the placeholders.
04
This results in hugely improved front-end/perceived performance.

5. BIGPIPE
Animation by @shawnmmccabe

6. BIGPIPE
STANDARD BIG PIPE

7. How to use BigPipe on your Drupal site
How to use BigPipe on your Drupal site
01
Install BigPipe module. (Without configuration !!!)

8. How Drupal is able to do this
Cacheability metadata
tags, contexts, max-age
Isolated rendering
#lazy_builder callbacks (guarantee isolation)
Cacheability Metadata
interface CacheableDependencyInterface {
public function getCacheContexts();
public function getCacheTags();
public function getCacheMaxAge();
}

9. Cacheability Metadata
example/src/Plugin/Block/ExampleBlock.php
<?php
namespace DrupalexamplePluginBlock;
use …
class ExampleBlock extends BlockBase implements ContainerFactoryPluginInterface {
/**
* {@inheritdoc}
*/
public function getCacheContexts() {
$cacheContexts = [
'url.path',
'Languages:language_content',
'user',
];
return Cache::mergeContexts(parent::getCacheContexts(), $cacheContexts);
}
}

10. Custom lazy_builder
#lazy_builder

11. RENDERABLE IN ISOLATION
Very slow, personalized, but cacheable.
Fast and cacheable, but it has
personalized items.
Why does
so long?

12. Custom JS + Ajax
vs
Custom Lazy builder.
JS + Ajax
Lazy
Builder

13. Custom lazy builder
#lazy_builder
// Add custom lazy builder
$build['user_data'] = [
'#lazy_builder' => [
'example_shop.lazy_user_data:lazyUserData',
// 'DrupalmymoduleLazyBuilder::lazyRenderMe1',
[],
],
'#create_placeholder' => TRUE,
];
// Render custom lazy builder inside twig file.
{{ user_data }}

14. Custom lazy builder
services:
example_shop.lazy_user_data:
class: DrupalexampleExampleUserData
arguments: ['@current_user', '@entity_type.manager', ...]
example.services.yml
example/src/ExampleUserData.php
<?php
namespace Drupalexample;
use …
class ExampleUserData {
public function __construct()
public function lazyUserData() {
return [
'#markup' => '<div class="visually-hidden"…. </div>',
];
}
}

15. Custom lazy builder
<span data-big-pipe-placeholder-id=
"callback=example_shop.lazy_user_data:lazyUserData&&token=jtF5pmN0OrLwzaF9eObXV93Ml_2Yad"
></span>
{{ user_data }}
Before </body>
<script type="application/vnd.drupal-ajax" data-big-pipe-event="start"></script>
<script type="application/vnd.drupal-ajax" data-big-pipe-event="stop"></script>
<script type="application/vnd.drupal-ajax"
data-big-pipe-replacement-for-placeholder-with-id="callback=example_shop.lazy_user_data:lazyUserData&
amp;&amp;token=jtF5pmN0OrLwzaF9eObXV93Ml_2Yad">
[
{
"command": "insert",
"method": "replaceWith",
"selector":
"[data-big-pipe-placeholder-id="callback=example_shop.lazy_user_data:lazyUserDatas&&token=jtF5pmN0OrLwzaF9eObXV93Ml_2Yad"]",
"data": "<div class="visually-hidden"> ....</div>",
"settings": null
},
]
</script>

16. Custom lazy builder
services:
example_shop.lazy_user_data:
class: DrupalexampleExampleUserData
arguments: ['@current_user', '@entity_type.manager', ...]
example.services.yml
example/src/ExampleUserData.php
<?php
namespace Drupalexample;
use …
class ExampleUserData {
public function __construct()
public function lazyUserData() {
return [
'#markup' => '<div class="visually-hidden"…. </div>',
];
}
}

17. Custom lazy builder

18. Useful links
● google.com
● https://youtu.be/spnFCx4lDGw => https://wimleers.com/talk-bigpipe
● https://www.drupal.org/project/big_pipe