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.
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:
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>
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"><b>Todd</b></div>
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>
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:
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 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.
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.
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!
Todd Anglin is Vice President of Product at Progress. Todd is responsible for leading the teams at Progress focused on NativeScript, a modern cross-platform solution for building native mobile apps with JavaScript. Todd is an author and frequent speaker on web and mobile app development. Follow Todd @toddanglin for his latest writings and industry insights.