"js2" coding style for html output - Wikitech-l

28 Sep 2009

My attachment did not make it into the JS2 design thread... and that 
thread is in summary mode so here is a new post around the html output 
question. Which of the following constructions are easier to read and 
understand. Is there some tab delimitation format we should use to make 
the jquery builder format easier? Are performance considerations 
relevant?  (email is probably a bad context for comparison since tabs 
will get messy and there is no syntax highlighting)

Tim suggested that in security review context "dojBuild" type html 
output is more strait forward to review.

I think both are useful and I like jquery style building of html since 
it gives you direct syntax errors rather than html parse errors which 
are not as predictable across browsers. But sometimes performance wise 
or from a quick "get it working" perspective its easier to write out an 
html string. Also I think tabbed html is a bit easier on the eyes for 
someone that has dealt a lot with html.

Something thats not fun about jquery style is there are many ways to 
build that same html string using .wrap or any of other dozen jquery 
html manipulation functions ... so the same html could be structured 
very differently in the code. Furthermore jquery chain can get pretty 
long or be made up of lots of other vars, potentially making it tricky 
to rearrange things or identify what html is coming from where.

But perhaps that could be addressed by having jquery html construction 
conventions (or a wrapper that mirrored our php side html construction 
conventions? )

In general I have used the html output style but did not really think 
about it a-priori and I am open to transitioning to more jquery style 
output.

here is the html: you can copy and paste this in... on my system Firefox 
nightly str builder hovers around 20ms while jquery builder hovers 
around 150ms (hard to say what would be a good target number of dom 
actions or what is a fair test...) ...jquery could for example output to 
a variable instead of direct to dom output shaving 10ms or so and many 
other tweaks are possible.

<html>
<head>
<title>Jquery vs str buider</title>
<script type="text/javascript" 
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js">…
<script type="text/javascript">
var repetCount = 200;
function runTest( mode ){
    $('#cat').html('');
    var t0 = new Date().getTime();
    if( mode =='str'){
        doStrBuild();
    }else{
        dojBuild();
    }
    $('#rtime').html( (new Date().getTime() - t0)  + 'ms');
}

function doStrBuild(){
    var o = '';
    for(var i =0 ;i < repetCount;i++){
        o+=''+
        '<span id="' + escape(i) + '"
class="fish">' +
            '<p class="dog" rel="foo" >' +
                escape(i) +
            '</p>' +
        '</span>';
    }
    $('#cat').append(o);
}
function dojBuild(){
    for(var i =0 ;i < repetCount;i++){
        $('<span/>')
            .attr({
                'id'    : i,
                'class'    :'fish'
            })                       
        .append( $('<p/>')
                .attr({
                    'class'    :'dog',
                    'rel'     : 'foo'
                })
            .text( i )
        ).appendTo('#cat');
    }
}
</script>
</head>
<body>
<h3>Jquery vs dom insert</h3>
Run Time:<span id="rtime"></span></div><br>
<a onClick="javascript:runTest('str');" href="#">Run
Str</a><br>
<a onClick="javascript:runTest('dom');" href="#">Run
Jquery</a><br>
<br>
<div id="cat"></div>

</body>
</html>

--michael