Coffeekup

  renderTemplate: ->
    "div":
      "span .some-class":
        _: ["Hello, "]
      "strong #dyn_id":
        _: ["#{@getName()}!"]
    "subTemplate":
      foo: bar
  subTemplate: (args) ->
    blockquote:
      _: args.foo
  getName: ->
    "user name from DB or whatever"

Looks scary coming from years of HTML coding right? But HTML looked scary at first too.

Now: stylesheets are Stylus, templates and logic are CoffeeScript both server-side and client-side. I haven't been such a happy coder for a decade. Config files are a simplified Stylus/Coffee-like format that gets transformed to JSON. I'm actually using the CoffeeScript compiler here so in effect each config file gets transformed into a node.js "module". That means they could be turned into config "scripts" if necessary.

What I loved about Lisp in theory: code is data, data is code. Only the parens sucked for me. Now we're approaching this ideal again, slowly and emergently but surely. :)

Thank you for that. I've been looking for this concise a statement to make in debates I've had in the past.

In that line of thinking, it's also raised a new question in my mind. CoffeeKup seems to be optimized for baking logic into the template. It is not too different, but too much like most "templating" languages for me to completely get behind it.

This is however, a really cool project that's well executed. I'm just hoping that the idea of further separating logic from templates takes hold (something like mustache, perhaps).

  webpage = kup.render ->
    doctype 5
    html ->
      head ->
        meta charset: 'utf-8'
        title 'My drawing | My awesome website'
        style '''
          body {font-family: sans-serif}
          header , nav, section , footer {display: block}
        '''
        coffeescript ->
          draw = (ctx, x, y) ->
            circle = (ctx, x, y) ->
              ctx.beginPath()
              ctx.arc x, y, 100, 0, 2*Math.PI, false
              ctx.stroke()
              ctx.strokeStyle = 'rgba(255,40,20,0.7)'
            circle ctx, x, y
            for angle in [0...2*Math.PI] by 1/3*Math.PI
              circle ctx, x+100*Math.cos(angle),
                          y+100*Math.sin(angle)
          window.onload = ->
            canvas = document.getElementById 'drawCanvas'
            context = canvas.getContext '2d'
            draw context , 300, 200
      body ->
        header -> h1 'Seed of Life'
        canvas id: 'drawCanvas', width: 600, height: 400
  
  http = require 'http'
  server = http.createServer (req, res) ->
  show "#{req.client.remoteAddress} #{req.method} #{req.url}"
  res.writeHead 200, 'Content -Type': 'text/html'
  res.write webpage
  res.end()
  server.listen 3389
  show 'Server running at'
  show server.address()

- There's no separate file for the HTML template

- There's no separate file for the javascript inside

- There's no separate file for the web server

It's just "node circles.coffee" and you're good to go. CoffeeKup makes this sort of one-shot webapp experiment scripts particularly easy. Now you don't need an entire folder for each of your sandbox projects.

https://github.com/jed/fab/blob/browser/demo.html

(I'm biased, but am a fan of making markup "just code".)