Comments (5)
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 Tree
s 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.
Related Issues (5)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pagelets.