Grid Layout Integration in Main Template about pagelets HOT 5 CLOSED

Hi Stephan,

no, you do only have that kind of access in your main template where you receive the Page instance, because it would hurt modularity if the main template would know the whole tree of Pagelets.

You can control the combination of Pagelets with the combine function of the Tree node. This function combines the HTML of the Trees children by default sequentially. But if you need to apply some other strategy (i.e. construct a grid), you can provide the function with a template (Twirl by default). This template then receives the HTML of the children of the Tree node and combines them to HTML.

So a Tree only knows it's immediate children, which can be Leaf or Tree nodes. The Tree applies a combine function to it's children whose result is HTML. This mechanism is executed until the root of the Tree is reached and the final HTML remains. This HTML is then provided to the main template via the body field of the Page instance.

Because of this modular design, where the parts of the Tree do not depend on each other, you can change the "Page Tree" without affecting the rest of the Tree.

Here is a simple visualization:

  Page(body = 
  +Tree 1 combine(4 HTML)
    +Tree 1 combine(3 HTML) 
      -Leaf 1
      -Leaf 2
      +Tree 3 combine(2 HTML) 
        -Leaf 1
        -Leaf 2
    -Leaf 2
    -Leaf 3
    -Leaf 4
  )

If you have a look at the Pagelets Seed project, you can see custom combine functions in action.

Have a look at the section.scala.html and the teasers.scala.html templates. Both receive the rendered HTML of their child nodes and combine it into a new HTML.

Here is the corresponding code within the HomeController:

Tree('teasers, Seq(
          Leaf('teaserA, teaser("A") _),
          Leaf('teaserB, teaser("B") _),
          Leaf('teaserC, teaser("C") _),
          Leaf('teaserD, teaser("D") _)
        ), results => combine(results)(views.html.pagelets.teasers.apply)

from pagelets.

Thanks a lot I'll take a look!

from pagelets.

Hello, me again, I've got it working looking at the Seed :-)

I might misunderstand streaming in Splink Pagelets. I thought it was oriented towards BigPipe, which streams Javascript of page parts which then are inserted. With the benefit of the whole page loading and displaying and all pagelets inserted as they become ready.

When I look with curl all HTML seems to be streamed without JS, or are the parts in

        <script src='/stream-resource/ff017f25210fe2736305496a45d1be63'></script>

and pagelets ending in .stream streamed via JS?

from pagelets.

Yes, if you chose the 'streaming mode', the JavaScript is still combined into one. This happens upfront, when the Tree is constructed and is not blocked by any Pagelet. So, the JavaScript and CSS is ready immediately. Then all Pagelets within the Tree are executed in parallel.
In contrast to 'classic' BigPipe, The HTML code of the Pagelets is streamed sequentially, so the order of the HTML is preserved. This is a conscious decision. The advantage is, that a lot of complexity which must be handled on a per use-case basis and can not handled by the Pagelets library is removed. (What I mean is that the Pagelets must be combined via JavaScript on the client side. It seems to me that this is very hard to implement in a generic fashion: What if the footer arrives first? Shall we wait, or render it immediately. Depending on each Pagelet, this kind of decision has to be made. Also, sometimes it might be appropriate to customize the CSS to deal the situation that suddenly Pagelets appear right and left.) So, by keeping the streamed HTML in sequence, all this complexity is deflected.

The disadvantage is that the Pagelets are streamed in sequence. This means that if one Pagelet is slow, the subsequent Pagelets can only start streaming when the slow Pagelet is complete. Regardless of that, all Pagelets are executed in parallel and if one Pagelet is slow, the other Pagelets only need to wait until they have their turn . So, until the slow Pagelet completes, the remaining Pagelets continue to prepare their own readyness.

But even though this approach might not be as performant as the 'fully fledged' BigPipe, massive performance gains can still be achieved - with a lot less trade-offs.

For instance, the beginning of the HTML contains references to HTML and CSS. These can be streamed immediately, so the client browser can start loading these resources while some of the Pagelets are still constructed in the backend. The time to first byte is equally quick, the user gets the first parts of the page nearly in an instant. You can observe this behaviour in the Network tab of your browser.

from pagelets.

Can we discuss this offline? I'm interested in the topic, [email protected]

from pagelets.