Things have changed with recent updates to vanilla JS and the emergence of alternatives such as React. But many people (both hobbyists and professionals) still use jQuery, simply because it’s so ubiquitous. So let’s take a look at the top 15 jQuery advantages and disadvantages you should know.
10 Advantages Of jQuery
Easy For Beginners
Once you get a hang of jQuery, you’ll find several widgets and plugins for it. These help you add functionality to your web page without even trying (but they also make debugging a lot harder). The best way to get started with jQuery is to build your own web app, widget, etc. (even something simple like a calculator).
Keeps Your Code Concise And Reusable
When jQuery started becoming popular around 2009, one of its main attractions was the fact that you could reduce code while maintaining cross-browser compatibility. With vanilla JS, you’d have to write different versions of the same code for Firefox, IE, Opera, etc. That’s because browsers back then featured extremely variable rates of compatibility with the ECMAScript standard.
Some browsers would be 50% compatible with ECMAScript, while others would be 80% compatible. Every browser has its own JS compiler/ rendering engine and the same piece of vanilla JS code might return different results depending on which browser you use. This problem is much less prevalent in modern times, but back then jQuery was an easy way to get reusable code that was also cross-browser compatible.
jQuery isn’t just a tool for HTML DOM manipulation, it can actually do a lot more. Like handling AJAX requests, animation, dynamic events based on user input, etc. jQuery has a predefined method for just about every common web development task you can think of, and there are plugins that further extend its capability.
The shorthand function names and chainable functions mean that you can use 1 line of jQuery code for what would normally take 2 or 3 lines of vanilla JS code. jQuery also has a feature called implicit iteration that makes it so you don’t have to loop through each individual element. This means you can work on a set of objects rather than individual ones.
On top of all that, common tasks like sorting and filtering arrays are also very easy to accomplish with jQuery. Depending on your needs, jQuery can be customized so you retain the necessary functions while also reducing the library size. Zepto and Cash are two such examples of minimized libraries that use jQuery syntax with a significantly reduced file size (making them better for mobile devices).
Open Source With Excellent Documentation
Considering the sheer volume of tutorials and documentation available from both official and 3rd party sources, it’s easy to see why jQuery is so popular. It has been around since 2006, and a lot of development has been done since then. You’ll find tons of variations that extend or reduce the default jQuery library functionality.
The open-source nature means that this library is easy to download and modify. Granted, that also results in more security challenges but it is a risk many are willing to take for the sake of convenience. Since it’s open-source, anyone can use this library for their personal projects without worrying about licensing trouble from some big corporation.
If you ever run into issues with jQuery, you’ll find no shortage of community-developed solutions and advice. Skilled developers can even tune jQuery to fit the needs of their website.
You Can Write Multiple Tasks In One Line
The ability to chain functions in jQuery lets you execute multiple actions on an element (or set of elements) with just a single line of code. For instance, take this snippet of code from atypicraft. In just one line, we’re doing three different things.
First, we are selecting a DOM element (in this case, all HTTP links). Then, we’re adding them to the “insecure” class. Finally, we’re making it so every time someone clicks on one of these, they will open a new window.
Using vanilla JS, you’d need to execute different steps for each task resulting in more lines of code. And as I mentioned earlier, jQuery lets you operate with sets of elements rather than looping through each individual instance. So you can make this work no matter how many http links you have on the page.
Plugins Easily Extend Functionality
Want to add a clock with fancy hands and glowing digits to your website? Perhaps you’re interested in a nice-looking search bar so people can know about specific menu items on your restaurant’s website. Well guess what, there’s probably a ready-to-use plugin for both of these created by the jQuery community.
However, with a jQuery plugin, you can get the necessary functionality prebuilt and it takes virtually no time to integrate with your site. Many of these plugins are regularly updated and moderated for compatibility with new browsers. Granted, it’s not as customizable as designing your own stuff from scratch- but the time savings are probably worth it for small businesses and startups.
Easy Integration With Visual Studio Code
Integrating jQuery code with the .NET framework is incredibly easy. You can download jQuery and add it via an HTML script tag, or use the CDN (Content Delivery Network) method. There’s also NuGet which comes with Visual Studio, it’s an extension that functions as a library package manager.
Using Visual Studio you can quickly debug your code, whether you’re developing web or mobile apps. jQuery code works together with ASP.NET AJAX. Ever since 2010, jQuery has been officially integrated into Visual Studio (along with IntelliSense).
Back in the day, when Flash wasn’t obsolete, webpages often used it to display animations and other interactive elements. However, there would be issues with the plugin not loading. This resulted in buggy elements and incomplete page loading.
Whenever you have a website with interactive elements that need to exchange data with a server, it’s probably using AJAX. If you’re pulling records, tables, images, etc. from a backend, AJAX calls have to be made. And these are done asynchronously, which means the entire page doesn’t have to be reloaded whenever new info is downloaded based on user interaction.
jQuery has built-in methods for AJAX requests that use streamlined code as opposed to native XHR. Plus, you can even use jQuery for server-side DOM traversal in combination with Node. The combination with Node comes in handy when you need to do some server-side webpage scraping/ parsing.
Seamless Cross-Browser Compatibility
Organizations like to reduce the amount of time they spend on developing and maintaining a website/ app. And the same goes for support requests. jQuery is still popular because it reduces the amount of time needed on ensuring cross-browser compatibility, especially on legacy sites that were designed a decade ago.
5 Disadvantages Of jQuery
It Slows Down Webpages
Look, there’s no way to get around the fact that your browser has to download jQuery’s library first before it can execute the functions. While jQuery is loading, it blocks other processes from completing. With modern hardware and fiber internet, even 50 to 100 milliseconds of delay is noticeable.
And this is especially awkward with mobile apps and sites that are supposed to be lighter. Hence, there are so many miniaturized versions of jQuery that come in at 10KB or smaller.
Backward Compatibility Not Guaranteed
Despite the open-source nature and extensive documentation, you’ll occasionally run into instances where certain plugins just aren’t backward compatible. Certain functions may get deprecated, but the base jQuery library generally tends to be backward compatible. jQuery even has plugins for backward compatibility.
Unless you make big jumps between versions, you should be good. There will be the occasional issue with selectors, AJAX methods, etc. but nothing major. Still, it’s worth keeping an eye out for these issues.
Debugging Complex Projects Is Hard
Since this is all open-source, the code behind each plugin can vary immensely in terms of style and efficiency. Sure, there is usually extensive documentation behind all of it. But in development, you always come up with fringe cases and issues where they aren’t expected.
Limited Customization For Complex Projects
The jQuery library is like a set of Lego pieces that you put together and create a final product. But each piece constricts the type and scope of your page design. Plugins are great, but they still perform pre-determined tasks and will look/ feel a certain way.
But let’s say you want to create some cool interactive elements on your blog/ personal site without going through a lot of hassle. In that case, you might want to fall back on good old jQuery. It will also be needed if you’re a professional/ freelancer working on maintenance projects for legacy sites.