Live Markup, preview of an amazing new technology!
Ajax.org Platform 3.0 will come with a crazy new language, we call Live Markup. It’s a small addition to javascript that introduces two new elements. Live markup is an easy templating language that updates your UI live when data and properties update.
As you might’ve read somewhere, APF3.0 will make it easy to create collaborative applications. Think google wave, but now you have full control over the UI. The big thing about collaborative is the real time factor. When realtime data comes in you want to see the changes live coming into your user interface. This is where live markup comes in.
We’re currently integrating live markup in the new version of the www.ajax.org demo section. The following snippet shows how I use it to create a user interface based on example data coming from the server. I’ll go into more details in another blog article. For the moment notice the following things that live markup introduces:
- xPath literal using [ and ]
- XML literal using < and > (remember E4X ?)
- Auto-concatenation and Auto-output
There’s more to it, but thats the gist of it. Check out the example below. I hope you can appreciate the elegance that Live Markup brings to creating real time user interfaces for collaborative applications. More information to follow soon. We’re planning to release a first beta of 3.0 next week.
<?lm
<h1>[@name]</h1>
var i = 0;
foreach([example]) {
<h2>Example {++i}</h2>
<div class="description">
[description]
</div>
<a:tab skin="demos_lowtab" width="653">
<a:page caption="Demo">
{"*[source/node()]"}
</a:page>
<a:page caption="Code (AML)" render="runtime">
<pre class="code">
{apf.highlightCode("*[source/node()]")}
</pre>
</a:page>
<a:page caption="Code (JS)" render="runtime">
<pre class="code">
{convertToJsonApi(%[.])}
</pre>
</a:page>
{
foreach([xml]) {
<a:page caption="[caption]" render="runtime">
<pre class="code">
{apf.highlightCode("*[source/node()]")}
</pre>
</a:page>
}
foreach([js]) {
<a:page caption="[caption]" render="runtime">
<pre class="code">
[source/text()]
</pre>
</a:page>
}
}
</a:tab>
}
?>
This snippet would operate on a piece of xml like this.
Imagine the data updating live from the server and being automatically reflected in your UI. That’s the type of application we aim to make easy to build.