hungryturtlecode

Hungry Turtle Code Logo

jQuery 3.0 - One jQuery To Rule Them All!!

Please share this post if you enjoy it!

The Beta Release Of jQuery 3.0 Has Landed

Updating jQuery didn't break my site

The next chapter of the jQuery journey is upon us. jQuery 3.0 is now officially in beta stage. In the official statement released by the jQuery developers they have indicated that previous generations of

jQuery will only continue to receive minor changes moving forward.

If you still want to use older browsers such as Internet Explorer 8, then you will have to continue using jQuery 1.12. However, the developers at jQuery have said they are dropping all support of IE8 and it looks likely that older browsers are slowly being pushed to the wayside.

Will It Break My Site?

If you are familiar with version numbering convention you will have noticed it is a major update, which usually indicates that there will be some functionality that will break when upgrading to the newest release.

jQuery 3.0 is no exception to this rule – although the changes that will cause breakages to code appear to only affect edge cases. But keep in mind that it may break your site if you decide to immediately upgrade to the beta.

It is certainly more advisable to experiment with the beta in a non-production environment – at least for now. The developers mentioned that they will be releasing a tool shortly to test for breakages when upgrading.

How Do I Get It?

You can head over to the CDN and link it into your projects, or you could use NPM. Both are available immediately.

Unminified – https://code.jquery.com/jquery-3.0.0-beta1.js

Minified – https://code.jquery.com/jquery-3.0.0-beta1.min.js

NPM installation:

npm install jquery@3.0.0-beta1

What’s New?

.show() and .hide()

The .show() and .hide() methods have been given a bit of a revamp. They have been given a pretty nice performance boost. The performance data makes for some interesting reading.

Height and Width Methods

The .width() .height() .css("width") and .css("height") have all been changed to provide more accurate return values.

In the past, the return value from any of these methods will have rounded itself to the nearest pixel, regardless of the accuracy of the value given to it by the browser.

For example, if you called .width() in Firefox and the actual width that Firefox calculates was 1204.2px, the return value from .width() will have been 1204px.

However, all of these methods will return the exact value – decimals included. This won’t have a massive impact but it is a nice feature if you require very accurate measurements for your layouts.

MOAR SPEED! For Custom Selectors

There have been significant speed increases to the notoriously taxing jQuery custom selectors like :visible and :hidden . The suggestion is that these are up to 17 times faster in jQuery 3.0 than they were in any previous version of jQuery.

Having said this though, that still doesn’t mean that these are lightning quick, but they will likely do the job in most use cases now.

Animations. All the Animations

On pretty much all browsers (all that support the requestAnimationFrame API, which is all browsers except IE9 and some older mobile browsers) will now use the requestAnimationFrame API to render animations on the page.

This has some great advantages to performance. Especially for those of you who have been animating on mobile sites. Animating on mobile devices typically ate up resources and quickly killed batteries. Which of course, isn’t ideal. These problems are significantly lessened with this new update.

Many More Changes…

I don’t want to spend hours going through all of the changes that have been made in the latest jQuery 3.0 beta release. I have covered a few of the major changes.

If you are interested in seeing all of the changes you can take a look at them. Some of these include changes to Ajax methods and calls.

Please share this if you found it informative.

See you soon for more jQuery goodness,

Stay hungry and keep coding,

Adrian Henry