jQuery vs Vanilla JavaScript - Deciding on What to Use

Disclaimer

This article is not about why you shouldn't use jQuery. Rather, it shows you why you should not always see jQuery as the solution to your problems. It gives you alternative ways of doing jQuery stuff without having to use the library.

jQuery? What Is That Thing?

jQuery is a JavaScript library invented by John Resig, which is now maintained by a team of developers at the jQuery Foundation.

The jQuery library makes front-end development easier by simplifing things such as Animations, AJAX Operations, DOM Manipulation, Event Handling, and lot more. As a result, you can write fewer lines of code and accomplish more in a short amount of time.

Why Should I Use jQuery?

A lot of front-end developers (except for the haters) would no doubt agree that jQuery is one of the best things that has happened to front-end development. Those who do not share this view would at least agree that jQuery makes life easier (hater nods) and speeds up the development time.

For example, here is how you can add fade in animation effect to an element in vanilla JS and jQuery.

FadeIn animation - Plain Javascript

function fadeIn(el) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

fadeIn(el);

FadeIn animation - The jQuery Way

$(el).fadeIn();

You can find out more on the jQuery website.

Why Should I NOT Use jQuery?

There really is no reason why you should not use jQuery. The right question to ask is WHEN should I not use jQuery?

When Should I NOT Use jQuery?

I see a lot of people jumping into jQuery the moment they try to solve a problem without thinking twice. Here are some things you may want to think about before deciding on what to use.

If your boss hates jQuery, I am sorry, but keeping your job is very important so you should probably write Vanilla JavaScript instead.

For those who are new to JavaScript, you may want to avoid jQuery because its functionalities are heavily abstracted, which makes it easy to use. Why is that bad? Because it could deprive you of your learning opportunities. You should invest in understanding the basics of JavaScript before moving on to jQuery or any other library.

Another scenario you'd want to carefully consider before your choose jQuery is whether you want to use the library to solve just one simple problem of DOM manipulation or event listening.
Do you really want to load an extra 85kb script into your page just because you want to solve one or two simple problems?

In summary, you should only use jQuery if you are doing something extremely complicated. You should consider the types of problem you are trying to solve as well as how frequent you might use the library in your app to be sure making your page load 85kb slower is worth it.

I would like to write in plain JavaScript but I don't k...

Me either. I do not know how to do a lot of things in Vanilla JavaScript, but here are some code snippets below that shows you how to do jQuery stuff in plain JavaScript.

jQuery: Add Class

$(el).addClass(className);

Vanilla: Add Class

if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;

jQuery: Set Element Attribute

$(el).attr('tabindex', 3);

Vanilla: Set Element Attribute

el.setAttribute('tabindex', 3);

jQuery: Set Style

$(el).css('border-width', '20px');

Vanilla: Set Style

el.style.borderWidth = '20px';

You can view the full list on You Might Not Need jQuery and use the alternative Vanilla code instead of jQuery when you can.

If you are looking to learn jQuery, you can start with these jQuery Tutorial.

If you enjoy this article, don't forget to share it with others and follow me on Twitter to be notified of my new posts.