Fork me on GitHub

Demo

Params

Templates

+

Result

Features

Usage

Server side

1. Install ECT with npm.

npm install ect

2. 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

Compiler middleware

Benchmark

Environment: Results:
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