If you haven’t used or never heard of jQote before you might want to check out this post first, as it provides a quick insight into jQote’s way of client-side templating.

I’ve set up a repository over at GitHub. That’s where you will find the latest releases.

So, what’s new for v2 you ask? Quite a lot, actually. But let’s see one by one:

1.  jQote2 breaks compatibility with its predecessor

- jQote2 now returns a flat string representation of the converted template whereas its predecessor would give you a jQuery object.

The reason behind this substantial change is mainly speed. Appending the converted string as a whole cuts back greatly on the time it takes to generate the corresponding DOM fragment. On top of that you’ll now gain full control over your template’s outcome, to whom and when you want it to be appended etc.

2.  jQote2 improves on template handling

- jQote2 now provides an interface to precompile your templates to lambda functions.

This is probably the most exiting new feature as it lets you precompile templates during development and simply use them in production afterwards – without the need to dish out your template code to your customers.

- jQote2 now supports on-the-fly template strings.

For quick and dirty templating jQote2 now enables you to process template strings. This will make it easy for you to realize minor templating tasks on-the-fly without added the overhead.

3.  jQote2 is powered by a faster and more robust parsing engine

- jQote2 now offers full multiline and escaping quotes support.

The previous version had issues regarding line breaks within the scope of shorttags which are used to echo out the result of Javascript expressions. jQote2 now fully supports your way of coding style: what goes inbetween the tags (be it shorttags or standard notation) is pure Javascript and you decide how it is layed out.

Pure Javascript support implies proper escaping of quotes, though. And you will have to take care of that yourself. Outside the tags however the engine now correctly escapes qoutes within your markup, thus letting you concentrate on your work rather than the plugin’s internals.

- Speed, speed and again – speed!

Brian Landau has set up a bunch of benchmarks comparing the runtime of Javascript templating libraries. jQote didn’t perform all that bad but in the end couldn’t gain the crown.

With the release of jQote2 though the picture has changed quite a bit: jQote2 is now on a par with Underscore, the former sole sovereign, making both the natural choice for heavy Ajax powered sites. Please note though: Since Underscore internally uses John Resig’s conversion engine it replicates its flawed multiline and escaping quotes handling, leaving you with runtime errors whenever you need to have single quotes (both escaped or unescaped) inside the Javascript parts.

To backup my claims I forked Brian Landau’s benchmarks and put together a single file benchmarking suite at github. To offer you some eye candy I’ve integrated the powerful flot plotting library. Here’s an example of my findings running the benchmark 25 times with a 1000 conversions each in Firefox 3.5.7.

From left to right: Srender, mustache.js, Underscore, jQote2, Tempest, nano.
Less is better. All times in ms.

As you see Underscore and jQote2 vastly outperform the other contestants and moreover are superior in their ability to embed pure Javascript within the templates.

Enough said! Try it for yourself. Due to repeated requests I have finally set up a repository over at github. You may fetch the latest versions there. So long …

jQote2 has been released. Please consider upgrading now!!! Click here for a quick summary of what’s new and what’s changed.

jQote (pronounced like Star Trek’s Chakotey) is basically a rewrite of John Resig’s awesome JavaScript Micro-Templating utility. I took his code and ported it to jQuery, overhauled the parsing / conversion part and extended it’s functionality to minimize everyone’s coding efforts.

See the jQote API reference.

PLEASE NOTE:
Version 1.1.0 now gives you the possibility of changing the tag character to something else than <% and %>. Please referr to the jQote API reference to see how to do it.

So, let’s get started writing down a basic template:

<script type="text/html" id="template">
<![CDATA[
    <p class="greetings">
        Hello <%= this.name %>, how are you doing?
        May I offer you
        <% this.is_starving() ? %>
            some tasty peasant?
        <% : %>
            a refreshing Singha?
        <% ; %>
    </p>
]]>
</script>

This well-mannered code snippet – though it may not seem like much – shows some very special markup, namely <%= expression %> and <% statement %>, respectively (please notice the extra ‘=’ sign on the first one).

As you may have guessed already, the code in-between these tags is mere JavaScript. To simplify things you should use the <%= %> tag whenever you want to directly echo a variable’s value (you may as well call a function or use any other expression, as long as it returns a string).

Pretty self-explanatory so far, hu? But what’s with all that <script type="text/html"> and <![CDATA[ ... ]]> shmoo, you ask? Well let’s cite John Resig here:
“Embedding scripts in your page that have a unknown content-type (such is the case here – the browser doesn’t know how to execute a text/html script) are simply ignored by the browser – and by search engines and screenreaders. It’s a perfect cloaking device for sneaking templates into your page. [...]“

Good news, that is we will be able to put our template code right into our HMTL source files and it won’t show up anywhere but in the sources (btw. thanks to the usage of CDATA it’s perfectly valid markup).

Now for the final part of our little example we’ll need some basic scripting to induce the conversion:

<script type="text/javascript">
    var obj= {
        name: 'Jabberwocky',
        is_starving: function() {
            return Math.random() > 0.5;
        }
    };
    $('#template').jqote(obj).appendTo($('body'));
</script>

That’s it, there’s nothing more to it than calling jQote on our template and providing it with some data object to get things started. jQote really is fun to use and cuts down on the time spent trying to inject arbitrary data into your sites. You’ll learn to love it pretty fast, I promise! Give it a try.

One final word: I’d like to thank John Resig for bringing this up. You rock, dude.