Remember when you first learned jQuery, it was powerful. You could find, add, remove, and animate elements all in one line. It was amazing! So amazing that after some time, you probably forgot how to use JavaScript, and never questioned your new dependency on jQuery.
Some developers believe that jQuery is protecting us from a great demon of browser incompatibility when, in truth, post-IE8, browsers are pretty easy to deal with on their own.
Vanilla JavaScript
After reading the article, Thinking Inside The Box With Vanilla JavaScript by Louis Lazaris, I began to question what am I doing in jQuery that I should be doing in native JavaScript. The article outlines three lesser known JavaScript Methods:
- insertAdjacentHTML()
- getBoundingClientRect()
- The <table> API
The insertAdjacentHTML() method is exactly like using .after() in jQuery, and getBoundingClientRect() can get the exact size and coordinates of a container, equivalent to jQuery .offset(). This shows that even though jQuery puts on a friendly name which can easily be remembered, there are native methods which can be used, reducing the dependence on external resources.
You Might Not Need jQuery is an absolutely incredible resource for providing vanilla JavaScript in place of its equivalent jQuery methods. Not only does it provide some lean utility code, but it also has different variations of methods depending on your lowest supporting version of IE (the lowest being IE8). A good compliment to this resource would be to have the MDN JavaScript Reference by your side.
The use of jQuery is never a bad thing, especially when working on large applications. However, by understanding that the underlying methods used are native JavaScript, this should influence how much of your code is closer to vanilla than jQuery.
Read More
Native JavaScript Equivalents of jQuery Methods: the DOM and Forms
