STAN is the shortest template engine.

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

The last straw was the fact that I missed js1k. One thing led to another. And an interesting idea came to my mind. Why not make the most of the JS features? Use JS syntax in the template (which allows parsing templates using the JS engine) and using all the JS features.
')
And it turned out a template engine with a fairly simple syntax:

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

What looks 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 in the Sandbox
aiboy.imtqy.com/STAN/sandbox.html

Either go to the GitHub page and follow the instructions in the 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 rendering the template.

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

4) Template support in any text editor - for they are in fact pure JS syntax

And the speed?

jsperf.com/stan-speed-test


The speed of the “compiled” template (which is then manually or automatically turned into a regular js file) is approximately equal to the speed of JavaScript :) Which is not very, very bad. If you dynamically compile the templates, then the speed, alas, is not that big.

Why not Zen Coding?

Because Zen Coding is not possible to express in terms of JS syntax - that is, Zen Coding - cannot be a valid JS.

This is a joke?

Despite the madness / stupidity (underline the necessary) ideas. All very, very seriously. The project will develop. To overgrow with tests, more correct syntax and many other buns. Go to the GitHub page - leave your wishes, found bugs and everything else.

PS: In fact, I curl a little when I write that this template engine consists of only 30 lines. If you honestly format the code, you get 40-50 lines. But for me this is more of a psychological barrier which I try to adhere to.

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

PPPS: do not hesitate to comment, I will not be one of “dislike - pass by” :)