HTML Templating: CoffeeCup? Teacup!


There's a comprehensive (long) intro, but this discussion/criticism, dating from the buzz days, is (always) so much more expressive! Will "summarize" it, later…

History: resources

  1. Maurice Machado wrote CoffeeKup years ago, and it's being kept alive(?) as CoffeeCup.
  2. coffeecup in NPM; README has intro, usage docs, related resources, etc. Same, on GitHub.

Future: ecosystem

  1. Teacup: seems the successor to CC.
  2. CoffeeTemplates: same syntax(?), generates both HTML and Handlebars. Fun online converter: HAML→HTML→CC→JS.
  3. html2coffeekup: stale? But useful!
  4. Related projects
  5. Related modules


  1. Jade
  2. ckup? Coco, not CoffeeScript.


  1. Easiest, beautiful:
    require('zappajs') PORT,'',->
    	@use 'partials'
    	@enable 'default layout'
    	@get '/':->
    		@render index:
    	@view index:->
    		section id:'setup',->
    But, everything in the same file was great for hackathons… for Constitution I decided to go with Express.IO instead.

Express: magic!

    app.set 'view engine','coffee'
    app.set 'views','client' # Directory to find templates in.
    app.engine 'coffee',coffeecup.__express
    app.all '/',(req,res)->res.render 'index'
  2. And client/ simply:
    doctype 5
    html lang:'en',dir:'ltr',->
    	head ->
    		title 'EB mockups'
    Et cetera.

Except I've switched to Teacup, which isn't nearly as magical:

  1. app.engine 'coffee',teacup.renderFile
  2. Parameter passing:
    res.render req.params[0]+'',{lang,dir,features,version}
  3. And the template itself as a regular module:
    {renderable,normalizeArgs,comment,doctype,html,head,title,link,meta,script,body,section,div,span,p,q,nav,header,footer,h1,h2,h3,a,img,form,input,label,button,select,option,fieldset,ol,ul,li,table,tr,th,td,text,raw,tag,iframe,br,coffeescript}=require 'teacup' # (I hate this!)
    module.exports=renderable (params)->
    	doctype 5
    	html lang:params.lang,dir:params.dir,->

Express seems to detect changes to the template, and recompiles. No need to restart it.

Render when?

  1. But, when I need to render HTML at build time, I put this in my Cakefile:
    	exec 'coffee --eval "console.log (require \'./\')()" > dist/popup.html',(err,stdout,stderr)->
    		console.log 'coffee --eval:',{err,stdout,stderr}
    		unless err then next() else console.log ':('.red


The real world is a special case