HTML Templating: CoffeeCup? Teacup!
What?
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
- Maurice Machado wrote CoffeeKup years ago, and it's being kept alive(?) as CoffeeCup.
- coffeecup in NPM; README has intro, usage docs, related resources, etc. Same, on GitHub.
Future: ecosystem
- Teacup: seems the successor to CC.
- CoffeeTemplates: same syntax(?), generates both HTML and Handlebars. Fun online converter: HAML→HTML→CC→JS.
- html2coffeekup: stale? But useful!
- Related projects
- Related modules
Besides
- Jade
- ckup? Coco, not CoffeeScript.
Zappa
- Easiest, beautiful:
require('zappajs') PORT,'0.0.0.0',-> @use 'partials' @enable 'default layout' @get '/':-> @render index: title:'Jibbrit' @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!
- server.coffee:
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'
- And client/index.coffee 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:
app.engine 'coffee',teacup.renderFile
- Parameter passing:
res.render req.params[0]+'.html.coffee',{lang,dir,features,version}
- 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?
- But, when I need to render HTML at build time, I put this in my Cakefile:
build_teacup=(next)-> exec 'coffee --eval "console.log (require \'./popup.html.coffee\')()" > dist/popup.html',(err,stdout,stderr)-> console.log 'coffee --eval:',{err,stdout,stderr} unless err then next() else console.log ':('.red
Helpers
…
--
The real world is a special case