2. Compatibility – who of us hasn’t lost hours of frustrating, yelling at the console trying to figure out why a certain ES function stopped working only to realise we had the wrong jQuery version installed? as jQuery has been around a long time, and has many versions, one is always limited by the least advanced version of jQuery already present in his project. This often leads to complications in interacting with new plug-ins or reacting to ever changing code syntax and rules. Naturally this problem is not unique to jQuery, and may also apply to native ES but to a much much lesser degree.
3. Speed – this I must admit took me by surprise, not that nearly every function used by jQuery is slower than it ES 5.1 equivalent but how much slower! I will here only mention a one example relating to DOM manipulation (as these are of most importance to us at the POC team) -
Tested on Chrome on Mac OS X -
|GetElementById||var $el = document.getElementById(‘hello’)|| 23,586,232 ops/sec ±0.41%
|JScript ID Selector||document.querySelector(‘#hello’)||8,540,421 ops/sec ±0.53%
|jQuery ID Selector||var $el = $(‘#hello’)||1,522,304 ops/sec ±0.43%
|Query Class Selector||var $el = $(‘.bye’)||683,694 ops/sec ±0.87%
So basically native ES is much much quicker than any jQuery even in the most basic of functions, i.e. selecting DOM elements.
4. Plug-Ins – the presence of jQuery tends to encourage the use of jQuery plug-ins for nearly all DOM manipulation tasks as well as other tasks (tool-tips, rating, animation….), each plug-in suffering to some extant from the same problems mentioned above concerning jQuery itself.
I hope I convinced you so far that there are problems with jQuery, but how can one manage without it?
Surprisingly in ES 5.1 there are extremely similar functions. Thus switching to Native ES can be done almost seamlessly. Here are two simple examples:
Selectors – a common argument in favour of jQuery is its ability to easily select DOM elements. However ES is just as powerful and much much quicker in this aspect. Obviously it still has its classic selectors, ByID, ByTagName, ByClassName, ByName and so on, but it also has querySelector and querySelectorAll that allow selection of elements within elements, of Id inside Class and so on – just like jQuery. For example $(‘#example .test li #cool’) = document.querySelector(‘#example .test li #cool’).
Bindings – again Js Native using addEventListener can duplicate the on() of jQuery with no effort and with better performance.
The list can go on and on .forEach instead of .each, element.classList.add() instead of $(element).addClass() etc…
There are many sites that list very clearly Native ES equivalents of jQuery (http://youmightnotneedjquery.com/).
In some cases indeed there seem to be missing functions which need to be added manually in order to achieve the same effect as an inbuilt jQuery function. This however can be seen rather as an opportunity than as a disadvantage. It allows for the construction of custom functions especially suited for a specific task at hand rather than using generic functions containing various unnecessary elements and adding unnecessary overhead. Such functions can be easily created or found on the internet.
So in short, now that ES6 is already upon us (using babel but soon native as well) it is really about time we go native and take full advantage of ES5.