Tuesday, May 15th, 2007

Velocity2JS: Templating within

Category: Examples, JavaScript, Library

Velocity is a popular templating system for Java developers. Velocity2JS takes the engine and has it output JavaScript functions.

Example Velocity Template

  1. <html>
  2. <body>
  3. Hello $world.name!
  4. <table>
  5. #foreach( $greeting in $greetings )
  6.    <tr>
  7.     <td>$greeting.language</td>
  8.     <td>$greeting.text</td>
  9.    </tr>
  10. #end
  11. </table>
  12. </body>
  13. </html>

JS Output


  1. function helloworld(context) {
  2.     var text = new StringCat();
  3.     text.push('<html><body>Hello ');
  4.     text.push(context.world.name);
  5.     text.push('<table>');
  6.     for (var i1=0;  i1<context .greetings.length; i1++) {
  7.         var greeting = context.greetings[i1]);
  8.         text.push('   <tr>  <td>');
  9.         text.push(greeting.language);
  10.         text.push('</td><td>');
  11.         text.push(greeting.text);
  12.         text.push('</td>    <td>');    
  13.     }
  14.     text.push('</td></context></table></body></html>');
  15.     return text.toString();
  16. }

Posted by Dion Almaer at 6:31 am

2.9 rating from 35 votes


Comments feed TrackBack URI

Don’t anyone know, if there is such thing for php?

Comment by dienow — May 15, 2007

It’s called Smarty :)

Comment by Ed — May 15, 2007

genshi2js is quite a similar thing. but with the genshi template language as target (genshi is nice for python programmers and proponents of the idea that markup based templating is better for markup output).


There’s also a live demo

Comment by Florian — May 15, 2007

Does Velocity2JS really generate so many useless spaces?

Comment by Christian Ullenboom — May 15, 2007

Honestly, I didn’t spend much time in optimizing the JS output, yet. My first thoughts were stripping all spaces, but this would lead to some problems. Think of the html tag “” for example.
The indention is added manually for readability and is not added to the JS output of course.

Comment by Tobias Riemer — May 15, 2007

Think of the html tag “pre” for example.

Comment by Tobias Riemer — May 15, 2007

Neat, I always liked Velocity as a template language, it had a few issues, but was always pretty straightforward.

Comment by Adam Sanderson — May 15, 2007

we have a similar project with different sintax, check out

Comment by wezzy — May 15, 2007

the equivalent for PHP is…PHP

Comment by cdude — May 15, 2007

woops, the code got stripped out, let me try again:

<?php foreach($greetings as $greet): ?>
<?php endforeach ?>

Comment by cdude — May 15, 2007


you don’t understand the nature of this. This is client side templating. Since when does your PHP run on a webclient? And no, the point isn’t that it’s supposed to run on a server. The point *is* precisely that it doesn’t run on the server.

Comment by Florian — May 16, 2007

I’m having a hard time fathoming how this could possibly be useful for anything other than chewing up RAM and CPU and bandwidth I don’t have. Forgive my feeble mind but do I really need to download a library so that I can push strings into an array and then concatonate them? Please enlighten me. I really want to know.

Comment by Vance Dubberly — May 16, 2007

I’m with Vance on this one. What really is the point?

Comment by johno — May 16, 2007

For example you have application that outputs some date divided into many pages. If you use ajax to get new data in json or some other format and then put it into template clientside you wouldn’t have to send ready html code each time user goes to other page. It will shurely save your bandwidth

Then you will get a problem with client side templating, cause JS doesn’t have buit in tools and you dont want to concatinate strings.
Instead you want to use som template language you used to. And this library will help in using Velocity template in JS.

PS: sorry for my English

Comment by dienow — May 16, 2007


“save your bandwidth” seems like a weak argument…

Comment by Alex — May 17, 2007

I mean less data you transfer, faster your application is)

Comment by dienow — May 17, 2007

@florian, yes i’m well awared that this is client side. What makes you think I was suggesting otherwise? I was merely demonstrating templating in PHP.

Comment by cdude — May 17, 2007

Javascript templating can be useful when creating Rich Internet Application. An example of it is my MindFrame Framework which uses ZParse as template engine: http://www.riiv.net/2007/05/01/mindframe-demystifying-rich-internet-application/

Comment by Rizqi Ahmad — May 18, 2007

Leave a comment

You must be logged in to post a comment.