19

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.

Travis Wilson
  • 949
  • 9
  • 19
  • keep in mind that inline javascript is compatible with Actionscript, which makes Flex available. – dkretz Jan 19 '09 at 20:38

16 Answers16

14

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

Mladen Mihajlovic
  • 6,095
  • 7
  • 40
  • 55
  • I was about to post a link to his article, when I saw your post :) – cllpse Sep 24 '08 at 18:53
  • 2
    I do like Resig's engine a lot. Problem is that it can never be supported outside of Javascript, because it relies on inline Javascript for all control flow. (Much like the way that JSP 1 relied on inline Java, to the same effect, which JSP 2 tried to rectify.) – Travis Wilson Sep 24 '08 at 19:08
  • Here is a jQuery plugin built on John Resig Micro-Template engine: http://www.eslinstructor.net/vktemplate/ It's a very simple, small and power. And you know what? with this plugin you don't need any template language, just use javascript :) – vadimk Sep 24 '11 at 05:48
10

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

Aasmund Eldhuset
  • 37,289
  • 4
  • 68
  • 81
Mike Hordecki
  • 92,113
  • 3
  • 26
  • 27
  • +1 for naming this elegant, popular, widely available template language. Besides the fact it has implementations in many languages, your Mustache templates will also look the same everywhere. (Compare that to Tenijn, which looks like a close contender.) – Stéphan Kochen Jul 03 '10 at 17:51
  • +1 Mustache is an extremely elegant templating language, that shows that power does not require complexity. – Tomas Feb 25 '11 at 09:48
6

I came across this today, I haven't tried it though...

http://beebole.com/pure/

ckarbass
  • 3,651
  • 7
  • 34
  • 43
5

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.

nas
  • 957
  • 1
  • 9
  • 21
2

ExtJS has an exceptional templating class called Ext.XTemplate: http://extjs.com/deploy/dev/docs/?class=Ext.XTemplate

big lep
  • 879
  • 6
  • 9
2

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
1

Tenjin http://www.kuwata-lab.com/tenjin/ Might be what you're looking for. Haven't used it, but looks good.

Kent Fredric
  • 56,416
  • 14
  • 107
  • 150
1

I wrote http://google-caja.googlecode.com/svn/changes/mikesamuel/string-interpolation-29-Jan-2008/trunk/src/js/com/google/caja/interp/index.html which describes a templating system that bolts string interpolation onto javascript in a way that prevents XSS attacks by choosing the correct escaping scheme based on the preceding context.

Mike Samuel
  • 118,113
  • 30
  • 216
  • 245
1

There is Client-Side Template functionality coming to the coming ASP.NET AJAX 4.0.

http://encosia.com/2008/07/23/sneak-peak-aspnet-ajax-4-client-side-templating/

Also, you can use the Microsoft AJAX Library (which is the JavaScript part of ASP.NET AJAX) by itself, without using ASP.NET.

http://www.asp.net/ajax/downloads/

Chris Pietschmann
  • 29,502
  • 35
  • 121
  • 166
1

I've enjoyed using jTemplates:

http://jtemplates.tpython.com/

Dave Ward
  • 59,815
  • 13
  • 117
  • 134
1

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 ;-)

balupton
  • 47,113
  • 32
  • 131
  • 182
0

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>
Kernel James
  • 3,752
  • 25
  • 32
0

If you are using Script# you may want to consider SharpTemplate, a strongly typed, super efficient HTML templating engine.

Shiva
  • 18,235
  • 4
  • 20
  • 9
0

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.

Tod Harter
  • 516
  • 5
  • 8
0

QueryTemplates Demo: http://sandbox.meta20.net/querytemplates-js/demo.html

Community
  • 1
  • 1
Tobias Cudnik
  • 9,240
  • 4
  • 24
  • 18
0

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). )

KajMagnus
  • 11,308
  • 15
  • 79
  • 127