Node.js offers a powerful engine for high-performance web development. One of the challenges with the stock Express distribution, however, is it’s low-quality default templating system. Jade is littered with obscure syntax, and often requires manual conversion from HTML templates in many development workflows. Luckily, installing the EJS templating system is relatively easy, and developers can reap dividends in increased productivity throughout the lifecycle of the software.
EJS effectively brings PHP or ASP embedded script to HTML templates. Installing the platform is easy, and can be done in the initial Express configuration:
//Run this once on each machine
npm install -g ejs
//Run this for every new Node.js project using EJS
express --ejs PROJECTNAME
cd PROJECTNAME
npm install
Instead of Jade files, the views folder is now populated with EJS files. Dreamweaver can similarly be extended for EJS compatibility and syntax highlighting by editing the following file, and adding “,ejs” to the end of the macfileextension and winfileextension tags for the HTML document type:
Path: "C:\Users\<USERNAME>\AppData\Roaming\Adobe\Dreamweaver CS<VERSION>\en_US\Configuration\DocumentTypes\MMDocumentTypes.xml"
//Add EJS to the HTML documenttype
<documenttype id="HTML" internaltype="HTML" winfileextension="html,htm,shtml,shtm,stm,tpl,lasso,xhtml,ejs" macfileextension="html,htm,shtml,shtm,tpl,lasso,xhtml,ssi,ejs" file="Default.html" writebyteordermark="false" mimetype="text/html">
Next, with the system configured, the EJS files can be set up for dynamic loading. This will require two primary steps: mapping the proper location of the “views” folder in the file system, and then rendering the template using the view.
var ejs = require('ejs');
var fs = require('fs');
var path = require('path');
var appDir = path.dirname(require.main.filename);
var ejs_template = fs.readFileSync(appDir+'/../views/FILENAME.ejs','utf8')
rslt = ejs.render(ejs_template,{
parameter1:value1,
parameter2:value2
});
After loading the necessary libraries, the first line of code resolves to the “bin” folder of the application. Next, the target EJS file is loaded to the string “ejs_template”. Finally, the template is used to render the resulting HTML.
This code can be nested recursively to create a dynamic-loading template system. With a few additional lines, caching can be added to the application, by storing previously loaded templates in a global array.
One item to note during caching implementation: since all modules are statically loaded, simple caching will prevent updated EJS files from being displayed to the client until next application server restart. To get around this limitation, the caching engine could compare timestamps of the cached template’s last modification date, with the last modification date of the file on disk.
Written by Andrew Palczewski
About the Author
Andrew Palczewski is CEO of apHarmony, a Chicago software development company. He holds a Master's degree in Computer Engineering from the University of Illinois at Urbana-Champaign and has over ten years' experience in managing development of software projects.
Google+
