i remember switching from ERb to Markaby, and the readability/flexibility improvement of generating HTML from ruby, verses the PHP style mishmash of logic and content with mode-change chars littered everywhere. it was so good, that i was content with it for like 6 months. but then things happened.

first, to reformat content means needless roundtrips to the server just to get HTML - latency and pointless load on the server, Ruby isn't exactly fast and complex generation does take a noticeable amount of time, even on a 2ghz AMD64 with only one user.

secondly theres a divergence that one has to continually keep track of - if you change the HTML code server-side, you have to update your JQuery selectors to match; or worse, if you decide to maintain both client and serverside HTML generation, keep the two structures identical. plus you have to think about (including make up unique non-conflicting) selectors in the first place, and then accept the slight performance hit of JQuery finding them, the bugs that can arise when using recursively nested elements with the same selectors, etc.

to solve all these problems at once, ive come up with a variation on markaby-in-JS as originally discussed here

dom = function() {
    var ret = [], a = arguments, i, at, fn, j, e;
    a = a[0].constructor == Array ? a[0] : a;
    for(i=0; i<a.length; i++) {
        if(a[i+1] && a[i+1].constructor == Object) { // item is element if attributes follow
            e = document.createElement(a[i]);j=$(e); // create node
            at=a[++i];fn=at.fn; at.fn=null;          // find functions
            j.attr(at);                              // apply attributes
            if (fn) fn.call(j);                      // apply functions
            if(a[i+1] && a[i+1].constructor == Array) j.append(dom(a[++i])); // children
            ret.push(e);                             // add the node
        } else {                                     // or text node
            ret.push(document.createTextNode(a[i]));
        }
    }
    return ret;
};

as an example of it in use, heres code that 1) translates a JSON object into HTML, 2) wraps it with a rounded box with a titlebar 3) which when moused over presents a menu of view formats and 4) updates the view if a selection is made, otherwise 5) hiding the menu. quite a bit of behavior for this small snippet of code - via closure we've eliminated the need for both selectors and fragile traversal like .parent().parent().firstChild() to find nodes, and we're automagically generating the menu of view formats so it gets populated as I add them

vr.png

did i mention i uninstalled MMM-mode from emacs?..some may like template languages like XSLT/MJT/E4X that embed procedural code via custom elements/attributes, or the mashup of html, javascript, and serverside programming language in a single file like ERB/PHP/PSP.. i'm sticking with this unless something even better comes along for my needs..about the only thing i can think of that would do that would be a syntactic sugar char for function(){} in ECMAscript, but i like to keep my mind open..