Introducing Strudel

There are too many templating languages out there, but yesterday I decided the world needs another one. The motivation was simple: the main components of my development stack don’t play well together. I’m building an Ember app that’s served by a Tornado backend, and Tornado’s template engine tries to interpret Handlebars templates prematurely. (Both template languages use {{ and }} to enclose directives.) Additionally, the Handlebars compiler requires Node.js, which adds a fairly heavyweight requirement to a build system that otherwise wouldn’t rely on it.

The obvious workaround for the first problem is to use Tornado’s {{! syntax to render literal double mustaches. Any Handlebars tags will be ignored by Tornado and served as valid Handlebars to the client. It works, but it results in ugly template files that are full of {{!foo}} and {{!#block bar}} tags. Too many symbols!

Sometimes expending bit more effort gets us across an energy barrier into a vastly more elegant configuration. Strudel¹ is an attempt to simplify templating in my preferred development stack. The goal is a platform-agnostic front-end template engine that doesn’t conflict with Tornado. Since I need to be able to compile a Strudel template down to static JavaScript using Python, it must also come with compiler tools for multiple languages.

Let’s look at an example. If we compile the following template

@with(person)
    <div class="person">
        <p><b>@(name)</b> lives in @(location) and works on</p>
        <ul>
            @each(project)
                <li><a href="@(url)">@(name)</a></li>
            @end
        </ul>
    </div>
@end

and give it the following context

{
    person: {
        name: 'Brendan',
        location: 'New York',
        projects: [ {
            name: 'Strudel',
            url: 'https://.../strudel'
        }, {
            name: 'Trilobyte',
            url: 'https://.../trilobyte'
        } ]
    }
}

we end up with the following HTML string

<div class="person">
    <p><b>Brendan</b> lives in New York and works on</p>
    <ul>
        <li><a href="https://.../strudel">Strudel</a></li>
        <li><a href="https://.../trilobyte">Trilobyte</a></li>
    </ul>
</div>

You can find out more about the syntax by reading the documentation.

Currently the project is just an interpreter written in PEG.js, a parsing expression grammar generator that quite frankly made this project possible. (The parser was written in an afternoon.) The project will be in flux as I continue to formalize the language spec, but eventually I hope to get to a point where Strudel is a drop-in replacement for Handlebars in Ember.

I don’t normally open-source a project so early in its development, but the project has come together so rapidly that I think it needs some more eyes to help guide its evolution. Your comments, suggestions, and contributions are welcome and appreciated. Happy coding!