Navigation

RSS 2.0 New Entries Syndication Feed Atom 0.3 New Entries Syndication Feed

Show blog menu v

 

General

Use it

Documentation

Support

Sibling projects

RIFE powered

Valid XHTML 1.0 Transitional

Valid CSS!

Blogs : Archives

< Preparing RIFE applications for production   What's with all the XML hatred lately? >
Which template syntax looks best to you?

Many times I have wondered why people are so reluctant to investigate RIFE. After having asked around a bit, the most recurring critique was that our template syntax is too arcane at the initial glance. Somehow the look of the tags syntax pushes people away without them ever checking out any of the features of our framework.

Ironically, none of the users consider the syntax to be a problem. Many even love how it stands out while still being totally invisible to a browser or an XHTML editor.

Still, initial adoption seems to be all about appearances, so I think this issue needs to be addressed. That's why I'm asking you, the non-rife users which alternate syntax looks best to you.

Note that in most of the following snippets you'll find our compact [! /] syntax inside the values of tag attributes. I did this since most of the other syntaxes would totally invalidate the XML well-formdness if they were used instead.

Current syntax

This is how RIFE invisible XHTML template tags currently look:

<!--V 'content'/--> 
<!--BV 'content'--> 
    <form action="[!V 'SUBMISSION:FORM:myData'/]" method="post"> 
        <!--V 'SUBMISSION:PARAMS:myData'/--> 
        <input name="name" value="[!V 'PARAM:name'][!/V]" /> 
        <input type="submit" value="That's who I am!" /> 
    </form> 
<!--/BV--> 
<!--B 'welcome'--> 
    <div>Hi <!--V 'PARAM:name'/-->, it's <!--V 'day'/-->!</div>
<!--/B-->

Processing instruction variant

This is a variant that uses the XML processing instruction to achieve invisibility and conciseness:

<?V content/?>
<?BV content?>
    <form action="[!V 'SUBMISSION:FORM:myData'/]" method="post"> 
        <?V SUBMISSION:PARAMS:myData/?>
        <input name="name" value="[!V 'PARAM:name'][!/V]" />
        <input type="submit" value="That's who I am!" />
    </form>
<?/BV?>
<?B welcome?>
    <div>Hi <?V PARAM:name/?>, it's <?V day/?>!</div>
<?/B?>

Regular tags

This version uses custom XHTML tags that look exactly the same as the rest of the layout code and that can easily get validation and auto-completion support in IDEs:

<r:v name="content"/>
<r:bv name="content">
    <form action="[!V 'SUBMISSION:FORM:myData'/]" method="post"> 
        <r:v name="SUBMISSION:PARAMS:myData"/>
        <input name="name" value="[!V 'PARAM:name'][!/V]" /> 
        <input type="submit" value="That's who I am!" />
    </form>
</r:bv>
<r:b name="welcome">
    <div>Hi <r:v name="PARAM:name"/>, it's <r:v name="day"/>!</div>
</r:b>

Velocity inspired

These tags should look somewhat familiar to people that are used to Velocity. Sadly they will not become invisible if the template is viewed in a browser:

Update 23 feb.: I reworked the Velocity inspired syntax to be more consistent with the features of the template engine, to have lesser possibility for conflicts with existing RIFE templates, and to be faster to parse.

${v content/}
${bv content}
    <form action="${v SUBMISSION:FORM:myData:/}" method="post">
        ${v SUBMISSION:PARAMS:myData/}
        <input name="name" value="${v PARAM:name}${/v}" />
        <input type="submit" value="That's who I am!" />
    </form>
${/bv}
${b welcome}
    <div>Hi ${v PARAM:name/}, ${v day/}!</div>
${/b}

older proposal

${content}
$bv{content}
    <form action="${SUBMISSION:FORM:myData}" method="post">
        ${SUBMISSION:PARAMS:myData}
        <input name="name" value="$v{PARAM:name}$/v" />
        <input type="submit" value="That's who I am!" />
    </form>
