Recently, I was reading “Reductionism in Web Design“, which was generally a good “less is more” article that touched on reducing content, code and design down to their minimums without sacrificing quality.
However, there was one guideline in the article about code reduction that made me think twice:
Try to write code natively before using an abstracted layer (like MooTools or jQuery)
This really depends upon what it is you’re trying to reduce: the total size of the application code, or the size of YOUR code? The whole point of code frameworks is to allow you to do more while writing less code. Since you spend less time reinventing the wheel, you can complete coding quicker, and with higher quality (since you’re using somebody else’s tested code).
This is particularly true with jQuery, especially when you apply multiple functions on a set of elements. Since jQuery functions return a jQuery object, you can “chain” multiple function calls, which looks something like this:
$(".classname").function1().function2().function3();
In order to do this without jQuery, you’d need to iterate through each element with the class ‘classname’, then iteratively call each function. If you used jQuery to do this, you would only need to write one line of code, but you’re total application size would increase by including the fully cross-browser tested jQuery library (a whopping 24 kilobytes). If you did this by hand, it would be many more lines of code, the application size would be smaller, and the entire iterative process for calling the multiple functions would require you to expend addition effort testing across multiple browsers.
This may be an application of the penny-wise, pound-foolish pattern: writing code natively may make your total application size smaller, but at the cost of maintainability and testing.
Tags: javascript, jquery