decl.js

What the?

decl.js allows you to create a user interface based on the description of the elements, their behaviors and relations as json.

Project on github Read docs

Specifications

download decl.js 3.4 kB (3.366 bytes)

download decl.min.js 1.2 kB (1.198 bytes)

Minified + gzipped size: 569 bytes

FREE TO ANY KIND OF USE

No external dependencies, so you don't need to connect jQuery or any other library to make decl.js work!

Why?

Main question was - "How to minimize the code for creating contrallbale rich user interface?"

Of course, I could use innerHTML, but this approach does not allow full control to create an element.

Also i could use document.createElement/Fragment API, but it's too dreary, long and error-prone, because i would have to take into account the nesting of elements and other nuances.

That's why I wrote a function that builds dom-elements for signatures described in the form of non-standard notation json, later this function was allocated in a separate project and extended with additional features.

Quick decl.js example

How to use:

1. Connect decl.js to your page:

                
<script type="text/javascript" src="PATH_TO_DECL/decl.js"></script>
                
            

2. Create structure of dynamic elements:

                
var ui = {
    "tag" : "div",
    "identifier" : "grid",
    "attributes" : {
        "class" : "container"
    },
    "childrens" : [
        {
            "tag" : "div",
            "childrens" : [
                {
                    "tag" : "input",
                    "options" : {
                        "type" : "text",
                    },
                    "events" : {
                        "keyup" : function(target, getter, e) {
                            getter.get("_p").innerHTML = "Your name : " + target.value;
                        }
                    },
                    "value" : "test"
                },
                {
                    "tag" : "p",
                    "identifier" : "_p",
                    "text" : "Your name : "
                }
            ]
        }
    ]
};
                
            

3. Compile it!

                
window.onload = function() {
    var decl = new Decl();
    document.getElementById('app-container').appendChild(decl.render(ui));
}
                
            

4. PROFIT!

ikenfin