MaskJS, let's talk about the template engine, or a new bike

Here, finally got his hands to share with people one of the many bicycles (as they now call personal practices). Before Habrakat a couple of pros and cons of this solution:
Of the benefits:

• jsperf speed (test with precompiled patterns: jsperf )
• extensibility: = custom controls, transformation of template data
• data bindings
• json compilation for further caching
• nice syntax (without a jumble of logic and structure)

Of the disadvantages:

• template data can only be in attributes and literals (although it’s enough - that's enough)

If the topic is interesting -

Introduction

Let me immediately apologize for the grammar / style. I want to write everything very briefly, but at the same time, so that everyone understands me, and also correctly understood. You are not compilers who literally “understand” everything - but each with its own experience, judgment and so on. And since I have little experience in writing articles, as well as experience in writing in Russian, this throws away at the roots the hope of writing everything as I imagine it. But I will try, and you do not swear.
')

A bit of history

A couple of years ago, I needed a function like String.format('N: #{a} : #{b}',{a:1,b:2}) .
Soon I realized that using it for formatting html, I, for the most part, have my hands tied. Indeed, one would like formatting by condition, conditional visibility and lists. Looking at different template engines, I felt a wild disgust for a mixture of html and javascript , plus using with(){} and eval/new Function('') also did not please. Thinking that "I need something just a little bit" and decided to write for myself. Thus were born two tags list and visible and the format of the form #{a==1?1:-1} . It was not enough for me to only find these tags, then well String.format . And now, for a year and a half, this engine carried its service perfectly - it was faster and faster, more reliable and more reliable.

"And we are always a little ..."

Sadly, but we are so arranged - well, at least I am. I wanted it even faster, even more extensible and so that no further mash is html / javascript . At that moment, I knew for sure: I want custom tags - so that I don’t have to write the same html structure ten times without placeholders (so that after inserting it into the house, it will render) . And as soon as I sat down to finish the parser to handle additional tags, then, as luck would have it, the desire for art, which began to rattle, aroused, " Rewrite. Rewrite the code. It's the Ford Mondeo 93rd. And now even the millennium has long been. Yes and the syntax of the other templates is necessary. Have you not seen CoffeeScript Sass / Less ZenCoding? Rewrite, who they say, otherwise I will not let you fall asleep - just know . " And under this pressure, I could not resist. But still the main priority, it was the speed of the engine - no one needs a beautiful, but with 100 hp car at the start.

Getting down to business: Wood

Since we use our own syntax, we need to convert it into a tree. We have two types of nodes: Tag = {tagName:'someTagName', attr: { key:'value'}, nodes:[] } and Literal = {content:'Some String'} . And since after 1.5 years of using the old template engine, I never remember that I would substitute template data in the name of the tag, or attribute name, for simplicity of the template and analyzer, we make it possible to insert data only into them. Therefore, the nodes will be of the following form: Tag: = {tagName:'name', attr: { key:('value'||function)}, nodes:[] } and Literal: = {content:('Some String'||function)} . Where function is a function that substitutes the template data and it is only for those values ​​that require them. So we planted a tree, so far nothing complicated ( further it will not be more difficult either ).

Analyzer / Parser

Interesting moments:

• we analyze linearly, if possible even jump over the sections, for further “substring”
• minimal use of function calls, no recursion at all
• for analysis, use the object: var T = {index:0 /* currentIndex */, length:template.length, template:template} . When calling additional functions, we pass it (or rather, a link to it is passed). Thus the template string not copied.
• charCodeAt - not much faster than charAt or [], but further robot with number is faster

The very parsing is painfully simple - it is 40 lines. (the parsing of attributes should not be made into a separate function, but the visibility would be lost)

Constructor

Having a tree, it’s not good to build an html string to insert into a document, you need to build a documentFragment right away (although function renderHtml left the function renderHtml too, just in case) . With this we greatly compensate the time spent on parsing.
The process itself is again trivial:

Custom controls

As can be seen from the above code, custom controls appear on the scene. If the constructor encounters a registered tag handler, it will create a handler object, make a shallow copy values ​​of attr and nodes and pass the assembly context to the render function. That is, our control should implement in its prototype the function .render(currentValues, container)

toFunction (templateString)

Actually, this is where the magic happens. True magic is not called, but I would like to. In fact, here we get the parts to insert our data, this

• or keys to the properties of the input data, possible "recursion" #{obj.other.value}
• or access to the transformer function #{fnName:line} . If fnName is an empty line, it is assumed that line is a condition and will be executed by the ValueUtilities.condition(line, values) function ValueUtilities.condition(line, values)

, we process them and we insert into template.

Well, it seems all lit up. In examples it is possible to see more interesting, in the same place implementation date, through controls. See also the sources for the examples page.

---

Examples
Sources

---

offtop:
In the arsenal, there are still a lot of “greats”, for example, IncludeJS - it looks like Require, but with a bunch of “goodies”. If there is interest in such things (these are not release libraries for production), I will also post it on the githab and write an article.

Good luck!