Words of notice: This is a slightly edited repost from an article I published on my previous blog.
The official jQuery Logo
It’s not you, it’s me.
A bit of history
When I was a student in Computer Science, one of my teachers told the class that achieving something as complete and optimized as the STL for C++ would take an entire career of engineering efforts and that we should not even get started. I chose to keep in mind that these works are never the result of the passion of a single person but rather a global move in the community that fostered the best practices around the scope of that said piece of software.
From then on, jQuery helped creating experiences that were increasingly complex, thanks to the abstraction layer it added to the DOM manipulation, event management and AJAX requests. We even started to see jQuery based libraries appear everywhere. Then people gathered their ideas in the same place, the jQuery Plugin Registry or NPM, which led the following web revolution that we will keep for another article.
Why would I drop jQuery?
At one point, in 2014, I had an epiphany: I was forcing users to spend their data allowance for assets they never needed in the first place! This was the first step of my journey through web performance. I started learning how to optimize my assets and serve them at the right time, the right way. This notably induces critical thinking about the dependencies I use in my projects.
Apart from that, most of the developers around me come up with the same reason as to why they are attached to this technology: the selectors. Not the browser support, the added benefit of a layer on top of the DOM, event handling, animation and plugins. I personally defend jQuery when its inclusion is highly beneficial in terms of productivity and usefulness in a project. Plus, the Slim version is a very welcome idea. Still, if you only need jQuery for the selectors, the same team did a pretty good job with Sizzle.
You can also turn to Vanilla for your selectors: document.querySelectorAll() for the most complex and the famous document.getElementsByTagName(), document.getElementsByClassName() and document.getElementById() for the 80+% remaining cases. Also: you can chain them in very specific circumstances1.
These samples have run on jsPerf on the HTML of my website. jQuery v1.11.1 is used as the reference
Even though they don’t have the exact same behavior, the alternatives ask for less network and system resources. Also note that you can polyfill for the left out browsers like Internet Explorer, which happens to have lost 12% of its market share between the end of 2016 and the end of 2017 according to NetMarketShare. Perhaps in a few years, you won’t need to polyfill anymore and you will be able to use the latest vanilla enhancements, meaning your code will be shorter and finally consistent!
What do I do if my application has a strong dependency?
The major part of the Alexa top websites have jQuery (Source). Some even use an old version that cannot be easily upgraded! It is not a shame to have a website that runs thanks to this framework; that proves it can handle production environments. If you frantically refactor your logic and keep it clean, you don’t have to worry about your legacy that much! You can still replace the last few $ by their vanilla counterparts later if you want to. You Might Not Need jQuery is a neat website that could very well teach you a few tricks for that matter.
Finally, please upgrade your jQuery version and keep it up to date. The jQuery team has you covered with their Migrate plugin. There are obvious benefits in upgrading your version. First, you will have better performance for a slimmer download size! Secondly, you will be able to eliminate dead and hazardous code and increase your product quality and efficiency. Finally, if you use events, check their behavior to prevent them for firing more than necessary.
The document.getElement_s functions return HTMLCollections. You have to iterate over the collection to call the next document.getElement function. Nevertheless, you can chain any document.getElement function after document.getElement, unless… one of them returns null and breaks everything. ↩