Go away HTML, go away

The trend of recent years in web development - frameworks and compilers (collectors, if you want). They are everywhere: in javascript, css, link libraries, etc. Javascript frameworks everywhere use templates to draw everything. But they all have one thing in common - HTML. Cumbersome, curtailed, in places from project to project control + c - control + in ... All this html always lies in pieces, attached with structures of the type script type = "text / template". In general, as if here they have not yet figured out how to deal with it.

At one point, I thought, why not transfer the entire layout to JSON. It is compact, eloquent and very well readable (I mean services a la jsoneditoronline.org). Poryskav finished libraries realized that this layout in json only complicate and no one has done the obvious and simple.

And did - randr . The library is small, it works smartly.

It works like this: you give a certain json to the input of the function of the same name, the output is a ready DOM (or some part of it):
')

var json = { node: 'div', content: 'Hello World' } document.body.appendChild(randr(json)); 

The randr from this json will make a div with the text “Hello World” inside.

You can also pass attributes:

 var json = { node: 'div', defaults: [ { type: 'class', data: 'super-class' }, { type: 'attr', data: 'some attr value' } ], content: 'Hello World' } document.body.appendChild(randr(json)); 

Fine! our div ʻa appeared attributes class and attr. Once I was finom prompted to make "defaults" as an object with properties, so says more compactly. No sooner said than done:

 var json = { node: 'div', defaults: { class: 'super-class', attr: 'some attr value' }, content: 'Hello World' } document.body.appendChild(randr(json)); 

Yes, it has become more compact. Left both ways. But the volume can be reduced in another way. Usually the text (as content) is enclosed in tags "p". That's exactly what we will do, remove the “div” node:

 var json = { defaults: { class: 'super-class', attr: 'some attr value' }, content: 'Hello World' } document.body.appendChild(randr(json)); 

Happened! By default, if there is no “node” and “content” is text - we draw “p”, otherwise there will be a “div”. Yes, you can simply not write these notorious div:

 var json = { defaults: { class: 'super-class', attr: 'some attr value' }, content: { content: { content: '  ' } } } document.body.appendChild(randr(json)); 

I hope it is clear that there will be a paragraph wrapped in 2 div. And yes, the content may be different. For example an array:

 var json = { defaults: { class: 'super-class', attr: 'some attr value' }, content: [ { content: ' 1  ' }, { content: ' 2  ' } ] document.body.appendChild(randr(json)); 

Now it's better, but you can add something else! Attribute inheritance:

 var json = { defaults: { class: 'super-class', attr: 'some attr value' }, implement: true, content: [ { content: ' 1  ' }, { content: ' 2  ' } ] document.body.appendChild(randr(json)); 

It can be seen that the implement: true flag has appeared - it is he who is responsible for passing attributes to child elements. But children are capricious and will not want to accept this inheritance:

 var json = { defaults: { class: 'super-class', attr: 'some attr value' }, implement: true, content: [ { content: ' 1  ', extend: false }, { content: ' 2  ' } ] document.body.appendChild(randr(json)); 

I think this is also clear. Negative extend flag does not allow to inherit attributes.
Attributes are inherited according to the principle of overwriting parent children, except for style classes. They have bonding - “parent-class child-class”.

Why even inherit them over everyone decides for himself. I personally use for helper classes like "float-right, center, background-red". I think you can come up with. But no one forces to use.

There is another thing - creating your own “nodes”. So to say ready-made blocks of cunningly crafted elements or simply repeating blanks:

 var myNodes = { askDelete: function(content){ var container = document.createElement('div'); var bYes = document.createElement('button'); var bNo = document.createElement('button'); bYes.innerHTML = content.yes; bNo.innerHTML = content.no; container.appendChild(bYes); container.appendChild(bNo); return container; } } var json = { defaults: { class: 'super-class', attr: 'some attr value' }, content: [ { content: ' 1  ' }, { node: 'askDelete', content: { yes: ', ', no: ' ' } } ] document.body.appendChild(randr(json, myNodes)); 

In this code, we created our magic node “askDelete” in the “myNodes” object and passed the object as the second parameter to randr. And in json we call this magic node and use the “content” property as parameters. In this way, you can create your own blanks and implement them in a variety of projects.

If you need to get from randr not DOM, but layout as text, just add the third parameter “true” to randr:

 var myNodes = { askDelete: function(content){ var container = document.createElement('div'); var bYes = document.createElement('button'); var bNo = document.createElement('button'); bYes.innerHTML = content.yes; bNo.innerHTML = content.no; container.appendChild(bYes); container.appendChild(bNo); return container; } } var json = { defaults: { class: 'super-class', attr: 'some attr value' }, content: [ { content: ' 1  ' }, { node: 'askDelete', content: { yes: ', ', no: ' ' } } ] document.body.innerHTML = randr(json, myNodes, true); 

That's all. I think such a layout implementation using json will be useful for you. At least takes up less space and can be transferred to Ajax as objects.