Projects

Nova: A JavaScript based template engine for Node.JS

January 21, 2011 in Node.JS, Nova, Programming, Projects, Starlis

Previously I wrote that I will be releasing a JavaScript based template engine very soon (HOPEFULLY this weekend) for Node.JS, so I wanted to talk a little on that.

One big annoyance with template engines these days for me is the idea that the syntax has to be some special unique format, in which no IDE or editor will ever support out of the box unless it gets extremely huge like Smarty. That to me is very annoying, as you lose all the benefits syntax highlighting and other features your editor can provide.

So I decided to make a template engine where the syntax is simply JavaScript, and the DOM can be controlled fully through JavaScript.  Now your site could be fully coded in JavaScript (Client Design, Client Feature, Server, Database (mongo))! JavaScript is on the way to world domination!

The promise is simple. Provide a template system that is 100% JavaScript code (the code is evaluated just like it was a Node.JS module), where your editor can provide out of the box support for syntax highlighting and common errors. Also the ability to lint your template too.

Since the code is fully ran JavaScript, you also have the ability to utilize Node.JS functionality into your template.

Wait you say, “functions and logic inside a template engine?! That goes against the point of a template engine!”

No, It doesn’t. Some random guy on the Internet made a blog post saying HE thinks you shouldn’t have any logic done in a template and it spread, and now everyone thinks that its bad to have logic in a template.
But no, it’s not. You’re end goal is to make use of the tools available to you, and accomplish your goals cleanly, efficiently, and as quickly as possible.

If you only have a flat head screw driver, which fits into the size of a Phillip head screw, would you run to the store to buy a Phillip head screwdriver, or would you use the Flathead and just unscrew the screw?

A tool or library should not necessarily restrict you from doing things. It should be you, the user of said library, who decides the best practices and implementation for your project. If you want to keep all logic out of a template, then do it. If you feel having logic in a template makes your task easier, then do it.

This concept that the tool should dictate what you use it for needs to go.

Nova will be flexible, and not restrictive. So you can build your template however you want. You give it data in its expected fashion, and it will act on that. It’s not going to spank you for using logic in your template. (Although if you’re into that kind of thing I can write a special version for you for a price… :))

Here is an example (very basic) template for Nova:

======

======

as you see, its very simple JavaScript, and since its JavaScript and not JSON, you dont even have to wrap the keys in strings

{h1:{id: ‘header’}}

would work just as fine. Again it’s YOUR choice for standards.

Now. Nova caches templates on load to pure HTML so this syntax isnt parsed EVERY time the template is rendered. But static templates are no fun of course… we need to be able to render dynamic content!

Well, notice that nova variable I didn’t use in the example? That has helper functions! One of those functions is nova.onRender
This function will let you specify a callback function to execute anytime the template is rendered. Note the object notation format is parsed and processed on COMPILE time, ie the very first request, then on render the onRender functions are called to fill in dynamic data.

So how do you use them? take the following template above and lets replace the [‘My content’] with:

=====

=====

So when you call template.render() in your application, you pass it 2 arguments, with the first (optionally) being render variables.
These are variables you can build in your applications logic before rendering to the client, then pass it to template to use just like any other template engine.

The difference here is that since most of the HTML is cached and this is a JavaScript oriented language, the processing and printing of the variables in the template is done through JavaScript functions.
Also, because templates can render Asynchronously.

Notice in the above example, we give a different call to render based on if username was set or not.
Firstly to explain render, anything passed to this function will be the ‘answer’ to what content should fill the onRender spot. So if my username was Aikar, I would see:

<div id="content">  <span>Greetings Aikar</span></div>

Also notice I was able to still use the Nova style syntax of the template, and did not have to type raw HTML!
Nova is extremely flexible, and will give you the tools you need to write fun templates.

Also, again they are Asynchronous. The template runs all onRender async, and will wait for all of them to ‘answer back’

So say you wanted to do some async operation like a database query (again, do what you want with your templates, it’s your choice), you would do something like this:

========

========

Check the Nova docs when its released for more helpers such as partial/include support!