At my current job, we heavily use client side templating, specifically Jade template engine. We've been using Jade for couple of months now and are very happy with it. In this post, I will describe how client side templating works and how to set up development environment that allows you to work on templates and then view them in browser quickly.
Whole workflow looks like this:
- Refresh page in browser to see changes
Key here is detecting that there was change to one of
.jade files and recompiling templates; you
definitely don't want to do that by hand.
Compiling templates in Jade is very simple:
Now you have
template with and
func returns you HTML that you just need to put somewhere on page.
func is executed in client's web browser we need to save
call that file
templates.js) and serve it as any other static file. So,
Since templates are usually in
.jade files, we need to parse all files and compile them. For that
purpose, I wrote this short Node.js script:
In order to run this script, you need to have Node.js and Jade installed. After you install Node.js, Jade is simple:
npm install jade
Now run the script:
node jade_compile.js templates/ output/
If you go to
output folder, you will see a file called
templates.js which contains all your
templates. You do not have to know how compiled templates look, but if you are interested in how
.jade file found in
templates folder. Eg. if you had a file called
templates.js would contain a function named
login which, when called, returns HTML for your login form.
This is probably not the best way to do this because you have to link
login there would be name clashes. I deal with this by putting
_tpl suffix on each of our
.jade files, so we can access templates in browser by issuing simple
If your application is really large, probably the best solution would be to introduce namespaces to
Now that we have a way to compile all our templates, we need some way of detecting changes to
.jade files and run compilation automatically. I use Watchdog library that comes with simple
Basically, this command tells Watchdog to start monitoring
*.jade files in
templates folder, and if anything changes, run
node jade_compile.js templates/ output/ command.
If you are worried about compiling all your templates every time you change something in any template, don't be. Node.js is very fast with this compilation, you probably can't Alt+Tab to browser faster than Node compiles your templates. If you have a lot of templates, try this way first and if it turns out too slow for you, then introduce some logic to template change detection process. First thing that comes to my mind is separating templates into smaller chunks (multiple folders) and treat each of them as described above.
This whole process can seem a bit complicated when you read it first, but in reality it's really integrating couple of tools the way you need them to work. It took me couple of hours to set it up and I haven't touched it for couple of months now, it just works.