Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Simple solution for compiling jade templates into vanilla JS functions for blazin' fast client-side use.
Branch: master
Pull request Compare This branch is 203 commits behind HenrikJoreteg:master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
templates
.gitignore
.jshintignore
.jshintrc
README.md
demo_output.js
icanhaz.js
package.json
speedtest.js
templatizer.js
test.js

README.md

templatizer.js

Simple solution for compiling jade templates into vanilla JS functions for blazin' fast client-side use.

What is this?

Client-side templating is overly complicated, ultimately what you actually want is a function you can call from your JS that puts your data in a template. Why should I have to send a bunch of strings with Mustaches {{}} or other silly stuff for the client to parse? Ultimately, all I want is a function that I can call with some variable to render the string I want.

So, the question is, what's a sane way to get to that point? Enter jade. Simple, intuitive templating, and happens to be what I use on the server anyway. So... Jade has some awesome stuff for compiling templates into functions. I just built templatizer to make it easy to turn a folder full of jade templates into a CommonJS module that exports all the template functions by whatever their file name.

Is it faster?

From my tests it's 6 to 10 times faster than mustache.js with ICanHaz.

How do I use it?

  1. npm install templatizer
  2. Write all your templates as individual jade files in a folder in your project.
  3. Somewhere in your build process do this:
var templatizer = require('templatizer');

// pass in the template directory and what you want to 
// save the output file as. That's it!
templatizer(__dirname + '/templates', __dirname + '/demo_output.js');

So a folder like this

/clienttemplates
   user.jade
   app.jade
   /myfolder
     nestedTemplate.jade

Complies down to a JS file that looks something like this:

// here's about 2k worth of utils that jade uses to DRY up the template code a bit. 
// Includes some basic shims for Object.keys, etc.
var jade=function(exports){ ... }

// a function built from the `user.jade` file
// that takes your data and returns a string.
exports.user = function () {} 

// built from the `app.jade` file
exports.app = function () {} // the function 

// folders become nested objects so 
// myfolder/nestedTemplate.jade becomes
exports.myfolder.nestedTemplate = function () {} // the template function

// etc. etc

The awesome thing is... there are no external dependencies because they're just functions at this point. Crazy fast, SO MUCH WIN!!!!

Sample?

Check out the demo_output.js file for... err... demo output built from the templates directory in this project.

License

MIT

If you think this is cool, you should follow me on twitter: @HenrikJoreteg

Something went wrong with that request. Please try again.