Beholder: A Ruby Template Engine
I started up a new project to create a template engine for Ruby web apps. The beginnings of it are on github here. It's very, very rough, so don't judge yet. :-)
I know there are a ton of template engines out there. But here's my complaint with them: often the person developing the front end of an app is primarily an HTML/CSS/JavaScript developer. They may not know Ruby at all. So template engines like Markaby and Hoshi are out. ERB is the most HTML-like template engine, but a) it's still got Ruby mixed into it, so it isn't ideal for strictly front-end developers, and b) it's a mixture of Ruby and HTML, which is ugly and spaghetti-ish.
Enter Beholder.
Beholder is a template engine comprised of HTML tags. Dynamic behavior is accomplished through the use attributes. So, for example, if you have a page and you want to show a chunk of it conditionally, you could do something like this:
In addition, any attribute can be made dynamically by including the 'prop:' prefix. So if you have a template like this:
This is modeled after Tapestry templates (Java) and Kid templates (Python). Anyway, there's a lot of work to be done on it (particularly around the evaluation of 'prop:' attributes), but I like the idea of it a lot.
I know there are a ton of template engines out there. But here's my complaint with them: often the person developing the front end of an app is primarily an HTML/CSS/JavaScript developer. They may not know Ruby at all. So template engines like Markaby and Hoshi are out. ERB is the most HTML-like template engine, but a) it's still got Ruby mixed into it, so it isn't ideal for strictly front-end developers, and b) it's a mixture of Ruby and HTML, which is ugly and spaghetti-ish.
Enter Beholder.
Beholder is a template engine comprised of HTML tags. Dynamic behavior is accomplished through the use attributes. So, for example, if you have a page and you want to show a chunk of it conditionally, you could do something like this:
<html>Which would be rendered as:
<head>
<title>Hello World</title>
</head>
<body>
<span component="if" condition="true">
Body of 'if' component
</span>
<span component="elsif" condition="true">
Body of 'elsif' component
</span>
<span component="else">
Body of 'else' component
</span>
</body>
</html>
<html>The 'component' attribute can either refer to a built in control flow structure, such as 'if', or 'foreach', or it can refer to a partial, so you can embed mini-beholder templates in your main template. There is also a 'yield' component, so each component can act like a layout, generating it's HTML, and then yielding the content within the component node in the template.
<head>
<title>Hello World</title>
</head>
<body>
Body of 'if' component
</body>
</html>
In addition, any attribute can be made dynamically by including the 'prop:' prefix. So if you have a template like this:
<html>And a partial called simple_component.beh like this:
<head>
<title>Hello World</title>
</head>
<body>
<span component="simple_component" message_class="beholder" />
</body>
</html>
<p class="prop:message_class">What's up, world?</p>It would be rendered like this:
The 'prop:' prefixed attributes get evaluated as (in this order) a) the value of the parent component's attribute with that name, b) the value of a local variable of that name, or c) a method in the helper class. (Note that I've only implemented a) right now... so you'll just have to trust me that that's where I'm going.)<html>
<head>
<title>Hello World</title>
</head>
<body>
<p class="beholder">What's up, world?</p>
</body>
</html>
This is modeled after Tapestry templates (Java) and Kid templates (Python). Anyway, there's a lot of work to be done on it (particularly around the evaluation of 'prop:' attributes), but I like the idea of it a lot.
posted by Jason at
9:28 PM
0 Comments
