Digital Marketing & Brand Development Agency  |  Charlotte, NC

6 Reasons Why We Still Use jQuery in 2021

6 Reasons Why We Still Use jQuery in 2021

A-Team By: A-Team

7

minute read time

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. 

“According to Builtwith, of the top 10,000 websites about 88% (or close to 9,000) of them are currently using jQuery as of the beginning of 2019.”

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.

“As browsers mature and continue to increase their collaboration, the Javascript standard is becoming more and more rigid while the differences between the browsers are becoming smaller and smaller.”

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.

Conclusion

Put simply, jQuery just WORKS! So why not use a tool that makes life easier?

When Not to Use jQuery

 

Of course, we should not conclude this post without discussing some shortcomings of jQuery. When creating complicated web components or single page apps, managing all the moving parts via the DOM will start to get cumbersome in jQuery, and will lead to some colossal script files. Many JavaScript frameworks have risen to prominence in the last decade to address this problem, such as React and VueJS. These frameworks update the DOM based on changes in your state/data which mostly negate the need for jQuery’s powerful DOM manipulation.

About Atypic

Atypic is a digital marketing and brand development agency located in Charlotte, NC. For 12+ years Atypic has built a reputation for combining creativity, technology & analytical expertise to connect brands with people.

Let's Be Friends

Insights Right to Your Inbox.

Previous How To Run An Effect... Next All About Content Ma...