Question

Maybe someone more familiar with the topic can help me to simplify or write the question correctly. We are looking for metrics on JQuery or even other JS Frameworks in comparison with the use of straight javascript. I don’t beleive in the lines of code metric, never have, but I cannot think on anything else to measure it.

Function Points (jquery) = Jquery-LOC
Function Points (JS) = JS-LOC

Answer 1

To attach a click handler using standard javascript, you might try something like this:

var myelement = document.getElementById("clickme");
function myClickHandler (evt) {
  var evt = evt || event; // ie uses a global instead of
                          // passing an object as a param
  (evt.target || evt.srcElement).style.width="110px";

}
if (myelement.addEventListener) {
   myelement.addEventListener("click", myClickHandler, false);
} else if(myelement.attachEvent) {
   myelement.attachEvent("onclick", myClickHandler);
} else if(typeof myelement.onclick === "function") {
    (function () {
      var oldfunc = myelement.onclick; 
      myelement.onclick = function (evt) {
          var evt = evt || event;
          oldfunc(evt);
          myClickHandler(evt);
      }
    })()
} else {
   myelement.onclick = myClickHandler;
}

or try to do something similar using jquery

jQuery("#clickme").click(function(evt){ jQuery(evt.target).css("width",110); });

You could argue that the first example code is a stupid thing to write every time you want to assign a click handler. Why not refactor that out into its own standard function, and reuse that? then you have a central function you can debug without having to rewrite every single instance once you’ve found something wrong.

This would be a very good argument, and that’s exactly the point of a library like jquery. You save time by not writing this verbose boilerplate that’s absolutely necessary if you want your code to work cross browser. You save time by not having to debug it. You save time by- if you do have to debug it, you just have to patch one function in jquery and file a bug report for the next version. If there’s something wrong with the event binding code, then it’s just one guy that has to change one bit of code, rather than thousands of people that need to change millions of bits of code. And when someone points out that you should test addEventListener first, the point becomes moot, because jQuery already does the established “correct” thing. And if it doesn’t, it will in the next version.

jQuery won’t help you on the really difficult domain specific problems, but for grinding through every day dom manipulations, it’s better to use a library function than trying to wing it “close to the metal”. There’s too many cross browser splinters sticking out, and too many dumb verbose dom APIS, and it’s too stupid to solve problems that have already been solved, over and over again.

You need SOME kind of library (not necessarily jquery) just to stay sane.

Now how much time and effort do you save, exactly? Who knows? it’s immeasurable. How many times do you have to bind an event handler? How many times do you have to do any of the other things that jQuery provides in a simple function? One is strongly dependent on the other.

If you ever find a way to measure programmer productivity, do let us know, though. I think we’d all be very interested. In any case, we know from these objective facts, and our own personal subjective experiences that it’s probably quite a substantial amount of time.