.gitignore

.DS_Store
node_modules
*~
*.swp
*.bak
*.log

app.js

'use strict';

var express = require('express');
var routes = require('./routes');
var http = require('http');
var path = require('path');

var app = express();

app.configure(function () {
  app.set('port', process.env.PORT || 8000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

app.get('/', routes.index);

http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

index.jade

extends layout

block content
  h1 Server side rendering
  #person1
  include ./mixins/person.jade
  mixin person(name, age)
  h1 Client side rendering
  #person2

block entrypoint
  script
    (function () {
      var doc = this.document;
      var person = { name: 'kazupon', age: 22 };
      var person_view = new MyLib.PersonView({
        model: person,
        element: doc.getElementById('person2')
      });
      person_view.render();
    }).call(this);

index.js

'use strict';

exports.index = function (req, res){
  res.render('index', {
    title: 'sample',
    name: 'kazupon',
    age: 20
  });
};

layout.jade

doctype 5
html
  head
    title= title
    script(src='/javascripts/runtime.min.js')
    script(src='/javascripts/MyLib.renderPerson.js')
    script(src='/javascripts/MyLib.PersonView.js')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
    block entrypoint

MyLib.PersonView.js

(function () {
  'use strict';

  var MyLib = this.MyLib || {};
  var doc = this.document;

  var PersonView = function PersonView (params) {
    params = params || {};
    var model = params.model || {};
    model.name = model.name || '';
    model.age = model.age || 0;
    this.model = model;
    this.element = params.element || doc.createElement('div');
  };

  PersonView.prototype.render = function () {
    this.element.innerHTML = MyLib.renderPerson(this.model);
    return this;
  };

  MyLib.PersonView = PersonView;
  this.MyLib = MyLib;
}).call(this);

package.json

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app"
  },
  "dependencies": {
    "express": "3.0.4",
    "jade": "*"
  }
}

person.jade

include ../mixins/person.jade

mixin person(name, age)

person.jade

mixin person(name, age)
  p.name Name: #{name}
  p.age Age:  #{age}

runtime.min.js

jade=function(exports){Array.isArray||(Array.isArray=function(arr){return"[object Array]"==Object.prototype.toString.call(arr)}),Object.keys||(Object.keys=function(obj){var arr=[];for(var key in obj)obj.hasOwnProperty(key)&&arr.push(key);return arr}),exports.merge=function merge(a,b){var ac=a["class"],bc=b["class"];if(ac||bc)ac=ac||[],bc=bc||[],Array.isArray(ac)||(ac=[ac]),Array.isArray(bc)||(bc=[bc]),ac=ac.filter(nulls),bc=bc.filter(nulls),a["class"]=ac.concat(bc).join(" ");for(var key in b)key!="class"&&(a[key]=b[key]);return a};function nulls(val){return val!=null}return exports.attrs=function attrs(obj,escaped){var buf=[],terse=obj.terse;delete obj.terse;var keys=Object.keys(obj),len=keys.length;if(len){buf.push("");for(var i=0;i<len;++i){var key=keys[i],val=obj[key];"boolean"==typeof val||null==val?val&&(terse?buf.push(key):buf.push(key+'="'+key+'"')):0==key.indexOf("data")&&"string"!=typeof val?buf.push(key+"='"+JSON.stringify(val)+"'"):"class"==key&&Array.isArray(val)?buf.push(key+'="'+exports.escape(val.join(" "))+'"'):escaped&&escaped[key]?buf.push(key+'="'+exports.escape(val)+'"'):buf.push(key+'="'+val+'"')}}return buf.join(" ")},exports.escape=function escape(html){return String(html).replace(/&(?!(\w+|\#\d+);)/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")},exports.rethrow=function rethrow(err,filename,lineno){if(!filename)throw err;var context=3,str=require("fs").readFileSync(filename,"utf8"),lines=str.split("\n"),start=Math.max(lineno-context,0),end=Math.min(lines.length,lineno+context),context=lines.slice(start,end).map(function(line,i){var curr=i+start+1;return(curr==lineno?"  > ":"    ")+curr+"| "+line}).join("\n");throw err.path=filename,err.message=(filename||"Jade")+":"+lineno+"\n"+context+"\n\n"+err.message,err},exports}({});

style.css

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

template_generator.js

'use strict';

var format = require('util').format;
var fs = require('fs');
var jade = require('jade');
var log = console.log.bind(console);
var error = console.error.bind(console);


var js_template = [
  '(function (jade) {',
  '  var MyLib = this.MyLib || {};',
  '  MyLib.renderPerson = %s;',
  '  this.MyLib = MyLib;',
  '}).call(this, jade);'
].join('\n');


process.on('uncaughtException', function (err) {
  error(format('uncaughtException: %s', err.message));
  process.exit(1);
});


if (require.main === module) {
  fs.readFile('./views/includes/person.jade', 'utf8', function (err, template) {
    if (err) {
      error('Error: %j', err);
      process.exit(1);
      return;
    }
    template = jade.compile(template, {
      filename: './views/includes/person.jade',
      client: true,
      compileDebug: false
    });
    var js = format(js_template, template.toString());
    fs.writeFile('./public/javascripts/MyLib.renderPerson.js', js, function (err) {
      if (err) {
        error('Error: %j', err);
        process.exit(1);
        return;
      }
      process.exit(0);
    });
  });
}