One of the key components included in Kendo UI is a very high-performance JavaScript "micro-templating" implementation. Almost every JavaScript front-end development project needs templating, so consistent with Kendo UI's goal of providing everything you need for JavaScript development in a seamless, compact package, we've included a templating solution out-of-the-box.

But it's not just any templating solution. It's an unbelievably fast templating solution.

Kendo UI Templating Basics

Before we talk about the speed, let's briefly look at some Kendo UI templating basics. Kendo UI templates focus on giving you just enough templating features to accomplish the common tasks needed for common UI rendering scenarios without hurting front-end performance. As we'll see in a moment, not all JavaScript templating engines are created equal, and sometimes convenient syntax sugar comes at a price. There are three templating "constructs" covered by Kendo UI templates:

1. Rendering raw values
2. Rendering HTML-encoded values
3. Executing arbitrary JavaScript template expressions

Rendering Raw Values

One of the most basic templating tasks is rendering a value as-is in a template. With Kendo UI templates, we do this:

var t = kendo.template("<div id="box"><#= firstName #></div>");

This approach will create a "compiled" in-line template that's ready for rendering with data. Consuming the template looks like this:

var data = { firstName: "Todd" };
t(data);

//HTML Output:
//<div id="box">Todd</div>

Rendering HTML-encoded Values

If you want to render an encoded HTML value in a template, Kendo UI templates can automatically handle the encoding. To do that, we use a slightly different syntax:

var t = kendo.template("<div id="box">${ firstName }</div>");

Now, when we consume our template, assuming there are HTML characters in the data, we'll produce this output:

var data = { firstName: "<b>Todd</b>" };
t(data);

//HTML Output:
//<div id="box">&lt;b&gt;Todd&lt;/b&gt;</div>

External Templates and Expressions

Finally, it's also common in templates to include expressions. Some templating frameworks invent their own re-implementation of JavaScript to provide expression sugar (at the cost of performance), but Kendo UI templates opt to simply allow the execution of any JavaScript and favor performance over expensive syntax sugar.

For example, we can use JavaScript and Kendo UI templates to define this external template for rendering a list of items:

<script id="javascriptTemplate" type="text/x-kendo-template">
    <ul>
    <# for (var i = 0; i < data.length; i++) { #>
        <li><#= data[i] #></li>
    <# } #>
    <ul>
<script>

To then consume this external template with an expression, we simply need to initialize a template that uses this definition and receives an array of values:

//Get the external template definition
var t = kendo.template($("#javascriptTemplate").html());

//Create some dummy data
var d = ["Todd", "Steve", "Burke"];

//Execute the template
t(d);

//HTML Output:
//<ul>
//<li>Todd</li>
//<li>Steve</li>
//<li>Burke</li>
//</ul>

Speed, Speed, Speed

There is no shortage of JavaScript templating libraries. Mustache. Handlebars. Underscore. jQuery Templates. They are all good in their own way, and each has its fans. So why is Kendo UI creating its own templating approach rather than using one of these libraries? Three reasons:

1. Completeness: Kendo UI needs to included everything you need to build JavaScript apps and sites, so we need to include templating out-of-the-box. We don't want to force BYO* (Bring Your Own *Anything). Thus, we need a library that can be easily packaged with Kendo UI.
2. Control: Along those same lines, we need to minimize external dependencies so we can quickly evolve Kendo UI based on your feedback (our release cycles are much faster than most Open Source projects!). Using an external templating library could hurt our ability to quickly respond to change requests.
3. Performance: And most importantly, we want to make sure that the templating that is included with Kendo UI helps you build the fastest JavaScript/HTML front-ends possible.

We did not make the decision to build our own templating lightly. We know it means more work for Kendo UI, but we refuse to cut corners. To guarantee the best performance and experience, we've researched and delivered a highly-optimized micro-templating engine.

"How fast?" you ask. See for yourself in this live JSPerf test.

Depending on the browser and computer (this all runs on the client machine, so naturally there are variances), Kendo UI Templates are up to 60 times faster than jQuery Templates. That's 6000% faster! What's the engineering feat?

