a new template-engine syntax

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… :slight_smile:

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 :wink:

In what ways does this new thing differ from a queryable/programmable templating engine like Smarty?

It sounds like a good idea, but Smarty really shines in this context.

And Smarty 3 is a lot faster and more efficient than the previous version.

So, what new things does this bring to the table?

Also, do you know this: Zend coding

One of the Yii members is participating in that project (samdark)

May be you can take even more inspiration to your idea looking at that!!!

That looks interesting… except new syntax. Why can’t we achieve the same goal with HTML + some custom tags?

I got interested in HAML after learning about SCSS - I would never go back to regular CSS at this point.

And you can achieve the same with X/HTML and some custom tags - that’s the Microsoft approach. It’s very tedious to work with. I like HAML for it’s brevity, so I’m trying to come up with a syntax that more closely resembles SCSS and would make it more intuitive to combine the two.

I spent two years in a job, forced to work with Smarty - it was one of the worst piece of software I have ever worked with. Version 3 may in deed be better/faster, but if I wanted a big complicated template engine with Smarty’s syntax, I would look to Dwoo, which has a lean codebase, extremely high performance, and extensible templates.

I am not looking for such an engine. I became interested in HAML, and I am very interested in extensible/queryable templates - something that Smarty and most other engines do not offer… (I don’t know what you mean when you say Smarty is queryable - I don’t just mean programmable or even extensible, but I will get to that in a later post…)

I was familiar with this project - it’s interesting… however, I don’t see the practical use of some of the syntax, such as being able to generate a list of 5 <a> tags, with empty href attributes, with a single line of code? - are there any real/practical examples of how to use it on the Wiki? I only glanced, and there’s a lot of documentation, but I didn’t see anything that really demonstrates doing anything practical…

EDIT: I just watched the video on the site! Clearly this is something for IDE use, and I understand now why something like repeating 5 list items with <a> tags in them would be useful - so you can populate them by hand. That isn’t a template engine at all, it’s an IDE utility. Very cool! It looks like it’s based on some of the same ideas I’ve been playing with - however, this has very different requirements and constraints from what I’ve got in mind…

mindplay

Yep, Zend coding is mainly to be built in various editors and IDEs so it’s not relevant to this topics but is one of the reasons why I’m opposing to a different syntax: there will be no IDE support, there will be no Zen Coding support etc.

IDE support - what for?

This language will be simple - a basic text-editor with brace-matching will work nicely. I doubt you would need (or benefit from) code-completion with a language this simple. Do you use code-completion when writing CSS? My guess is no :slight_smile:

mindplay

I do use completion when writing CSS. I can live without it but why should I if it’s feels so comfortable and allows me to work faster?

You should try SASS - even with no IDE support, it’s a bazillion times faster (and much easier to maintain) than CSS. I would never in a million years go back to CSS.

Same argument for the language I’m proposing - if it never wins IDE support, it’ll still be much cleaner, faster to write, and easier to maintain than hand-written HTML.

If you’re happy letting your IDE do the dirty work, good for you - but personally, when I look at HTML at the end of the day, I feel like we could be doing better…

Well, maybe you’re right. I’ve not tried SASS yet.

It’s nice that somebody has my same ideas about things.

Brilliant

Thanks :slight_smile:

If you didn’t catch the inline link above, I’ve started an open specification - you’re welcome to take a look and post your comments:

http://code.google.com/p/hqml-language/

It looks good to me, maybe you could signal it to the HAML author asking what he thinks about it. The new “SASS 3” (SCSS) syntax doesn’t share anything with the HAML syntax.

I like the idea behind this, and the syntax seems to be a nice compromise between HTML and HAML that takes the best features of both.

Can you explain the query meta-selectors a little more? The wiki page about them is incomplete.

I will, as soon as I have time to think about this again - it’s been a busy couple of weeks, and most of my spare time is invested in my annotation library at the moment…

EDIT: Just added some more information to that page, take a look.

For the record, I have not pursued this specification any further.

I still spend a lot of time thinking about extensible templates, and the best I’ve come up with so far is phpQuery against some kind of fully/mostly XML-compliant, parsable template syntax such as PHPTAL.

Another similar engine is ATAL which looks more modern, but lacking in terms of documentation, although this appears to be heavily in development at the moment, so maybe it’ll see improvements.

If you know of any other fully XML template engines, I’d like to hear about them.

I’m not 100% happy with this approach, as it still means writing code to alter templates - but it’s the best approach I’ve been able to come up with so far. That or define and write a whole new template language from scratch, which I’d like to avoid. Definitely open to ideas…