The ideal web application templating system

When a designer and a developer work together to create an HTML web application one of the biggest issues is how you translate their vision into code in a way that allows for iteration and flexibility when those designs change. Another issue is that while you are testing a design you would like it to be filled with actual data but having it hooked up to a live server at all times is very painful. So far I haven’t found a system that really gives me even these attributes and as it turns out there are more requirements that I would like that are also mostly unfulfilled. Here is a list of requirements I would like to see met by a templating system:

  • Works well with HTML5/CSS3 progressive enhancement
  • Allows mock data within the template that is replaced at runtime
  • Client-side version that leverages the mock data for shift-reload debugging
  • Composable components, not monolithic pages
  • Very little or no business logic in the templates
  • Concurrent evaluation possible

Right now I am looking at mustache.js and its various server-side implementations as a possible solution to this. It has many of those qualities but I would likely need to make some of my own modifications for things like concurrent evaluation.

Any suggestions?

This entry was posted in Technology. Bookmark the permalink.
  • Marc Hedlund

    I've been asking for something similar for years: http://www.oreillynet.com/onjava/blog/2002/12/w

    I do think mustache is the closest I've seen, though I wish they wouldn't claim it was “logic free” (if/then == logic).

  • http://www.javarants.com spullara

    I am building a Java version of mustache.js that compiles down to bytecode. I'm hoping to build something that satisfies all the constraints above.

  • http://dshaw.com dshaw

    Mustache is definitely my current favorite. There's some interesting stuff evolving in pure javascript development like Sammy.js, which uses jQuery templates, but I prefer Mustaches syntax and reach beyond being pure client-side solution.

  • http://github.com/defunkt Chris Wanstrath

    There's no if/then in Mustache templates.

  • http://github.com/defunkt Chris Wanstrath

    Only loops.

  • http://www.javarants.com spullara

    Actually the loop construct is also an if/then construct. {{#flag}} … do something if flag is true … {{/flag}} is part of the 'standard'.

  • jstrachan

    I'm not sure there is a single ideal template language; it kinda depends on your requirements.

    e.g.

    (i) does the designer just use mock data inside a local HTML file, then you inject values into it on the server,
    (ii) do you use mustache style tags {{foo}} or {{#bar}} inside the HTML which look a bit icky to the designer but at least there's no logic – and you can reuse templates on the client side too
    (iii) or do you have the templates owned by scala/ruby/java/groovy hackers so they want something DRY (like Haml)
    (iv) or use a template language the developers already know well (SSP/JSP/Erb/Velocity etc).

    They all have strengths and weaknesses depending on the project and make up of your team. FWIW we've got (iii) and (iv) in Scalate already and we're working on (i) and (ii) in master right now.

    http://scalate.fusesource.org/

    Irrespective of (i), (ii), (iii) or (iv) you get a nice error console which highlights to the developer which lines/expressions have errors when mistakes occur in development mode. The Scala parser combinators for all the above templates helps us make really good error messages if there are any mistakes in the templates (very common!). Plus the API and layouts are polymorphic so you can mix and match the template engines based on requirements.

    e.g. the designer may own some templates (i) or you might use mustache style (ii) or use scaml for developer-owned templates and (iv) for emails etc.

    I've ran out of time this week – but I hope to document next week how you can use either mustache style or jquery style templates together or separately, depending on if you want a plain HTML without mustaches or not for your designer…

  • Marc Hedlund

    From the *first* example on the man page (http://mustache.github.com/mustache.5.html):

    {{#in_ca}}
    Well, ${{taxed_value}}, after taxes.
    {{/in_ca}}

    In English: “If in_ca is true, then print…”

    How is that not if/then?

    I'm not slamming Mustache – like I say, it's the closest I've seen to what I would want. I just think you have “the smallest amount of logic we think we can get away with,” which is different than “logic-less.” Sam has argued in the past, and I think he/you are probably right, that *completely* logic-less templates would be pure instead of usable.

  • JoeBowman

    I perfer the Django style of templates, and actually, really love the implementation Tornado has for it. What I like is that templates are extensions of other templates, so rather than including a head, then having content, then including a footer, you extend a base page and plug in blocks of content. Here's the example in Tornado code docstring for template http://github.com/facebook/tornado/blob/master/

    ### base.html
    <html>
    <head>
    <title>{% block title %}Default title{% end %}</title>
    </head>
    <body>
    <ul>
    {% for student in students %}
    {% block student %}
    <li>{{ escape(student.name) }}</li>
    {% end %}
    {% end %}
    </ul>
    </body>
    </html>

    ### bold.html
    {% extends “base.html” %}

    {% block title %}A bolder title{% end %}

    {% block student %}
    <li>{{ escape(student.name) }}</li>
    {% block %}

  • http://www.javarants.com spullara

    For the most part I like the Django style templates and even implemented a quick version of them in JSP tags. The issue that I ran into with them was 1) embedding code in the page and 2) the inability to convert blocks into concurrent execution units because of the way scoping works. I will likely keep the extension mechanism though and fold that back into mustache.java at some point because it is very useful.

  • Rich Schiavi

    we are using mustache on our project, and it has worked very well. fwiw, the performance of the nodejs version of mustache has been pretty outstanding.

    django is also very nice, if the extra functionality is required.

  • Pingback: Building the ideal web application template engine | java rants

  • http://www.facebook.com/jarno.keskikangas Jarno Keskikangas

    I had similar frustration than you and couldn’t find any decent solution. So..I rolled out my own, borrowing heavily from ideas in PURE templates and Weld.js.

    Transparency is dead simple (with crazy performance), without any DSL or logic.

    http://leonidas.github.com/transparency/
    https://github.com/leonidas/transparency

    I’d love to hear what you think about it.