$/bv
$b{welcome}
    <div>Hi ${PARAM:name}, ${day}!</div>
$/b

Tapestry inspired

These tags should feel comfortable to people that are used to Tapestry, the span tag attributes are used for doing markup:

<span rife:v="content"/>
<span rife:bv="content">
    <form action="[!V 'SUBMISSION:FORM:myData'/]" method="post"> 
        <span rife:v="SUBMISSION:PARAMS:myData"/>
        <input name="name" value="[!V 'PARAM:name'][!/V]" /> 
        <input type="submit" value="That's who I am!" />
    </form>
</span>
<span rife:b="welcome">
    <div>Hi <span rife:v="PARAM:name"/>, it's <span rife:v="day"/>!</div>
</span>

Your opinion?

So which one did you prefer?

  1. Processing instruction variant
  2. Regular tags
  3. Velocity inspired
  4. Tapestry inspired

If you have other ideas, please don't hesitate to suggest them!

posted by Geert Bevin in RIFE on Feb 19, 2006 6:27 PM : 36 comments [permalink]
 

Comments

Re: Which template syntax looks best to you?
Velocity, hands down.

It makes it clear about which parts are RIFE and which ones are *HTML in that document. Good advantage when visually identifying the active parts of a script.

Embedded comments or additional *ML tags just look wrong.

Cheers,

Eugene
http://teslatestament.com
Re: Which template syntax looks best to you?
+1 for Velocity.
Have to agree...
I almost said the "Regular tags", because of the ease of searching for "<rife:" to find scripted things, until I saw attributes.

When you take them into account, "Velocity" does look the most consistent.

Also, I would think that being visible in a browser would be a feature, not a limitation.
Re: Which template syntax looks best to you?
I think I prefer the usual namespace-aware syntax. However, I'd tend to use a shorter prefix like 'r' instead of 'rife'. So I'd rewrite your example like so:

<r:v name="content"/>

Moreover, I wouldn't hurt to use a Groovy String-like syntax instead of the [!V 'PARAM:name'][!/V] syntax, as in:

${param['name']}

Thus, the whole snippet would look something like:

<r:v name="content"/>
<r:bv name="content">
<form action="${submission.form['myData']}" method="post">
<r:v name="submission.params['myData']"/>
<input name="name" value="${param['name']}" />
<input type="submit" value="That's who I am!" />
</form>
</rife:bv>
<r:b name="welcome">
<div>Hi <r:v name="${param['name']"/>, it's <r:v name="day"/>!</div>
</rife:b>

It's still xhtml friendly, and nicer to a foreigner to RIFE's eye.
Re: Which template syntax looks best to you?
I like Tapestry inspired best, because it feels correct in an XML sense. Regular tags has the same property, but is less simple.
Velocity is most simple, though.

I also think you should resist the temptation to treat this as a popularity contest, and look for themes in the comments, then decide on priorities based on the most important themes.
Re: Which template syntax looks best to you?
When I first looked at RIFE was one of the people discouraged because of the arcane syntax. I didn't bother looking any further, because I couldn't find a complelling reason to spend the time to learn more about it. So my choices would be Regular, followed by Vecocity's template language. Although I have not used Velocity, I think it is very similar to other template models. I have not looked at Tapestry but for the same reason as RIFE again. Anyway I do ASP.NET programming for my day job and am familiar with Struts. And I say all this without any bias towards one platform or the other. For me at the end of the day, productivity matters, but I enjoy learning Open Source libraries/frameworks as long as they offer the productivity I am looking for and hence I am willing to put the time and effort to learn it. For example - Spring, ActiveMQ, Rails to name a few.
Re: Which template syntax looks best to you?
Tapestry inspired or current -- don't underestimate the value of being able to annotate a design straight from the designer and see it without special treatment.

