Javascript frameworks are really powerful, when you need them

javascript jquery mootools performance programming testing


I've always used some kind of javascript framework when developing frontend stuffs. Mootools, jQuery, extjs and friends. All such frameworks provide a set of useful functionality, but above all in my opinion, they provide what is crucial for a web developer: cross browser compatibility.
The time you'll spend in writing cross browser code, even for a small project, is huge, especially if your software must support IE<9, and especially at the beginning, since you need to learn all browser inconsistencies.

But sometimes your script doesn't need to be cross browser, or its implementation includes functionality which do not suffer browser compatibility issues. In such case even if we are accostumed with the framework syntax, and we have it loaded in the page, can be better to use vanilla js to complete some tasks.

And the (main) reason is one: performance.

An example

Let's consider one common operation, for example we need to change the src attribute of an image inside a div#meow. We could use the mootools or jQuery selectors functions to retrieve the image element and change its src attribute, or we could use vanilla js. This is a case which shouldn't suffer of browser inconsistencies.

Who uses to use a framework, probably will use its selectors functions to achieve such result. But is this really a good choice?
In my opinion it isn't. Or better, it is not a good choice if all we need to do is to change the src attribute of the image.

Let's consider mootools; the point here is: why should we instantiate a mootools Element object if we really need only to change the src attribute?
The mootools selector returns a mootools Element object which is supplied of all the Element methods that the library provides. This is good if we have to work a lot with it, if we have to attach events for example (events represents one of the cross browser issues), but all this methods are useless if we only really need to change the src attribute, got it?

I've written one simple test in codepen.io, which I include here. Depending on your browser you may see different numbers, but the result sholud be clear.

See the Pen selector performance comparison, vanilla VS mootools by abidibo (@abidibo) on CodePen.


If your js code doesn't need to be cross browser, or if you are developing some functionality which don't suffer of cross browser inconsistencies, ..., actually if you don't need all the enhancements that the library provides, go vanilla js.

Subscribe to abidibo.net!

If you want to stay up to date with new contents published on this blog, then just enter your email address, and you will receive blog updates! You can set you preferences and decide to receive emails only when articles are posted regarding a precise topic.

I promise, you'll never receive spam or advertising of any kind from this subscription, just content updates.

Subscribe to this blog

Comments are welcome!

blog comments powered by Disqus

Your Smartwatch Loves Tasker!

Your Smartwatch Loves Tasker!

Now available for purchase!