What is XNode?
This guide explains the xnode
view layer and how it can be used to build efficient websites.
Overview
.xnode
is the file extension for files which are used to render HTML content. The extension is formed from XML
document fragment which forms a node
in a tree. These templates are designed to maximise the ratio of content to markup. They improve separation of concerns and semantic organisation because repeated markup can be reused easily.
Here is a example of a blog post:
<content:entry title="My day as a fish">
<p>It was not very exciting</p>
</content:entry>
The Utopia::Content
middleware is built on top of the Trenni template language which uses two-phase evaluation.
Phase 1: Evaluation
Trenni processes the view content by evaluation #{expressions}
and <?r statements ?>
. This generates an output buffer. The output buffer should contain valid markup (i.e. balanced tags, no invalid characters).
Phase 2: Markup
Once the template is evaluated to text, it is parsed again into an event stream which is used to generate the final output. The event stream contains things like "open tag", "attribute", "close tag", and so on, and these are fed into the Utopia::Content
middleware which generates the actual content. Tags without namespaces are output verbatim, while tags with namespaces invoke the tag lookup machinery. This uses the tag name to invoke further behaviour, e.g. inserting more content. Here is a simple example of a basic page:
<content:page>
<content:heading>Welcome to my page</content:heading>
<p>This page is so awesome</p>
</content:page>
In order to render this, you will need two additional files, _page.xnode
and _heading.xnode
. As a short example, _heading.xnode
might look like this:
<h1><utopia:content/></h1>
When the parser encounters <content:heading>...
in the main page, it would evaluate the above template. <utopia:content/>
is a special tag that evaluates to the content that the parent tag provided, so in this case: "Welcome to my page"
. Thus, the final output is <h1>Welcome to my page</h1>
.