The current (you enclose the "design" in the tag and it is replaced) and the tapestry inspired allow this. The others do not.
Re: Which template syntax looks best to you?
Thanks a lot for all the comments everyone. Small note to Brian, the processing instruction one allows this too. Actually it's better than the Tapestry one for that since it really is not part of the tags or the character data. Imho it's even better than the comment syntax, since RIFE's template syntax actually just gives instructions to the parser about how to process it.
Re: Which template syntax looks best to you?
+1 for "don't underestimate the value of being able to annotate a design straight from the designer and see it without special treatment."

One step better is being able to annotate HTML from a designer, then hand it back to them - only with full round tripping can the ideal of separation of designers and developers be achieved. FWIW the tool that I've found comes closest to this is Enhydra XMLC.
Re: Which template syntax looks best to you?
On processing instructions: very good point! In fact they actually make a lot of sense that way =)
Re: Which template syntax looks best to you?
What about design it as a pluggable strategy? I prefer the Tapestry one, but all are so alike. Maybe you can support out of the box the actual one, the processing instruction variant and the tapestry one.
Re: Which template syntax looks best to you?
Hi Hernan, it's totally possible to make a pluggable, it is already configurable in fact. The main worry is that since RIFE is geared towards creating modular and reusable sites, applications and components, developer to template syntax choice of the module developer has to exported by the module for it to be usable. We have been talking about allowing to include a property file with the syntax setup you prefer in the root of a jar. However, I'm afraid that this will feel hackish and due to conflicts when several modules are used becomes troublesome.

Also, independent from that, there's also some consistency to consider. If everybody can just easily invent any kind of template syntax, it becomes very confusing to read and maintain code that has been written by someone else. RIFE IDE plugins will also have a much harder time in supporting those.

Thanks a lot for the input though!
Re: Which template syntax looks best to you?
I like Velocity syntax for the "simple" content (<!--V 'content' /-->)
Even better if "${content}" can be shorten to "$content" for this purposes (i.e. no default value etc.)
Re: Which template syntax looks best to you?
Mix of Regular tags & Velocity inspired:

<form action="${SUBMISSION:FORM:myData}" method="post">
<rife:v name="${SUBMISSION:FORM:myData}" />

Although the syntax didnt help, what really turned me off to Rife was all the XML.





Re: Which template syntax looks best to you?
velocity +1
Re: Which template syntax looks best to you?
I personally have been reluctant to study rife because of the template syntax, even though i have read a lot about the features it provides. It was a weighed decision not to use the framework, and i have to say that i was more willing to choose a framework where i basically had less 'new things to learn'. Be it templating syntax, or whatever.

