NAWF

Not A Web Framework: the minimalist's DOM abstraction.

What is this?

NAWF lets you generate DOM nodes or HTML text from a JSON-like structure. This enables extremely lightweight pure-javascript abstraction of rendering code.

Obviously, generation of DOM nodes is only supported in the browser, but NAWF can generate HTML text in a Node.js environment, too!

Install

npm install nawf

Usage

var nawf = require("nawf");
 
var doc = [
    "div",
    {
        style: {backgroundColor: "red"}
    },
    [
        "Hello,", "World!", 
        [
            "button",
            {
                onclick: function() {console.log("Clicked!");}
            },
            "Testing"
        ]
    ]
];
 
// convert to text
nawf.text(doc);
 
// convert to DOM node
nawf.dom(doc);

Abstraction

An element name is a string, or a function that produces an element name.

An attribute is a key-value pair, or a list of attributes, of a function that returns an attribute.

A node is a string, or a list in the form [<element name>, <attribute>, <node>], or a list of nodes, or nothing.

It's very important to note that these definitions are recursive. This makes the following equivalent:

var simple = [
    "div",
    [],
    [
        "input",
        {type: "text", placeholder: "Type here"}
    ]
];
 
// is the same as...
 
var complex = [
    function() {return "div";},
    [],
    [
        [ "input",
            [[function() {return [{type: "text"}];}],
                function() {return {placeholder: "Type here"};}
            ]
        ]
    ]
];

Obviously, this is contrived, and awful. The second example is useless. Here are some genuine reasons you may want functions or lists in odd places...

• Changing attributes, element types, or children based on the context of a closure
• Mapping over data, to produce a view