PDA

View Full Version : How to explain the concept of "keep it simple" to



gfraser
4 Jan 2007, 12:12 PM
Ok, one of our devs has just created code along these lines to display a contact form:



var buildContactSheet = function (dom, order, contact) {
var table, tbody, tr, td, link;
// Open table
table = document.createElement("table");
tbody = document.createElement("tbody");
// Row :: Main
tr = document.createElement("tr");
td = document.createElement("td");
td.className = "main";
td.appendChild( document.createTextNode( (contact.fullName ? contact.fullName + "\n": "") +
(contact.company && contact.company.name ? contact.company.name + "\n": "") +
(contact.address1 ? contact.address1 + "\n": "") +
(contact.address2 ? contact.address2 + "\n": "") +
(contact.city ? contact.city + "\n": "") +
(contact.state ? contact.state + "\n": "") +
(contact.postalCode ? contact.postalCode + "\n": "") ) );
// TODO: Work out what to do about the country code
tr.appendChild(td);
tbody.appendChild(tr);
// Row :: Links
tr = document.createElement("tr");
td = document.createElement("td");
td.className = "links";
link = document.createElement("span");
link.appendChild( document.createTextNode("edit") );
link.onclick = function () {
// display the dialog box, passing in the order object
};
td.appendChild(link);
tr.appendChild(td);
tbody.appendChild(tr);
// Close table
table.appendChild(tbody);
// Empty out the dom and inject the table
dom.innerHTML = "";
dom.appendChild(table);
}


Personally I would have used something like this:



easyTemplate = new YAHOO.ext.Template(
'<table>'+
'<tbody>'+
'<tr>'+
'<td class="main">{contactDetails}</td>'+
'</tr>'+
'<tr>'+
'<td class="links"><div id="editButton"></div></td>'+
'</tr>'+
'</tbody>'+
'</table>'
);
easyTemplate.compile();

// build up a string containing the contact details
var foo = 'stuff goes in here';

easyTemplate.overwrite(getEl('idOfPlaceWhereYouWantTableToGo').dom,{contactDetails:foo});

new YAHOO.ext.Button('editButton', {text: "Edit",handler: someClickHandler});


The Java dev is absolutely resolute in his opinion that his verbose JS dom manipulation is far easier to understand, I'm absolutely convinced that it's not!

I've ingnored the fact that he's used a table when a couple of <div>'s would have been far better suited, I'm mainly concerned about the bloat/verbosity-ware that's creaping in :s

So, which is best? Which is more maintainable? Which is quicker to develop? I've tried convincing the Java dev that his way is truly pants but he's having none of it and continues to treat JS as if it were some enterprise Java app. I say keep it simple, easy to understand and maintain and things will be better for everyone. How do I get my point across to the Java dev? Help! :D

brian.moeskau
4 Jan 2007, 2:41 PM
Well, while most people here I would guess would agree with the template approach from a stylistic perspective, I also believe that Jack does some stuff inside compile() that would boost performance if you ended up having a lot of DOM inserts. I believe he handles IE and Gecko differently internally for perf reasons (performance should be something a Java dev relates to right?) Also, it seems pretty obvious which approach is more easily maintainable -- not sure why that would even be a point of argument.

gfraser
4 Jan 2007, 3:18 PM
Yes, the yui-ext stuff does have clever stuff to switch between using dom and html depending on browser. IE is real slow (at everything!) when it comes to the dom approach and faster at just parsing the HTML whereas every other browser is faster with the dom approach - the yui-ext stuff deals with that transparently.

The developers' main argument now, having failed to convince me that his code is more maintainable, is that when he creates it all verbosely he already has vars with references to key bits of the document (eg. he has a var to the table cell he wants to write to). My counter argument is that it's so damn easy to use getEl() that his argument just doesn't hold water but he's not having any of it... :(

TommyMaintz
4 Jan 2007, 6:05 PM
what kind of dumbass developer is that?
how can he be the one that gets to decide what code to use if he's not specialised in javascript?
tell him to piss off and just use yui-ext.