jQuery in Review: 2016

jQuery is one of the most popular JavaScript libraries and highly favoured by the community. It is popular for one key reason: Its clean and easy to use API that abstracts the complexity of cross-browser scripting among, even the most dated browsers.
I personally like jQuery due to three facts: well supported library, well maintained documentation and a huge number of jQuery plugins.

With the release of jQuery 3.0 in 2016, there are new features, improvements, and bug fixes. The major goal of the release seems to be slimmer and faster version of jQuery. As such, old IE workarounds have been removed.

The jQuery team has dropped support for IE 6-8 versions. If you need to continue to support IE 6-8 versions, you can use the latest 1.12 release. I would like to highlight some of the other important updates that are part of jQuery 3.0.

“Breaking Changes”

In jQuery 3.0, there are a few “breaking changes” that justified this major version bump, but I hope the breakage doesn’t actually affect that many of us. Let us look at some of those important “breaking changes”.

  • Deferred methods such as success(), error() and complete() have been removed from jQuery.ajax. We have two options to handle:
    • We can use standard methods of done, fail and always.
    • With the release of jQuery 3.0, it is now possible to use JS promises compliant methods of then and catch. Note that in catch method, the errors would be silenced and passed as rejection values to rejection handlers. To support this feature, the functions jQuery.ready and jQuery.fn.ready were also modified. But if we are using ready functions in classical ways (jQuery(function() {}) and jQuery(document).ready(function() {}), then there would be no way to attach the rejection handlers. In this approach, any runtime exceptions would be swallowed.

To overcome this issue, jQuery 3.1.0 was released. Errors are no longer silenced, instead they will be logged in the console. In case an error is thrown within ready handler, jQuery.readyException was introduced to handle such errors.

jQuery.readyException = function(error) {
    console.error( error );
 };

  • Cross-domain script requests must be declared. This means if you are making a request for a script on a domain other than the one that hosts the document, we must explicitly set dataType: “script” in jQuery.ajax() and jQuery.get() methods. This helps to prevent Cross-Site Scripting attacks. If you are using jQuery.getScript(), dataType parameter is not required as it is set by default.
  • removeAttr() no longer sets the property to false. Before jQuery 3.0, calling removeAttr() on the attributes checked, selected and readonly would also set the property to false. Note that this behaviour was necessary for older versions of IE browser, but it should not be used for modern browsers unless the DOM is later going to be serialized back to HTML string. In all other cases .prop(“checked”, false) should be used.
  • jQuery 3 runs in Strict Mode! Hang on, this does not mean that you have to rewrite the code to run in strict mode. Both strict and non-strict modes will work together.
  • The methods load(), unload() and error() have been removed. If you need to attach these  events, then on() method can be used.

Features

Here’s an overview of some of the interesting new features.

It supports the for…of loop introduced in ES2015. It allows looping over iterable objects including Array, Map, and Set.

// ES2015 way
    for ( let element of elements ) {
          //do something
    }

Note that this will work only if your environment supports either ES2015 or if you are using JavaScript compilers such as Babel.

  • New signatures for jQuery.get() and jQuery.post() functions, in which settings parameter can be added.
  • Animations now use requestAnimationFrame API when performing animations. This should result in smoother animations and less CPU usage.
  • Last but not the least, SVG document supports CSS class manipulations. The methods that manipulate CSS class names such as addClass() and hasClass(), support SVG.

This is by no means a complete list of updates in jQuery 3.0. If you would like to check out a complete list of updates, take a look at jQuery 3.0 Upgrade Guide. If you want to try and identify compatibility issues in your code, use jQuery Migrate 3.0 plugin. In the meantime, I hope migrating to jQuery 3+ will be a joyous experience to you.