I’ve been thinking about a new template-engine syntax, inspired by HAML and SASS.
I know about this one:
http://code.google.com/p/phamlp/
And this is great! Brilliant work, in fact.
But there’s a couple of reasons why I started thinking about something new:
-
SASS is very similar to CSS, but HAML is quite different
-
I’m not a fan of meaningful whitespace
-
I want a template syntax that generates queryable templates
What I mean by queryable is, I want to be able to query, modify and extend templates.
To explain what I mean, I’ll have to divert for a moment… As much as I hate to use the word Drupal, there are essentially two things that makes Drupal more extensible than any other CMS:
[list=1]
[*]Hooks (essentially a global event-chain)
[*]A server-side document-object model (which piggybacks on the global event-chain)
[/list]
These two features enable plugins (“modules”) to partake in the construction of documents, as they’re being generated by other modules. Of course that’s not by any means MVC, since everything becomes a tight-knit mish-mash of controller- and view-code pushing and pulling in all directions, so this is not what I’m looking to bring to Yii. I’m interested in the goals here, not the means by which they’re attained.
What I’m looking for, is a view-syntax that more closely resembles SASS or CSS - and at the same time results in templates that can be queried and extended. I picture the queries happening in much the same way a style-sheet (or SASS) applies visual properties to HTML - but I’m hoping to do the query and merge of documents statically, at “compile time”, rather than querying and merging at run-time (as e.g. Drupal does) which is extremely inefficient. (And no, caching is not a universal solution that solves all performance problems without side-effects…)
Anyhow, starting with the basics, here’s what I have in mind:
html {
head {
title = Welcome, Sir.
}
body {
h1.red = This is a test!
#content {
= Hello {$name},
br style="clear:both"
= The weather today is:
.weather.$color = $weather
if $weather=="great"
img src="images/sunshine.jpg"
}
}
}
A couple of notes:
The default tag for inline elements ("=" on the same line) is <span> - hence:
.weather.$color = $weather
is idential to:
span.weather.$color = $weather
The default tag for container elements (contents in curly braces) is <div> - hence:
#content { ... }
is identical to:
div#content { ... }
The compiled output might look something like this:
<html>
<head>
<title>Welcome, Sir.</title>
</head>
<body>
<h1 class="red">This is a test!</h1>
<div id="content">
Hello <?=$name?>,
<br style="clear:both"/>
The weather today is:
<span class="weather <?=$color?>"><?=$weather?></span>
<? if ($weather=="great") { ?>
<img src="images/sunshine.jpg"/>
<? } ?>
</div>
</body>
</html>
A couple of important points about the syntax:
-
not a general-purpose template syntax (like HAML, this is specifically designed for XHTML/XML)
-
element.class#id syntax (identical to CSS selectors)
-
Whitespace means nothing (uses curly braces a’la SASS)
This syntax has a few more curly braces than HAML, but on the up-side, you don’t need the % character in front of every element, you don’t need the “-” character for statements, and you don’t need to count spaces if your editor supports brace matching.
My thinking here, is that elements, dynamic content and view-logic are more commonly used than static content, and so they should have the shortest possible syntax - preferably no symbols at all.
This isn’t by any means complete! Just an idea - I’m posting here for discussion.
And of course, this doesn’t (yet) get to the most exciting thing - making the templates queryable and extensible. I have ideas for that. But let’s see if anyone is interested in discussing this in the first place - if so, I’ll post more details…
For the moment, I’m calling this HQML, mainly because that shorthand doesn’t give any important search results on google. The Q is for queryable or quick, and the rest you can guess