doT.js was created in search of the fastest and concise JavaScript templating function with emphasis on performance under V8 and Node.js.
It shows great performance for both Node.js and browsers.
During my quest I found 2 template engines that caught my attention and inspired doT.
The first one was jQote2, a jQuery plugin, it was the first engine to break the speeds by using string concatenation and avoiding 'with' statements.
The second one was underscore.js which had a nicely designed extension friendly templating function.
doT.js is fast, small and has no dependencies.
by Laura Doktorova, MIT license
It is also used to statically compile partials. This comes in handy when you want to include similar header and footer on multiple pages. doT also allows to customize partial right from the template that will include it.
Check advanced sample and one more sample for hints on how to use defines and partials.
Here is the first benchmark of doT in jsperf.
Here is a more recent benchmark against the new and upgraded engines that popped up lately.
People are constantly adding new javascript template engine benchmarks.
To run the benchmarks for measuring execution of compiled templates:
In the browser: navigate to benchmarks/index.html or go here
With node: node benchmarks/templatesBench.js
To run the benchmarks for measuring compilation speed:
In the browser: navigate to benchmarks/genspeed.html
With node: node benchmarks/compileBench.js
If you plan to use doT with Node.js, you can install doT with npm:
> npm install dot
require('dot') in your code.
<script type="text/javascript" src="doT.js"></script>
var tempFn = doT.template("<h1>Here is a sample template {{=it.foo}}</h1>");
var resultText = tempFn({foo: 'with doT'});
doT.templateSettings = {
evaluate: /\{\{([\s\S]+?)\}\}/g,
interpolate: /\{\{=([\s\S]+?)\}\}/g,
encode: /\{\{!([\s\S]+?)\}\}/g,
use: /\{\{#([\s\S]+?)\}\}/g,
define: /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
iterate: /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
varname: 'it',
strip: true,
append: true,
selfcontained: false
};
Here is the list of default delimiters:
{{ }} for evaluation {{= }} for interpolation {{! }} for interpolation with encoding {{# }} for compile-time evaluation/includes and partials {{## #}} for compile-time defines {{? }} for conditionals {{~ }} for array iteration
By default, the data in the template must be referenced with 'it'. To change the default variable name, modify setting 'varname'. For example, if you set 'varname' to "foo, bar" you will be able to pass 2 data instances and refer to them from the template by foo and bar.
To control whitespace use 'strip' option, true - to strip, false - to preserve.
'append' is a performance optimization setting. It allows to tweak performance, depending on the javascript engine used and size of the template, it may produce better results with append set to false.
If 'selfcontained' is true, doT will produce functions that have no dependencies on doT. In general, generated functions have no dependencies on doT, with the exception for encodeHTML and it is only added if encoding is used. If 'selfcontained' is true and template needs encoding, encodeHTML function will be included in the generated template function.
Call this function to compile your template into a function.
function(tmpl, c, def)
You can precompile all your templates into modules compatible with commonJS, browsers and AMD.
var dots = require("dot").process({ path: "./views"});
This will compile .def, .dot, .jst files found under the specified path. Details
Basic usage:
var dots = require("dot").process({path: "./views"});
// using .jst files
var render = require('./views/mytemplate');
render({foo:"hello world"});
// using .dot files
dots.mydottemplate({it: "dot"});
The above snippet will:
var render = require('./views');
render.templateOne(data);
render.templateTwo(data);
./bin/dot-packer -s examples/views -d out/views