Demo
Params
Templates
+
Result
Features
- Excellent performance
- Templates caching
- Automatic reloading of changed templates
- CoffeeScript code in templates
- Multi-line expressions support
- Tag customization support
- Node.JS and client-side support
- Powerful but simple syntax
- Inheritance, partials, blocks
- Compatible with express
- Compatible with PhoneGap
- Backward compatible with eco
- Syntax highlighting for Sublime Text 2 by TurtlePie
Usage
Server side
1. Install ECT with npm.
npm install ect2. Use it.
var ECT = require('ect');
var renderer = ECT({ root : __dirname + '/views' });
var data = { title : 'Hello, World!' };
var html = renderer.render('template.ect', data);
With express
var express = require('express');
var app = express();
var ECT = require('ect');
var ectRenderer = ECT({ watch: true, root: __dirname + '/views', ext : '.ect' });
app.set('view engine', 'ect');
app.engine('ect', ectRenderer.render);
app.get('/', function (req, res){
res.render('index');
});
app.listen(3000);
console.log('Listening on port 3000');Client side
1. Download and include coffee-script.js and ect.min.js.
<script src="/path/coffee-script.js"></script>
<script src="/path/ect.min.js"></script>
2. Use it.
var renderer = ECT({ root : '/views' });
var data = { title : 'Hello, World!' };
var html = renderer.render('template.ect', data);
With server side compiler middleware
1. Download and include ect.min.js. You don't need to include CoffeeScript compiler, because templates are served already compiled by server side compiler middleware.
<script src="/path/ect.min.js"></script>
2. Setup server side compiler middleware.
var connect = require('connect');
var ECT = require('ect');
var renderer = ECT({ root : __dirname + '/views', ext : '.ect' });
var app = connect()
.use(renderer.compiler({ root: '/views', gzip: true }))
.use(function(err, req, res, next) {
res.end(err.message);
});
app.listen(3000);
3. Use it.
var renderer = ECT({ root : '/views', ext : '.ect' });
var data = { title : 'Hello, World!' };
var html = renderer.render('template', data);
Note: root folder must be on the same domain to avoid cross-domain restrictions.
Options
Renderer
- root — Templates root folder or JavaScript object containing templates
- ext — Extension of templates, defaulting to '' (not used for JavaScript objects as root)
- cache — Compiled functions are cached, defaulting to true
- watch — Automatic reloading of changed templates, defaulting to false (useful for debugging with enabled cache, not supported for client-side)
- open — Open tag, defaulting to <%
- close — Closing tag, defaulting to %>
Compiler middleware
- root — Base url, defaulting to / (should be equal to root option on the client side)
- gzip — Compressing templates with gzip, defaulting to false
Benchmark
Environment:- CPU: Intel Core i5 2.4Ghz
- OS: Linux Ubuntu 12.04
- Node.JS verison: 0.8.21
Rendering 100000 templates:
ECT
Escaped : 2180ms
Unescaped : 133ms
Total : 2313ms
Dust
Escaped : 2547ms
Unescaped : 363ms
Total : 2910ms
Hogan.js
Escaped : 3252ms
Unescaped : 758ms
Total : 4010ms
Gaikan
Escaped : 4288ms
Unescaped : 85ms
Total : 4373ms
Fest
Escaped : 4179ms
Unescaped : 265ms
Total : 4444ms
EJS without `with`
Escaped : 4526ms
Unescaped : 485ms
Total : 5011ms
doT
Escaped : 5329ms
Unescaped : 82ms
Total : 5411ms
Swig
Escaped : 5020ms
Unescaped : 407ms
Total : 5427ms
Underscore
Escaped : 5775ms
Unescaped : 2486ms
Total : 8261ms
Eco
Escaped : 8512ms
Unescaped : 991ms
Total : 9503ms
EJS
Escaped : 6316ms
Unescaped : 2734ms
Total : 9050ms
Handlebars.js
Escaped : 7815ms
Unescaped : 2573ms
Total : 10388ms
Jade without `with`
Escaped : 8566ms
Unescaped : 2982ms
Total : 11548ms
CoffeeKup
Escaped : 4968ms
Unescaped : 9983ms
Total : 14951ms
Jade
Escaped : 18330ms
Unescaped : 12095ms
Total : 30425ms
See benchmark suite on GitHub.
Syntax
Unescaped output
<h1><%- @title %></h1>Escaped output
<code><%= @source %></code>Inheritance
<!-- page.ect -->
<% extend 'layout.ect' %>
<div>Hello, World!</div>
<!-- layout.ect -->
<html>
<body>
<% content %>
</body>
</html>
Partials
<% include 'item.ect', { title : 'book', cost: '10$' } %>Blocks
<!-- page.ect -->
<% extend 'layout.ect' %>
<div>Hello, World!</div>
<% block 'footer' : %>
<span>Custom footer content</span>
<% end %>
<!-- layout.ect -->
<html>
<body>
<% content %>
<footer>
<% content 'footer' %>
</footer>
</body>
</html>
Conditions
<% if @links?.length : %>
<ul>
<!-- links -->
</ul>
<% else : %>
<p>List is empty</p>
<% end %>
<% switch @user.oauthProvider : %>
<% when 'facebook' : %>
<img src="facebook.png" />
<% end %>
<% when 'twitter' : %>
<img src="twitter.png" />
<% end %>
<% else : %>
<img src="other.png" />
<% end %>
<% end %>
Loops
<% for link in @links : %>
<li><a href="<%- link.url %>"><%= link.title %></a></li>
<% end %>Play with CoffeeScript syntax for more