Client Side Templating in CQ5 Components (Using ejs)

I was recently working on a proof of concept where we had to get thousands of records from the backend and then filter on the browser based on the criteria like user’s subscriptions, department, region, etc.  Naturally, this type of criteria can be stored and retrieved from CQ5’s client context.  However, when it comes to filtering and rendering the lists, we have to do a lot of work in Javascript to output this to the browser.

I’m not sure about other people but I’m don’t relish writing a lot of javascript for rendering more than the odd list here or there.  To be more specific, I don’t want to be doing a lot of DOM manipulation.  I’d very easily be doing this using JSP/JSTL if I had to do this server side so I figured I needed a templating solution but on the client side.

Now, I did this once a long time back using something called trimpath JST but I’m not sure the project is supported anymore.  Looking around a bit more I found a variety of different libraries/frameworks that allow you to use templates.  Some are “logicless” templates where you are allowed to pass in certain variables and the template only allows you to inject them in.  Any sort of conditions or processing functions would have to developed as plugins and but the idea is to minimize the amount of processing/lookup logic in the UI template.  Handlebars is one such framework which uses the Mustache templating format. Others allow you greater flexibility such as declaring variables or calling functions for filtering, processing, or enhancing the logic required to create your HTML.  Think JSP for Javascript.  One such framework I found was ejs by visionmedia on github.

Calling it was simple.  I put a script tag in the component JSP file as follows:


<script id="my-ejs-template" type="text/ejs-script">

[%for(var i=0;i<results.length;i++){%]

//put HTML and other logic herehere

[%}%]
</script>

The script tag would contain the template for a piece of HTML to be bound to a results object.  The results object can be retrieved from JSON or wherever using your favourite AJAX framework.  Then, the binding can be done as follows:


<script type="text/javascript">
var ejs = require('ejs');
ejs.open = '[%';
ejs.close = '%]';

var str = $("my-ejs-template").html();
ejs.compile(str, options);
// => Function

ejs.render(str, options);

</script>

Thanks to Visionmedia for sharing this templating library. I’ve used it in conjunction with a backend servlet spitting out JSON and setting last-modified and expires and it works quite fast. In the ejs template, I can lookup various properties in the client context stores and filter/enhance results. In my opinion, this is much easier to develop than the mechanism used in the teaser component of CQ5 MCM.

– Sarwar Bhuiyan

Advertisements
Client Side Templating in CQ5 Components (Using ejs)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s