I'd say the regular tags looks best to me, but without the "[!V 'PARAM:name'][!/V]" which looks too much like xml to not _be_ xml in an xml file (maybe some XPath with some predefined xml node ids for params and such).
(As i don't know rife, using clearer tag names would also help, b, bv, v are really obscure).

I am pretty sure that non-programmers will design the xhtml of websites more and more in the future (keeping it the cleanest for CSS ease), they could do the rife template themselves if it were simple and close enough to what they already know (xhtml). (I'm just speaking at the top of my mind here, don't legally hold me responsible to it or anything ;)
Re: Which template syntax looks best to you?
I'd go for tapestry style syntax, if the hideous square brackets could be removed somehow (e.g. combine tapestry style spans with velocity/jsp style variables , e.g. <span rifeid="blah" value="$v['blah']") />

Velocity style looks decent and should be most understandable to jsp users. I do agree that the square bracket style is hideous.. I did stumble upon RIFE in the past.. but the hideous square bracket syntax just stopped me before looking any further.

Re: Which template syntax looks best to you?
Why not look at FreeMarker? The syntax is a superset of Velocity's and a lot cleaner. The capabilities of FreeMarker are very powerful, it's one of the best template engines around (though not heavily marketed).
Re: Which template syntax looks best to you?
I am not a big web UI developer but anything that reduces the amount of typing, ie code completion by IDEs, is the way to go... So Regular would be good.

An easier/quicker form of [!V 'SUBMISSION:FORM:myData'/] would be also be preferable... But sorry no suggestion to offer this time...


Re: Which template syntax looks best to you?
+1 Velocity
+0 Current
-0 Processing instruction
-1 Tapestry inspired
-1 Regular tags
Re: Which template syntax looks best to you?
I think that only two concerns should come up in this discussion: standards and simplicity.

In WebWork we will be soon looking at a JSP-like syntax that isn't actually JSP. I strongly believe that the benefits that an IDE can provide by using properly namespaced tags is far more valuable than what short hand syntax that Velocity offers. In short: we prefer standards (XML, namespaces, etc) over simplicity, especially given that IDEs can make standards simple via autocompletion.

The other syntaxes aren't interesting to me because they don't address two of the issues.

If you decide to go with a normal tag syntax, perhaps we should work together to come up with a generic template engine. Amazingly, there isn't a single parser out there that currently does that.
Re: Which template syntax looks best to you?
Based on the experience "pushed" by older/actual web frameworks I would say namespace tags are better. But, the actual RIFE template are simpler, but it simplicity doesn't mean it is worse. Actually from my experience with web development, I don't want to expend much time on HTML things, so, RIFE templates in this case collaborate to cut some time on html templating. However I have yet to figure out, (as I am taking a look at RIFE) how to do certain things with RIFE templates.

regards
Re: Which template syntax looks best to you?
Hi Caudio,

feel free to join the mailing list or to come over to the IRC channel if you have additional questions about the templates or anything RIFE related. Often, all you need is a little help to approach things differently and you'll be on your way.

Best regards,

Geert
Re: Which template syntax looks best to you?
Another vote for velocity inspired.

Stewart
Re: Which template syntax looks best to you?
I like the Tapestry syntax better ... being the reason why I now use Tapestry.
The Velocity inspired syntax, although easy to read, sucks much more than JSP syntax with custom tags ... at least those are XML compliant.

So, here is my vote, for what it matters:
+1 Tapestry
+1 regular tags
Re: Which template syntax looks best to you?
Regular and tapestry!
Greetings
8)
Re: Which template syntax looks best to you?
+1 on regular, autocompletion and validation are very useful features
Re: Which template syntax looks best to you?
I'm all for the velocity one, second spot goes to tapestry.
Re: Which template syntax looks best to you?
Thanks for all your comments!

I will add the regular tag variant and the velocity inspired one. I updated the look of the Velocity one to be more consistent, check out the addition in the post itself.
Re: Which template syntax looks best to you?

The tapestry inspired is the cleanest from an xhtml designer viewpoint and from a correct xml usage viewpoint (attributes are all about metadata).

Second favourite is the processing instruction variant, for the same reasons as above, pi:s are meant to give information to a particular processing agent. Use a good name in the pi, though, e.g. <?rife V content/?>.

Compare to weffo architecture outline,

Regular tags are acceptable

The current syntax is a terrible misuse of comments, IMO

The velocity inspired syntax is a mongrel

Re: Which template syntax looks best to you?
The velocity one, it looks more familiar to most people.
Re: Which template syntax looks best to you?
What if you don't like templating engines? ;) The only one I've seen that I really like is <a href="https://sourceforge.net/projects/qwicap">qwicap</a>, and it is not much like any of the others -- it doesn't put markup in templates at all, but instead provides a library for manipulating the template.
Re: Which template syntax looks best to you?
Oops, that was me.
Re: Which template syntax looks best to you?
I strongly prefer "regular tags" (you gain previewability if you design it right), but unlike previous commentators I prefer longer tags such as:

<rife:text> versus <r:t>

The latter is totally unreadable... anyone who asks for acronyms should be introduced to a good IDE with code-complete.
Re: Which template syntax looks best to you?
I've never used the framework so I know little about the context, however I like the regular tags better. I think adherence to standards as much as possible is necessary for any framework to succeed.
Re: Which template syntax looks best to you?
i like the comment-style template syntax very much.
because i like static page's visibility.

Add a new comment

Comments on this blog entry have been closed.

< Preparing RIFE applications for production   What's with all the XML hatred lately? >
 
 
 
Google
rifers.org web