I got into working on a half a decade old web application and recently we started revamping our codebase to improve the performance of our App. We were trying out a few things to make things simple and removing jQuery as a dependency was one of that.
There are a ton of articles out there to help you choose if you should use jquery or not so I’m not going to talk about that(attached a few articles at the end of this article). I will instead mention the reason why we personally decided to move away from jQuery and how we updated a few of the jQuery snippets to Vanilla JS snippets in our codebase.
- We don’t have to load a ~87kb file/code anymore in our project
- Basic statements like selectors, event handlers, setters/getters can be written with vanilla JS. So instead of my library internally calling these basic methods, I can call them myself.
- There is less scope to run into cross-browser compatability issues now, which was another main reason to use jQuery in the first place for many developers. So this benefit doesn’t apply anymore.
These reasons have strongly convinced us that we could unplug jQuery from our codebase and so we did it.
Note: These code-snippets are specific to our page design and code structure. They might differ depending on your codebase.
We were extensively using class and id selectors to get DOM element references.
The .on we were using to attach events to any DOM Element is moved instead to .addEventListener. The code example in the above section is How we did it.
The .hide and .show methods we used to render after asynchronously getting data are with
display: none and
display: block. Well, there is a tradeoff that was acceptable to us, that is animation. we could use CSS animation for that but initially, we decided to hide/show using display style property as we could live without animation for now. Our default display property was
block for the container so this worked perfectly for us.
.ready function is adding handler DOMContentLoaded to the DOM element. There is an in-depth answer on StackOverflow but this is our initial workaround.
Few articles you could read if you want to decide between To use or not to use jQuery
Hope this was helpful. Thank you for reading!