What to look forward to in jQuery 3.0

Last year the jQuery team announced that 2015 will see the release of jQuery 3.0, a major new version. Since it's not everyday that you get to see a new jQuery release, developers around the world found it interesting and useful. In July the alpha build of jQuery 3.0 was released. What does the new version have to offer and what can we expect from jQuery 3.0? I will attempt to answer these questions in this post.

jQuery 3.0 overview

The alpha release of jQuery 3.0 came in two flavors: jQuery 3.0, which is meant for modern web browsers and development environments (read: Internet Explorer 9 and above); and jQuery Compat 3.0, which includes support for Internet Explorer 8 as well, possibly at the expense of file size and performance. In other words, jQuery 3.0 can be termed as the successor to jQuery 2.1.1 whereas jQuery Compat 3.0 is the successor to jQuery 1.11.1

Now, even though version 3.0 sounds like a major leap from 2.1.1, there are not many architectural changes. Instead, this new build of jQuery is being pitched as a drop-in improvement to previous versions: not much has been changed in the jQuery’s API other than some incremental enhancements.

So, what does jQuery 3.0 bring to the table?

jQuery 3.0 major features

• New .dat() implementation. In accordance with HTML5 dataset specifications, jQuery 3.0 comes with updated .dat() implementation. This means all keys have been converted to CamelCase.
• Promises/A+ compatible. jQuery.Deferred objects are now compatible with Promises/A+. Also, special case deferred methods in jQuery.ajax have been removed.
• .unwrap() method. Up until now, this method did not take any arguments; jQuery 3.0 has changed this and the .unwrap() method can now take a selector argument.
• Animations. The new jQuery API comes with optimisations for animations, such that they consume less CPU time and memory. The result? A better and faster experience.
• Deprecated event aliases. Event aliases had been deprecated ever since jQuery 1.8, but the new version of jQuery has finally done away with them. .load, .unload and .error have all been deleted.
• .show() and .hide() menus. These menus have been modified, so the older approach of directly setting the display default value to none will no longer work. Instead, you first need to incorporate a hidden class, and thereafter define the said class as display: none in your stylesheet.

Appraisal

Nearly all of the changes in this new version of jQuery were expected. For instance, updates to the jQuery API with reference to animations was obvious - memory and performance optimisations are needed to preserve battery life on mobile devices.

That said, certain changes are steps towards the future. So far, jQuery has rounded off the values for height and width. However, since many modern browsers are now able to return sub-pixel values (Firefox is a good case in point), jQuery 3.0 has moved with the trend - now, .width(), .height(), .css("width") and .css("height") all return decimal values. So if you are someone who needs pixel-perfect precision, this will be a welcome change.

Furthermore, the fact that jQuery 3.0 offers a separate "Compat" version for IE8 is a blessing indeed. Developers who actually need compatibility with IE8 can opt for the Compat version, whereas rest of the world can use the jQuery 3.0 version without having to deal with handicaps in terms of file size and speed.

Early verdict

The alpha release has been around for quite a while now, and you can grab it either via jQuery CDN, or directly download from here (need the Compat build? Use this link). You can also follow the development progress over at GitHub.

It is no secret that jQuery contributes a lot to web development: with a simplified API and a loyal community, jQuery plugins have become a mainstay in various types of web projects. That said, how will jQuery 3.0 fare?

Everything in jQuery 3.0 seems to be precisely what is needed. It has been a long-awaited update, and the features that it brings forth are welcome additions. Also, while the jQuery team have tried their level best not to reinvent the wheel, some major changes are bound to break something or other: for example, as mentioned above, directly using the stylesheet to set the default of display: none and then using the .show() method will break the output.

Furthermore, jQuery 3.0 will be facing challenges that its predecessors never met. Tools such as FamousEngine have now added a whole new paradigm to JavaScript development, and while jQuery still enjoys a top spot, it is not the only tool of its kind out there. As such, the transition from jQuery’s older versions to 3.0 may encounter some roadblocks down the line. Make sure you check the jQuery Migrate plugin to test your code before making the jump.