JavaScript update of the ECT template engine has been released

Exactly three months ago, I introduced the JavaScript ECT template engine to the community. Yesterday there was an update for him, which I want to talk about in this article.

Are you familiar with ect?

ECT is a JavaScript template engine with built-in CoffeeScript syntax (hence the name: Embedded CoffeeScript Templates). ECT was originally developed with an emphasis on maximum performance and at the same time it provides the developer with a rich set of functions.

What's new?

Performance

Now ECT can be called the fastest JavaScript template engine . On this point, the work is completed for the near future, as reached the speed to which he originally sought.
')

Precompilation of templates on the server, before returning to the client

After the publication of ECT, I received many different reviews, both critically and gratefully. There were reviews and suggestions. One of the most frequent suggestions was to add the ability to precompile server-side templates, so as not to load the rather heavy coffee-script.js onto the client and improve client performance.

Now this opportunity has appeared. The compiler is implemented as middleware for connect / express.

It works like this:

• Customize the template engine on the server;
• Add the middleware template compiler to the stack of our connect / express application;
• On the client, as root, specify the url that will serve the middleware.

When a client requests a template from the server, this request serves the middleware of the template compiler, and in response the client receives the already compiled template. In this regard, there is no need to connect the CoffeeScript compiler on the client side and at the same time, we will not have to compile the templates manually after each change. The compiler will do everything himself.

However, manual compilation can still be useful. For example, to use a template engine without Node.JS as a server or with PhoneGap (with which ECT is excellent friends). In TODO, the point of creating templates pre-compilation utility from the command line has already been entered.

Example of using middleware:

var connect = require('connect'); var ECT = require('ect'); var renderer = ECT({ root : __dirname + '/views', ext : '.ect' }); //  .   root        . var app = connect() /** *  middleware  . *   root  base url,    . * ..  url http://server:3000/views/page      __dirname + '/views' + 'page.ect' */ .use(renderer.compiler({ root: '/views', gzip: true })) //     middleware .use(function(err, req, res, next) { res.end(err.message); }); app.listen(3000); 

In the configuration of the template engine on the client, we must specify the same root as in the middleware configuration of the template compiler.

 var renderer = ECT({ root : '/views', ext : '.ect' }); var data = { title : 'Hello, World!' }; var html = renderer.render('template', data); 

Full express framework support

Connecting ECT as a template engine in express is now no problem.

 var express = require('express'); var app = express(); var ECT = require('ect'); var ectRenderer = ECT({ watch: true, root: __dirname + '/views' }); app.engine('.ect', ectRenderer.render); app.get('/', function(req, res){ res.render('index.ect'); }); app.listen(3000); console.log('Listening on port 3000'); 

Syntax

Added the ability to synchronously call the render method.

This slightly increases performance when errors are caught centrally, for example with the help of connect-domain and gives the freedom to choose the style of writing code.

Asynchronous style:

 var renderer = ECT({ root : '/views' }); var data = { title : 'Hello, World!' }; renderer.render('template.ect', data, function (err, html) { }); 

Synchronous style:

 var renderer = ECT({ root : '/views' }); var data = { title : 'Hello, World!' }; var html = renderer.render('template.ect', data); 

It is worth noting that both options are performed synchronously . The difference is only in the style of writing and that the first option passes the error to the callback, and the second, in case of an error, makes a throw. The second option works a little faster.

Added support for multi-line expressions.

Although I myself don’t really like the idea of ​​writing helpers inside templates, they asked about this opportunity quite often ( in the issues of the eco template engine they also asked to add this feature ), so it was decided to implement it.

Now you can define small functions in the template code or execute other code.

Example:

 <% truncateHelper = (str) -> if str.length > 10 return (str.substr 0, 10) + '…' else return str %> <div> <%- truncateHelper @title %> </div> 

For dessert

For ECT, a syntax highlighting plugin for Sublime Text 2 editor has been released. For a special thank you to TurtlePie .