6 Reasons Why We Still Use jQuery in 2021

jQuery has been around for over 10 years, which is a long time for a code library. It’s still one of the most popular JavaScript libraries in web development. We love jQuery here at Atypic and still utilize it in our projects.

What is jQuery Used For?

jQuery is an independent JavaScript library which brings along added functions and additional functionality to the standard built-in objects to what JavaScript natively provides.

Essentially, jQuery is JavaScript. It does not add anything to the JavaScript language itself, though it helps manipulate the DOM in a very easy and convenient way for developers.
 
The jQuery API and ecosystem simply help us accomplish more, while using less hand rolled code. This increases developer productivity and results in more stable and tested code. We’re not alone in choosing to use jQuery. 

jQuery is a well-tested library with a large community of developers who continue to contribute time and effort to modernize and improve the library. The jQuery of 2020 is much different than the jQuery you may remember back in the early 2010’s. And it's a free and open-source software!

Here are 6 reasons why we still use jQuery at Atypic:

An extended CSS Selector syntax for selecting DOM elements. 

jQuery provides a familiar syntax for selecting DOM elements on the page. Instead of creating its own rules for selections it uses ones that developers are already familiar with - “Css Selectors.” CSS Selectors are more powerful than the syntax provided by the native JavaScript DOM selection methods. For example:

$('a[href^="http://"]:visible')

In this, we are selecting all visible links on a page which start with “http” (maybe we can use this selector to notify the user if there are insecure links on the page). Vanilla JavaScript also provides DOM selection APIs which utilize CSS Selectors, but they have a smaller subset of selectors available. The above code snippet uses the `:visible` selector which is not in the CSS3 Selectors specification. In order to use this in plain javascript, we would have to implement our own. Using CSS style syntax is very intuitive and familiar for developers and simultaneously, we can access different DOM tree elements in a quick way.

Writing multiple tasks in one line.

jQuery has a feature where all of its DOM manipulation functions return the mutated element. This allows us to chain selectors and methods together in a simple to understand way. For example:

$('a[href^="http://"]').addClass(‘insecure').attr('target', '_blank');

In this block of code we are selecting all links which start with “http://“ (using the same selector we described above), adding the class “insecure” and finally adding an attribute telling the browser we want the link opened in a new window. All of this is without defining a single variable. This is a great feature of jQuery since it results in clean code that is more concise and easier to read than plain JavaScript which would require us to write:

 const insecure_links = document.querySelector(‘a[href^=“http://“]’); 

  insecure_links.classList.add(‘insecure’);

  insecure_links.addAttribute(’target’, ‘_blank’);

As we can see the jQuery version is much nicer. This is a good example for our next point. If we found more than one link on our page that used HTTP we would quickly realize that the vanilla Javascript version is severely lacking in one area.

 
Handling multiple DOM elements.

In jQuery, the DOM manipulations functions are written to handle multiple DOM elements. If the above example had 5 insecure HTTP links on the page, the jQuery example would apply to every instance. It would be the same code no matter if there was 1 element on the page or 100 elements. This is not the case with vanilla JavaScript. The above example would need to be re-written to loop over each link: 

  const insecure_links = document.querySelectorAll(‘a[href^=http://“]’);

  for (let i = 0; i < insecure_links.length; i++) {

      insecure_links[i].classList.add(‘insecure’);

      insecure_links[i].addAttribute(’target’, ‘_blank’);

  }

Compare this with the unchanged jQuery version and we can see the difference in not just readability but also developer productivity, since the 5 lines of code have been reduced to a single easy to understand line:

$('a[href^=http://“]’).addClass(‘insecure’).attr(’target’, ‘_blank’);

Cross-Browser support.

While a large portion of users have moved to modern browsers, it would be foolish to believe that everyone is currently running the most modern and up-to-date software. Due to this, we need to make sure our scripts are compatible with a wide range of browser versions. jQuery allows for a more streamlined approach since we don’t have to write the fall back code ourselves, the jQuery library accounts for that for us.

Two areas where jQuery is more efficient are: handling AJAX requests and event detection. Different browsers handle these in different ways and if developers aren’t familiar with all the different intricacies, they might miss something and be left with a broken product for a client.

But that doesn’t change the fact that pre-existing browsers (which we need to support) have these quirks and why we spend time making sure our projects are appropriately supported across several browsers.

Developer productivity.

As we have seen multiple times above, jQuery really cuts down on the amount of code written by developers. When we get rid of the boilerplate, we are left only working on the project specific logic. This increases 

uninterrupted development time and allows us to complete tasks more efficiently while maintaining clean code. As the saying goes, time is money and this approach cuts costs for our customers.

 
Wide variety of useful Plugins.

If you ask anyone what their favorite thing about jQuery is, the answer you’ll mostly like receive is the number of useful plugins that jQuery offers. It is impossible to count all the useful plugins in the jQuery ecosystem. Since jQuery has been around for so many years, developers have had time to build and maintain it for so long.

One example that really shows the value in having these plugins is when a design requires a carousel. If we had to write our own carousel slider, it could potentially be 8-16 hours of work. Even if we had a JavaScript library that gave us the functionality required to deal with animations, carousel logic is complex.

With jQuery, there is a variety of different carousels to choose from, including the actively maintained and fully tested Slick carousel which provides us endless possibilities to customize the slider to meet the needs of almost any design.