2.  Special case with .data() names

This refers to the method the allows attaching additional information in the form of maps or value keys to page elements or tags. Previously value was fully transformed; if the key was written as a kebab-case (with hyphens as spaces) it was automatically transformed into camelCase, with all words joined together, capitalized and the digit attached to the camelCase. 

In jQuery 3.0.0-alpha1, implementation is closer to the HTML5 dataset specification, keys are now automatically converted from kebab-case to camelCase, no matter what access method was used. 

Another novelty is that digits do not participate in the conversion anymore. You will need to pay attention to these changes when retrieving data by calling .data() with no arguments, and also when you want to access the data via a converted key (.data(“foo42”)) instead of the original (.data(“foo-42”)). Take a look at the comparison between the two versions below:

Special case with .data() names jQuery 2.1.4:

Special case with .data() names jQuery 3.0.0-alpha1:

Code sample: 

<script>
    $( document ).ready(function() {
        $( "body" ).data("data-style-42", "jQuery3");
        console.log($( "body" ).data());
    });
</script>

3.  jQuery.Deferred now Promises/A+ compatible
A promise is a special component for deferred callback. Promises are used in the following way: we make a method where promises are set; after this, a synchronous fulfillment of actions is written and the promise begins. A promise consists of two methods: for successful and unsuccessful fulfillment of actions. After we follow the instructions, we can reject a promise, or do nothing and then it will be considered fulfilled. Or we can complete it, which will render it fulfilled as well.
In jQuery 3.0.0-alpha1 callbacks are invoked asynchronously. This was possible before only within the resolution method (reject or complete) and if it was encountered in the code, it began to resolve all promises. Now it will fulfil everything and then begin to resolve promises from parent to child. Exceptions thrown in a .then() callback now become rejection values. Now the parent method doesn’t crash and all promises are successfully fulfilled with or without errors, without exceptions. In order to enjoy legacy behavior you have to replace .then() with the .pipe()method. 

Promises jQuery 2.1.4.

Promises jQuery 3.0.0-alpha1

Code sample:

<script>
    $( document ).ready(function() {
        var parent = jQuery.Deferred();
        var child = parent.then( function() {
            return "foo";
        }, function() {
            return "bar";
        });
        var callback = function( state ) {
            return function( value ) {
                console.log( state, value );
                throw new Error( "baz" );
            };
        };
        var grandchild = child.then(
                      callback( "fulfilled" ),
                      callback( "rejected" ));
        grandchild.then(
                      callback( "fulfilled" ),
                      callback( "rejected" ) );
        parent.reject( "foo" );
        console.log( "parent resolved" );
    });
</script>

4.  Error cases not failing silently
When idiotic questions are asked, it is impossible to answer them in any intelligent way. With error cases, jQuery didn’t always behave in the best manner, and everyone was getting very frustrated. Years of experience show that such cases always returned something, as if they were legitimate requests, and were not treated like errors. Now in the alpha version of jQuery 3.0 such cases throw errors in a way that leaves no room for ignored requests. See the examples below:

Error cases jQuery 2.1.4

Error cases jQuery 3.0.0-alpha1

Code sample:

<script>
    $( document ).ready(function() {
        console.log($( window ).offset());
    });
</script>

5.  Animations now use requestAnimationFrame
On all platforms supporting the requestAnimationFrame API (everything except IE8 and IE9) that API will be used when performing animations, and as a result you get better quality without more load on CPU. This is especially important for mobile and other handheld devices as it affects battery life. The compatibility problems that existed in the past seem to be dealt with in the alpha version, but no one should expect real-time perfection as that is literally against the laws of physics.

6.  .width(), .height(), .css(“width”), and .css(“height”) return decimal values (whenever the browser does)
In the past, jQuery rounded values when retrieving width and height but a few browsers returned subpixel values and users had a need for precision when relying on values for layout choices. Take a look at what these changes look like when we tried them in the old and new versions:

Width-Height jQuery 2.1.4.

Width-Height jQuery 3.0.0-alpha1

Code sample:

CSS class is determined:

.precized {
            width: 320.5px;
            height: 50.25px;
        }

The page contains the element of this class: 

<div id="jq_text" class="hidden precized">
 Current
 <a href="http://jquery.com/">jQuery</a>
 version is:
 <div id="jq_ver" class="inline">
 </div>
</div>

jQuery script:

<script>
    $( document ).ready(function() {
        console.log("Width: " +
              $( "#jq_text" ).css('width'));
        console.log("Height: " +
              $( "#jq_text" ).css('height'));
    });
</script> 

7. Amazing speedups for some jQuery custom selectors

Gurus at jQuery learned to skip some steps when working with custom selectors and put this new knowledge to work, resulting in some of the cases being sped up to 17 times. Everything is case specific, however, and speed will depend on a variety of factors. It is advised to test pages thoroughly to find out if certain selectors may be to blame for performance problems.

The Future of jQuery

jQuery has switched to a new version system, which they will continue in the future. So far, API changes are not anticipated, but if they do happen, they will be announced. Consistent with semver philosophy, before the fourth version we can predict no changes that will be incompatible with previous releases. What we can expect are timely bug fixes and mutually compatible changes.

Conclusion

jQuery has been marching in step with the contemporary tendencies in development that call for cleaner, shorter, simpler code that behaves equally well in the multitude of popular browsers with their API peculiarities.

The framework keeps evolving with the changing times and programming fashions: bug fixes are offered regularly and educational guides are upgraded to keep developers in the loop of the latest alterations.

Upgrading to different versions is hastle-free and the jQuery community has also been working on internationalizing the product, having launched the 2015 Globalize project. With all these positives in mind, the future looks good for jQuery.

Alexey Povarkov graduated from Belarusian State University of Informatics and Radioelectronics with a degree in system engineering. He has been a system engineer at Itransition for more than six years, where he has led project teams  working on software solutions including business profit calculators, ERP systems, hotel booking systems, manufacturing life cycle support systems and web tax reporting tools. His technical expertise encompasses Java, Spring framework, GWT, jQuery, and JavaScript.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info