Reputation: 979

What good template language is supported in JavaScript?

Templates are a pretty healthy business in established programming languages, but are there any good ones that can be processed in JavaScript?

By "template" I mean a document that accepts a data object as input, inserts the data into some kind of serialized markup language, and outputs the markup. Well-known examples are JSP, the original PHP, XSLT.

By "good" I mean that it's declarative and easy for an HTML author to write, that it's robust, and that it's supported in other languages too. Something better than the options I know about. Some examples of "not good":

String math:

element.innerHTML = "<p>Name: " + data.name
    + "</p><p>Email: " + data.email + "</p>";

clearly too unwieldy, HTML structure not apparent.

XSLT:

<p><xsl:text>Name: </xsl:text><xsl:value-of select="//data/name"></p>
<p><xsl:text>Email: </xsl:text><xsl:value-of select="//data/email"></p>

// Structurally this works well, but let's face it, XSLT confuses HTML developers.

Trimpath:

<p>Name: ${data.name}</p><p>Email: ${data.email}</p>

// This is nice, but the processor is only supported in JavaScript, and the language is sort of primitive (http://code.google.com/p/trimpath/wiki/JavaScriptTemplateSyntax).

I'd love to see a subset of JSP or ASP or PHP ported to the browser, but I haven't found that.

What are people using these days in JavaScript for their templating?

Addendum 1 (2008)

After a few months there have been plenty of workable template languages posted here, but most of them aren't usable in any other language. Most of these templates couldn't be used outside a JavaScript engine.

The exception is Microsoft's -- you can process the same ASP either in the browser or in any other ASP engine. That has its own set of portability problems, since you're bound to Microsoft systems. I marked that as the answer, but am still interested in more portable solutions.

Addendum 2 (2020)

Dusting off this old question, it's ten years later, and Mustache is widely supported in dozens of languages. It is now the current answer, in case anyone is still reading this.

Upvotes: 21

Answers (16)

Mladen Mihajlovic

Reputation: 6435

John Resig has a mini javascript templating engine at http://ejohn.org/blog/javascript-micro-templating/

Upvotes: 14

Mike Hordecki

Reputation: 97091

You might want to check out Mustache - it's really portable and simple template language with javascript support among other languages.

Upvotes: 12

Tod Harter

Reputation: 536

One possibly interesting choice is https://github.com/rexxars/react-markdown which is a rather interesting way to include markdown in your React-based web UI. I've tested it, works reasonably well, although the docs lead me to understand that HTML rendering has acquired some issues in the 3.x branch. Still, seems like a viable option for certain uses.

Upvotes: 0

KajMagnus

Reputation: 11666

If you use Rhino (a Java implementation of JavaScript) you can run the JavaScript template language of your choice on the server too.

You also know for sure that the server and browser template results are identical. (If the template is implemented in 2 languages, there might be some subtle differences between the implementations.)

... But now 5 years later (that is, year 2016), with Java 8, you'd be using Nashorn instead, not Rhino. Here is an intro to Nashorn, and if you scroll down a bit, you'll find an example of Nashorn + the Mustahce template language: http://www.oracle.com/technetwork/articles/java/jf14-nashorn-2126515.html

(Personally I use React.js server side, via Nashorn (but React isn't a templating language). )

Upvotes: 0

Kernel James

Reputation: 4064

Distal templates http://code.google.com/p/distal is a little like your XSLT demo but simpler:

<p>Name: <span data-qtext="data.name"></span></p>
<p>Email: <span data-qtext="data.email"></span></p>

Upvotes: 0

Ruan Mendes

Reputation: 92274

I use Google Closure templates. http://code.google.com/closure/templates/docs/helloworld_js.html

Simple templating, BiDi support, auto-escaping, optimized for speed. Also, the template parsing happens as a build step, so it doesn't slow down the client. Another benefit is that you can use the same templates from Java, in case you need to generate your HTML on the server for users with JavaScript disabled.

Upvotes: 2

balupton

Reputation: 48640

Here is one implemented in jQuery for the Smarty templating language. http://www.balupton.com/sandbox/jquery-smarty/demo/

One impressive feature is the support for dynamic updates. So if you update a template variable, it will update anywhere in the template where that variable is used. Pretty nifty.

You can also hook into variable changes using a onchange event. So that is useful for say performing effects or AJAX when say the variable "page" changes ;-)

Upvotes: 1

nas

Reputation: 977

Closure templates are a fairly robust templating system from Google, and they work for both Javascript and Java. I've had good experiences using them.

Upvotes: 5