Using Jade Templates (jade-lang.com) client-side

If you use browserify you can use this handy jade middleware: jadeify.
Then you can just call jadeify("foo.jade", { x : 4, y : 5 }) browser-side after pointing a views directory at the middleware and you get back a jquery handle.

Checkout Blade. It is a Jade-like HTML template engine that is designed for client-side (and server-side) use. There are some other features that you guys might like, as well.

EDIT: But, only for Node.js servers. There is no Ruby implementation at this time.

This feature is now available in Jade.
http://jade-lang.com/api/

From their API Documentations:

var jade = require('jade');

// Compile jade file to a function
var fn = jade.compileClient('string of jade', options);

// Later in client site, render the function to HTML
var html = fn(locals);

You should pass the compiled javascript function to the client, for example by writing the function (fn in the example) to a .js file and then include the .js file in the html file with script tag.

Another option is using templatizer, which compiles jade to a .js file for you.

I wrote a gem called tilt-jade to do this within the asset pipeline. It’s made to work exactly like EJS does with sprockets by default – it renders Jade templates down into functions so they can be called client side. I’m not sure it’s a great solution, but it has worked okay for my needs.

I’ve just made a library for making jade available in client-side html. It is as simple as < jade>…< /jade>. Check it out: https://github.com/charlieamer/jade-query

Jade now supports compiling for the client by default; use the -c --client option. See http://jade-lang.com/command-line.

Here’s a hacky but simple version for browserify using gulp-jade.

var jade = require('gulp-jade'),
    replace = require('gulp-replace');

gulp.task('jade-client', function() {
    gulp.src('./views/**/*.jade')
        .pipe(jade({
            client: true
        }))
        .pipe(replace(/function template/g, 'var jade = require("gulp-jade/node_modules/jade/lib/runtime");\n\nmodule.exports = function'))
        .pipe(gulp.dest('./client/templates'));
});

Then in my client side JS file…

var template = require('./path_to_compiled_template_file');
var renderedTemplateHtml = template({ aLocal: 'blah blah'});

So you only send to the client the specific templates you need and browserify makes sure you only have one copy of the runtime.