Tuesday, August 14, 2012

jQuery 1.8 Released... What Are The New Features? Is Anything Broken?

jQuery 1.8 was released only a few days ago!
It wasn't without a bit of a wait, but I wouldn't consider it behind schedule by any means.

Should you upgrade? Is it safe? Will your jQuery functions break if you upgrade from 1.7 to 1.8?
Short answer: go ahead and upgrade from 1.7 to 1.8 and do some testing, you should be fine."
Longer answer: if you are running older than 1.7, be careful. Especially if you are still pre-1.5. If you are running jQuery 1.6 or newer you should be good to exchange the jQuery versions and test for inconsistencies. Of course it all comes down to what functions you are using. If you are using older than 1.7 with Ajax/JSON, jQuery UI, or third-party jQuery plug-ins you will surely need to do some testing before going live with the new version.

So, what's been added? Well check out the official information from jQuery... and my highlights and comments below.

Sizzle re-architected: jQuery’s selector engine is faster than ever, thanks to a rewrite (well, really two rewrites) by Timmy Willison. Sure, most browsers have querySelectorAll nowadays, but nearly every implementation falls short in one way or another, creating a road full of cross-browser potholes. Sizzle smoothes that road for you. Plus, you may want those useful jQuery selector extensions like :has() with a complex selector or :contains(). Oh yeah, and there’s still IE6/7 support.
This is what makes jQuery, well, jQuery! The best thing about this update is that it makes all of our old jQuery markup run faster, even if you aren't using the most efficient or modern selectors.

Animations re-imagined: Over time, the animation code in jQuery had become kind of messy. Corey Frang took a head-first dive into that swamp and managed to remove most of the alligators, um, bugs. Most of the changes are under the covers, so existing animations should just work (and work better). But there are also some awesome additions to make animations more general and extendable. One notable and very cool feature is the use of the progress callbacks in Promises. We’re still working on detailed documentation, but we do have a draft. Also, here’s an example of the new code in action: http://jsbin.com/odocid/1/edit.
If you haven't started playing with jQuery animate yet, it looks like now is a good time to start. Evidently, jQuery animate is now a bit cleaner and sleeker, hopefully a bit faster and lighter-weight as a result.

Automatic CSS prefixing: When you use a CSS property, in either .css() or .animate(), we’ll use the correct prefixed property (when appropriate) for that browser. For example, take .css("user-select", "none"); in Chrome/Safari we’ll set the value as "-webkit-user-select", Firefox will use "-moz-user-select", and IE10 will use "-ms-user-select".
I personally love this one. It is painful enough to prefix, -moz, -webkit, and so on in your regular CSS sheets. There has got to be a better way... and now there is! This is not only cleaner, but also more efficient and results in less CSS 'errors' detected by each different browser. Of course, this will also clean up jQuery generated styles by requiring only one style to be set for all browsers.

More than 160 bugs closed: The Sizzle and animation rewrites in particular provided the impetus to fix several long-standing bugs–some of which have been around for two or three years. Mike Sherov tackled most of the open CSS and positioning issues, getting us down to near-zero bugs there. We also haven’t given up and are still pounding away to eliminate annoying differences between IE 6/7/8 and modern browsers, so you don’t have to deal with them.
Nice to see bugs being fixed before they are even noticed by most users. When is the last time you've seen a bug in jQuery? Well they just fixed more than 160 of them, so I'd say it is pretty darn near bug-free. No more excuses to not use jQuery.

Smaller code size: Despite all the code cleanup, new features, and bug fixes, the gzipped file size of jQuery 1.8 is actually a few hundred bytes smaller than jQuery 1.7.2. Size reduction wasn’t our primary goal in this version, but we felt it was important to hold the line on code growth, and we definitely achieved that. Many thanks to Richard Gibson for leading the code-crunching charge across the entire project.
This can make a huge difference in your projects and is another reason to go ahead and update to this version.

Modularity: If you know your project’s jQuery dependencies well, you can use the new grunt-based build system to strip out parts of jQuery that you know you don’t need. What we’ve done here for 1.8 is really just a beginning, you’ll see even more flexibility as we move to later versions.
Efficiency! Have a site that really just needs a specific jQuery feature? Now you can even more easily deploy a custom jQuery just for that use, cutting those page load times down even more.

The short answer is “very little”. We wanted to provide a generous notice period for deprecated features that will be removed in 1.9, to give people time to adapt their code. Several of the things removed in 1.8 were undocumented internals that some people have cleverly reverse engineered, but it’s always risky to use undocumented features. Here are the items removed:

$(element).data(“events”): In version 1.6, jQuery separated its internal data from the user’s data to prevent name collisions. However, some people were using the internal undocumented “events” data structure so we made it possible to still retrieve that via .data(). This is now removed in 1.8, but you can still get to the events data for debugging purposes via $._data(element, "events"). Note that this is not a supported public interface; the actual data structures may change incompatibly from version to version.

Deferred.isResolved() and Deferred.isRejected(): Calling N-1 boolean methods to get the state of an N-state variable was getting a bit silly, so we added Deferred.state() in jQuery 1.7 to tell you the state in a single call. So, these two older methods aren’t needed anymore. It’s much more convenient for debugging scenarios where you often want to know the state of a Deferred as a string.

$(element).closest(Array) returning Array: This was a strange signature of the .closest() method intended for use by the old .live(), but not used by any other code as far as we know. Normal uses of .closest() returning a jQuery object are not affected by this signature being removed.

$.curCSS: This method was simply an alias for jQuery.css() from jQuery 1.3 onward. Although it has never been part of the documented API, some external code has been known to use it, perhaps thinking it was “more efficient.” Now it’s “more gone.”

$.attrFn: Yet another undocumented item, used to define which methods could be used in conjunction with $(html, props) signature. Although it serves no functional purpose in jQuery 1.8, we are leaving an empty $.attrFn in jQuery to prevent code that uses it from throwing errors. Fair Warning: This will be removed entirely in jQuery 1.9, so update your code!
Plenty of examples of shady jQuery techniques. If you think you are being clever or finding a backdoor to some jQuery functionality, just remember you are likely causing your project to be stuck on whatever version of jQuery you are using and running the risk of encountering undocumented issues very quickly. Just stick to the documentation... that is what future jQuery versions will adhere to for the most part.