📜 ⬆️ ⬇️

And javascript template engine

Nowadays there are already a considerable number of those, is not it? They even do a good job with their work, if it is necessary, for example, to generate HTML in hundredths of a second - this is quite fast, and the user does not feel this delay. And why are we all not rushing to use templating on the client side? Well, for example, a few points:
- generate the page (most of it) is already expensive;
- if you use mixed templating (templates in both javascript and your favorite scripting language), then a situation will arise when they are duplicated;

I would like to talk about the second point, its solution will directly affect the solution of the first problem - performance.

About the fact that duplication of templates is bad, no need to explain? The idea itself is not new, but due to the non-trivial implementation, it is not popular (at least, they don’t trumpet this way as much as template engines in server languages).
So, we write a template that can pick up both javascript and our favorite perl / php / python /, etc. Everything is logical, we all understand it, we want to, but the finished options are not a dime a dozen, we will probably have to write it ourselves, but right now there is just enough time, and then it is somehow forgotten.

The work of a programmer is 90% of the time to design, conduct test tests, and 10% of the time - writing code until no one sees us, and does not interfere with us. Let's talk about what we need from the template engine, and then write it ourselves.
On a simple example, look at the scheme as a whole.

< ul >
< li class ="{?#id == 1}first{|}other{/?}" > {#title} </ li >
</ ul >

* This source code was highlighted with Source Code Highlighter .

Data in the form of JSON:
[{title: '' ,id: 1},{title: '' ,id: 2},{title: '' ,id: 3},{title: '' ,id: 4},{title: '' ,id: 5}]

* This source code was highlighted with Source Code Highlighter .

Result html
< ul >
< li class ="first" > </ li >
< li class ="other" > </ li >
< li class ="other" > </ li >
< li class ="other" > </ li >
< li class ="other" > </ li >
</ ul >

* This source code was highlighted with Source Code Highlighter .

As a result of the processing of our template by the template parser, the output should be the js library and a module to our script language.
I will omit the part about the form in which the code should be for our favorite scripting language, we only note that if we feed it to our array of hashes, it should promptly produce html.

And now about the javascript library. If we received something similar to this (I remind you, this is the resultant code of the template engine, and, in principle, its readability for us was what we were driving):
( function (){

zTpl = function (options) {
this .init(options);
return this ;

zTpl.prototype = {
init: function (options) {
this .opt = options
topics: function (data) {
var out = '<ul>' ;
for ( var i=0; i< data.length; i++) {
out += '<li class="' ;
if (data[i].id == 1) {
out += 'first' ;
} else {
out += 'other' ;
out += '">' +data[i].title+ '</li>' ;
out += '</ul>' ;
return out ;


* This source code was highlighted with Source Code Highlighter .

That already on the client side, we would do this:
var d = [{title: '' ,id: 1},{title: '' ,id: 2},{title: '' ,id: 3},{title: '' ,id: 4},{title: '' ,id: 5}];
var tpl = new zTpl();
var html = tpl.topics(d);

* This source code was highlighted with Source Code Highlighter .

And so, we got what we wanted:
- html generation by template and input JSON;
- we use templates both in the scripting language and javascript, from which there is no duplication of them;
- due to the fact that our templates turn into native code (scripting language and javascript), we get the maximum possible generation rate;

- Generation occurs due to the concatenation of alternating variables and static data (strings in fact) of the template.
- The template and code given are the tip of the iceberg of the capabilities of our future templating engine. There will be all the buns and translations of our server template engine, as far as possible, such as multi-level nesting of variables, recursion, and even some kind of caching.

What do gentlemen think about this development of events? The expediency of this action?

Source: https://habr.com/ru/post/104643/

All Articles