html template engines

OK, here’s what sucks about all html template engines.

They all focus on the wrong thing! They all focus on how to access variables from the application, and doing things like loops and things like that.

This is all good and great, but I think we’re now past that, there are new requirements of html templates:

Sane syntax

Do you see what’s wrong with this?

{% for item in list %}
    ... do something ..
{% endfor %}

The end tag has a begin and end tag!!

Why can’t it just be:

(for item in list
   (.... do something ...))

Yes, my brain has been infected by the lisp virus :(

This should also be the case for html tags.

Why write this:

<div id="sidebar"> ... content ... </div>

When you can write:

(div (id "sidebar") (.... content ...))

The point is not about using parenthesis, the point is having a single character to close an element.

Another good example that’s non-lispy is C functions:

div(id="sidebar") {
    .. content ..
}

Make it easy to produce cross-browser html code (and css)

If tags can be written like that, we must be able to make up our own tags.

This means having macros for most of the things that tags are used for. If, for a certain situation, a span makes sense in one browser where a div is required for another one, there’s no need for complex if statements to decide the tag name, you just make up a new element, say “weird_floating_thing” and it would get macro-expanded into the right thing.

Jinja2 has macros, but the syntax is so awkward (see above) that it’s not common place to use macros to replace tags, because {% call macro(params) %} .... {% endcall %} is more cumbersome to write than just a plain <tag> ... </tag>.

Be language-neutral

I’m not a lisp hacker. OK, I’m trying to learn it, but I probably won’t use it for my next web app. Lisp’s s-expressions (these familiar (tree (structures))) are naturally useful for writing custom ‘languages’ on top of lisp. You don’t need to make a template engine to parse (div (id "sidebar") "hello world"), it’s already a valid expression. You just need to define div as a macro or a function that somehow ends up translating that expression into <div id="sidebar">hello world</div>

The problem with this is, well, it probably won’t be standardized or well documented, everyone will make up his own tree structure and syntax rules. I think this is a disadvantage. I think for a case like this it’s really useful to have a standard ‘core’ template engine that is extensible but also reliable and ‘stable’.

Also, the requirements for html template engines are:

  1. common place
  2. not tied to any language
  3. have more to do with html than with any specific language or framework

So a language-neutral solution is more fit as a solution to these problems. I would really hate it if someone already has a solution for these html problems but his template engine only works in ruby! I’m a python person.

Extends to css and javascript

The syntax of javascript is also a bit awkward, it’d be nice to have nicer ways of writing functions which take anonymous functions which take dictionaries.

jQuery does a lot of nice thing to javascript, but there’s still the limit of the javascript syntax itself.

For css there’s a good solution: clevercss, the only thing missing from it is macros.

Update: for javascript, there’s coffee-script, and for css, there’s lesscss which is even better than clevercss (it has macros/mixins).

Update2: After 3 months of talking about it, I finally started it: https://github.com/hasenj/sehm There’s also sweetscript: https://github.com/evanrmurphy/SweetScript