During our pursuit of the fastest templating money can buy, we learned a few things:

• The JavaScript god that is John Resig has one of the best "core" micro-templating philosophies in his aptly titled "JavaScript Micro-Templating." This is our starting point and baseline. If we can meet or exceed John's speed, we're meeting our goal for fast templating.
• While John uses array Push and Join functions to build his templates, we discovered that simple string concatenation (+=) performs even faster in many browsers, especially Chrome. (For browsers where it is not faster, a future version of Kendo UI Templates will "fallback" to Join/Push, delivering the best of both worlds.)
• Further, and this is the biggest speed booster, we found that eliminating the JavaScript "with" block inside of the template builder delivers a MASSIVE performance improvement. Of course, some templates need the scope-helping "with" block, so Kendo UI templates use "with" blocking by default, but it can be easily disabled. When you don't need it, you can realize the full speed gains in your template rendering.

The JSPerf linked above compares Kendo UI templates (with and without the "with" option) to jQuery Templates, Handlebar, Mustache, Underscore JS, and John's near-original micro-templating implementation. Thanks to Browserscope aggregated results, we can see how Kendo UI fares across browsers in this comparison (bigger numbers are better):

As you can see, in most browsers Kendo UI templates crush other templating solutions when "with" is not used. Even when the "with" block is used, though, Kendo UI templates are always faster than jQuery Templates. And Kendo UI templates are only going to get faster. A coming improvement makes Kendo UI "with" performance even better in many browsers, too.

A modified version of Resig's micro-templates with no "with" block perform very well, too, especially on iOS, but Kendo UI templates is a close second. We'll try to optimize even more for RTW.

Using Kendo UI templates without the "with" block requires a simple configuration override. For a simple in-line template, the code looks like this:

var t = kendo.template("<div id="box"><#= firstName #></div>",{useWithBlock:false});

You can try a live demo of Kendo UI Templates configured in the same manner used in the JSPerf test by running this saved JSFiddle example.

And that is why Kendo UI is delivering it's own templating implementation.

But I love jQuery Templates…

We recognized from the outset that even though our templating implementation is fast, some people will always prefer their templating library of choice. Maybe they like the syntax sugar. Maybe they like using something familiar. Maybe they just like slower JavaScript apps (I kid, I kid…).

Kendo UI was designed to support this behavior. For anything in Kendo UI that has an out-of-the-box implementation (like Templating), we provide "escape hatches" that make it easy to use any JavaScript library you love. We don't require BYO*, but we do allow and embrace BYO* for developers that have strong preferences.

So if you love jQuery Templates or Mustache or whatever, great! You can use that with Kendo UI, too.

Syntax Debate

The one lingering question in the Kendo UI beta for templates is syntax. We're not huge fans of the admittedly "heavy" angle bracket-based template delimiters. But we need your input! What should the Kendo UI template syntax look like?

One leading idea now in the Kendo UI forums is a new "Hash" template syntax that uses the "#" character. For example:

//Raw value
kendo.template("<div id="box">#= firstName #</div>");

//Encoded value
kendo.template("<div id="box">#: firstName #</div>");

//External template & expression
<ul>
    # for (var item in items) { #
          <li> #= item # </li>
    # } #
</ul>

What do you think? Is this an improved syntax? Sound-off in the comments and in the forums to help shape the final Kendo UI template syntax before RTW later this year.

Kendo UI templates provides high-performance templating out-of-the-box. It's just one small piece of the Kendo UI toolset, but it highlights our commitment to doing things right, maximizing JavaScript performance. Enjoy Kendo UI templates and be sure to share your feedback!

About the Author
Todd Anglin is an avid HTML5, CSS3, and JavaScript advocate, and geek about all things web development. He is an active speaker and author, helping developers around the world learn and adopt HTML5. Todd works for Telerik as Chief Evangelist where his current technical focus in on Kendo UI. Todd is @toddanglin on Twitter.