STAN - the shortest template engine

On a cold April day, when the snow has not yet melted in the Urals. It was getting dark. I played with micro-patterns.For example: ejohn.org/blog/javascript-micro-templating They were all super-productive on all tests, but at the same time they lacked at least some more or less serious functionality.

The last straw was that I missed js1k. One thing led to another. And an interesting idea came to my mind. Why not make the most of JS? Use the JS syntax in the template (which allows using the JS engine to parse templates) and use all the features of JS.

And the result was a template engine with a fairly simple syntax:

[TAG] raw (data: String) | variable [TAG]
[TAG] .b
[TAG] .e
[TAG]
raw (data: String)

Which looks something like this:

function _template() {
    div.b;
    span.context.value.span;
    span.raw(11).span;
    div.e;
    hr;
    raw('plain text')
}

div.b -> opening tag -> <div>
div.e -> closing tag -> </div>
div.context.value.div -> <div> {{context.value}} </div>
hr -> self-closing tag -> <hr />

It turns out a kind of DSL.

And what size code?

30 lines of code :) I'm not talking about the minified version.

Example?

// Данные - на самом деле в шаблон можно передать 
// любой JS обьект ( включая примитивы )
var data = [
    { name: 'STAN' },
    { name: 'Ai_boy' },
    { name: 'IceFrog' }
];
// Главный шаблон
function _template(){
    // Через [ ] можно передать атрибуты нашему XML тегу 
    h1['class="head"'].raw('List of names').h1;
    for (var i = 0; i < context.length; i++) {
        // вызываем подшаблон
        partial(_item, context[i]);
    }
}
// Partial - подшаблон
function _item(){
    b[args({style: 'color: blue', class: 'test'})].raw("Name:").b;
    div.context.name.div;
    hr;
}
// Написание кастомных helper функций никогда
// небыло настолько простым - просто пишем js
function args(obj){ 
  var result = '';
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      result += key + '="' + obj[key] + '" ';
    }
  }
  return result;
}
document.body.innerHTML = STAN.run(STAN.compile(_template), data);

How to start?

You can go to the site and play Sandbox
aiboy.github.io/STAN/sandbox.html

Or go to the GitHub page and follow the instructions in README.md
github.com/aiboy/STAN
(you can use the template engine both in the browser and in Node. js)

What is the plus?

There are exactly four main advantages:

1) Full support for JS syntax and all its features (CoffeeScript, ClosureScript, TypeScript ... ect)

2) Access to the DOM at the time of template rendering.

3) Full support for all JS libraries inside the template (lodash, underscore, jquery ... ect)

4) Support for templates in any text editor - because they actually are pure JS syntax

What about speed?

jsperf.com/stan-speed-test


The speed of the "compiled" template (which is then manually or automatically converted into a regular js file) is approximately equal to the speed of JavaScript :) Which is very, very bad. If you dynamically compile templates, then the speed is unfortunately not so great.

Why not Zen Coding?

Because Zen Coding cannot be expressed in terms of JS syntax - that is, Zen Coding - cannot be valid JS.

This is a joke?

Despite the madness / stupidity (underline as necessary) of the idea. Everything is very, very serious. The project will be developed. Overgrown with tests, more correct syntax and many other goodies. Go to the GitHub page - leave your wishes, bugs found and everything else.

PS: In fact, I am a little soul-sick when I write that this template engine consists of only 30 lines. To be honest, we will format the lines 40-50. But for me it is more a psychological barrier which I try to adhere to.

PPS: I will be glad to any comments about the "correctness and literacy of the note" (but it would be better if all this will be written in a personal)

PPPS: do not hesitate to comment, I will not be one of "do not like it - pass by :) :)