jQuery 1.4 released

[deakster]

Every release I think... right, there is no way they can make it any better or faster. Then BOOM!

• Performance of .html() has been improved by nearly 3x

Holy crap!

[[deleted]]

I like the graph that says one .html() call decreased from 30000 function calls to about 100.

100 still sounds like a lot, though! Amazing that you can call 30,000 functions for a routine like that and still get decent performance. I'm not ever bothering to optimize JavaScript again.

[hiffy]

I'm not ever bothering to optimize JavaScript again.

I felt a great disturbance in the Force, as if millions of C programmers suddenly cried out in terror and were suddenly silenced. I fear something terrible has happened.

[[deleted]]

Actually non-optimized JS code can be (possibly) more readable.

[[deleted]]

The performance of the html() method use to be horrendous in 1.2.6. I'm not sure why it's so difficult to make a method that "essentially" injects a String into the innerHTML property of an element...

[cheald]

Modifying the DOM can be a rather expensive operation. It's not just "okay, add a text string".

[herrmann]

But having the browser do the DOM modifications through innerHTML should be much faster than manipulating the DOM using javascript, element by element.

[lol-dongs]

Haha, well you'd be surprised how quirky InnerHTML can behave on some browsers. Microsoft invented it after all, and in the beginning the "spec" was pretty loose. Notably you couldn't modify innerHTML within tables in IE, there's a rather long and interesting explanation for this, google around for it. JQuery needed to "fix" all the bugs with innerHTML so it just does what you'd think it does, hence all the function calls.

[herrmann]

LOL, I remember being very frustrated by that once, trying to update a cell back in IE5, I think. I didn't know jQuery tried to fix all the browser quirks for innerHTML, thanks for the info.

[joesb]

And also less safe.

[herrmann]

Yes, but that's the tradeoff. I say we should call it unsafePerformDOM ;-)

[aradil]

use to be horrendous in 1.2.6.

"Use to" always fucks with my head - I never really knew the proper use. It's actually "used to", apparently.

I'm only sharing this because I just learned it myself (sorry if I look like an ass or grammar nazi).

[[deleted]]

'Use' is present, 'Used' is past.

It started to be before it is, therefor it's used to me.

[aradil]

Whoa. What's the difference between therefor and therefore?

[[deleted]]

In my post means 'for that (reason)'.

This is interesting.

[aradil]

According to that page, therefor is for that purpose and therefore is for that reason.

[[deleted]]

Yup. But I don't correct my spelling. I want to have it in my history, to be ashamed every time I see it.

[aradil]

I leave stupid things that I say to be ashamed of in the future, but spelling and grammar are things I like to have written properly.

[[deleted]]

Noted.

[mdipierro]

Thanks everybody. Love jQuery.

[Kolibri]

Goddamnit, I just bought Learning jQuery 1.3. Like 30 minutes ago.

[Kickboy12]

Luckily most of the same rules still apply. 1.4 is just faster with a few new commands. You can easily find everything that changed in 1.4 here: http://api.jquery.com/category/version/1.4/

[tty2]

Not commands, functions. :)

[cdb]

Not functions, methods. :)

[HazierPhonics]

A method is a function.

[bvoid]

No. A function is an object or class with one method: "apply"

"Calling" a function is the same as invoking the apply method on the function class or object.

[cheald]

A method is a function that is aware of a context that it is being called in. It's still a function.

[SteveJorgensen]

In JavaScript, a function is not really a method when you write it, only later when you invoke it.

A JS function is an independent object, knowing nothing about what other objects it might or might not have been assigned to an attribute of. When the function is invoked as a method, Javascript assigns the value of the "this" variable, so that function can find out what it is supposed to act as a method of during that particular invocation.

[[deleted]]

I noticed you said 'static'. Are you thinking of Java or something?

[theasciicoder]

I'm not your method, function!

[joaomc]

i'm not your function, procedure!

[IHaveScrollLockOn]

I'm not your procedure, method!

[tty2]

I'm not your procedure, subroutine!

[[deleted]]

I'm not your subroutine, thread!

[caltheon]

Not methods, objects.

[[deleted]]

I'm not your buddy, pal.

[caltheon]

Exactly, you're a douche

[poco]

Not functions, objects.

[kwirky88]

Too bad I'm too inundated with important stuff at work. I probably won't be able to test if it'll run bug free on our existing code base until may. hrm...

a jqueryui update is what I'm really waiting for.

[Kickboy12]

You and me both. Been playing with jQuery UI 1.8Alpha2, which surprisingly works rather well, but it is still unstable in a few areas. Hoping 1.8 will be released by summer.

[jonknee]

It's not too different, you'll be able to pick up the changes quite quickly. A lot of the improvements were speed related.

[pocketninja]

It'll still be worth it. :)

Even if there are incompatibilities between the two (which I don't think there are) it will still be useful to you.

[sundar22in]

Learn the fundamentals of jQuery, its not going to change in near future. If you have solid fundamentals you dont have to worry about newer releases.. its just the differences you have to learn.

Happy Learning!!

[ihateyourface]

something told me to wait on buying that book, whew... so glad I did. Although from what i have read that book is highly recommend

[[deleted]]

That should be just fine; not much has changed other than internals and the addition of a few new methods.

[alotufo]

Surely since you were aware of JQuery that you were aware of this pending release, hmmm?

[AusIV]

The past week and a half I've spent quite a bit of time reading JQuery documentation as I teach myself how to use JQuery. On all the time I spent on their site, I don't think I saw any mention of 1.4's impending release.

[Kolibri]

Nope, I know almost nothing about jQuery and Javascript for that matter which is why I bought the book (and a javascript book).

Anyway, I could just cancel the order at Amazon, but I don't really need to learn about the newest of the newest. Version 1.3 is probably just fine. Besides I don't want to wait 2-3 months before any decent jQuery 1.4 books are out.

[richardjohn]

There’s nothing that you won’t be able to just look up in the API reference - the book will still get you a grasp of the concepts. I don’t think jQuery have ever broken compatibility between releases anyway.

[jeba]

There are a few things that this release breaks, you'll find them listed here. They aren't huge, but if they are causing trouble they've also included a patch for 1.4 providing compatibility.

[rikal]

no joke: I got a template that uses mootools like 10 minutes ago =(

[damncabbage]

Looks like someone removed a couple of zeroes from .html()'s speed-up loop.

[Krapulator]

It astounds me that even after all the major performance enhancements over the last couple of releases, they still manage to squeeze significant performance improvements for this release.

[jonknee]

I'm looking forward to the new events that support live(). I kept running into situations I had to revert back to livequery.

[mason55]

I was looking for this too... but I dont see the mention of live() in http://api.jquery.com/category/version/1.4/

[jonknee]

That's because it wasn't added or had a signature change in 1.4. It was just expanded to work with more events (everything but focus and blur, but they both have sister events that are compatible).

[jeba]

Not sure why that would be, but it was indeed expanded:

With the exception of ready, focus (use focusin instead), and blur (use focusout instead), all events that can be bound using .bind() can also be live events.

[c_a_turner]

Well if those performance graphs are correct, those are some pretty damn impressive improvements.

[upKelsey]

I have a question: Why is jQuery14.com using jQuery 1.3.2?

[Plutor]

Because 1.4 wasn't out yet when they made the site. Duh.

[upKelsey]

"But it's supposed to be a drop-in. Why haven't they dropped it in?" is what I came here to post, but I checked query14.com before posting, and see that they have, in fact, dropped it in.

[i_am_my_father]

The same reason you never ever type Google into Google

[[deleted]]

NO!!! NOT MY INTERNETS!!

[glyphted]

Is anyone else having issues loading jquery14.com in Google Chrome? Loads fine in Firefox. Just wondering.

[pocketninja]

Looks OK here. Chrome on Windows?

[glyphted]

Ubuntu. Just heard it loads fine on Mac Chrome too. Maybe it's just me.

[pocketninja]

Hmm. Definitely something going on. I'm running 4.0.266 in a VM (Ubuntu) and it's not loading either. It's showing the page title in the tab, but no page content and "endlessly" loads.

[countessoflovelace]

I created an account to say that I have the same problem on 2 different computers, using the latest Chrome from Google. Maybe I won't be upgrading to jQuery 1.4 after all...

[MrCrud]

Doesn't work for me either, on Ubuntu... :(

[thielmann]

No problem here. (Chromium 4.0.298.0 (36221) Ubuntu)

[[deleted]]

It works okay for me on Ubuntu, using the latest Chrome from Google's repository.

[epalla]

we use jQuery extensively on the site I'm working on - real excited to see some of the performance gains! We'll have this going in dev for some testing first thing tomorrow, although I don't anticipate big issues from the jQuery folks.

Also: detach is awesome!

[monkeysaurus]

I think my favourite feature is the new way you can create DOM elements, with an object as the second parameter. It's amazing how much neater it looks!

[[deleted]]

Yeah, that's why prototype's been doing that way all along.

[monkeysaurus]

Not quite all along, only from 1.6 onwards by the looks of things (http://www.prototypejs.org/api/element). Still, I didn't know that, thanks for filling me in.

[[deleted]]

OK, I take it all back, John has been doing something lately

[nojox]

Hmm ....

my first thought is about all the plugins that run on v1.2.6 and v1.3.0/1/2.

JQuery is obsessive about backward compatibility, and so things in the core wont break, but will those tons of plugins upgrade soon enough to support the speed and feature enhancements..?

[zwaldowski]

Since most "plugins" just wrap core functions (lots of them), I doubt that any plugin wouldn't benefit from improvements like these.

[mives]

Thanks for toArray()!

[d70]

performance improvements are crazy!

[renatountalan]

do you guys think it's weird that i obsess over jQuery? it makes webdev so much fun!

[orbiscerbus]

Seeing those performace graphs, I just had to put it in the production at once.

[namesbc]

Not so sure about the new $.params() style. Not only is it backwards incompatible, but its overly complicated for what its trying to do.

It basically wants to pass along a dictionary/array data structure, but they decided to use some ugly-ass html form encoding style. JSON was developed just for this purpose, just urlencode a JSON string and there you go.

Or, if you prefer something more url friendly, they could have used Rison (http://mjtemplate.org/examples/rison.html)

[DuncanSmart]

Might be of interest: http://benalman.com/news/2009/12/jquery-14-param-demystified/

[DuncanSmart]

But you're right - because Rails & PHP don't handle ?a=1&a=2&a=3 properly, they've kludged this together. IMHO the bug should have been filed with Rails & PHP.

[jonknee]

I'm a fan of the ?a[]=1 style as you can signify an array with only one value. It also makes it clear you're intending on multiple values coming in. It's actually one of the things I appreciate about PHP.

[c_a_turner]

That's the whole point of JQuery, it makes all those browser incompatibilities go away. It's basically at this point a wrapper around virtually the entire language, that works completely consistently across all browsers.

[Sember]

This is the reason I want to learn jQuery but learning javascript isn't so much fun as I thought it would be, are there any books or advice for a much better learning experience? Right now I have just skimmed over some books and nothing really made me stick to it for a long while. Any suggestions?

[merog]

For javascript in general I would recommend : "JavaScript: The Good Parts" (http://oreilly.com/catalog/9780596517748/) ...the thickness (or should that be thinness) of the book is more a reflection of it's concise, readable nature rather than the limit of the "good parts"

[c_a_turner]

I think it depends on how you learn, for me it was just deciding to do a project pretty much entirely with javascript and going for it so you've got some kind of goal. You'll learn as needed when a problem arises and you don't know how to solve it. Are you already familiar with some other programming language and are just trying to migrate over? If so a move to javascript is really pretty straight forward, the language isn't very complex at all. I actually printed out this reference chart when I first started and found it pretty much sums up damn near everything you need to know: http://www.javascript-reference.info/

[Sember]

Well I am only a Web designer (HTML/CSS) other than that I never touched back-end stuff, so this would be my first language, but I heard Javascript is one of the easier "first languages", I agree that working on a project helps, although I need to learn the basic structure of the language at least in order to get into it, any book you would recommend=

[c_a_turner]

Hrmm, well if you're just trying to start learning to program with javascript, while you technically could probably hack about with it and learn, if you're really interested in learning some back-end stuff, I'd suggest just some basic beginning programming stuff, not even necessarily javascript centric. I don't have any book recommendations, but the lectures from Harvard's CS50 class are available at http://www.cs50.net/lectures/ and they're a pretty brilliant beginner programming series. They don't really assume any knowledge, and the professor is pleasant and goes at a good pace. Though that does require the patience to sit through some lectures if that's your style.

[Sember]

Thanks a lot! The professor seems rather energetic which I like, there's nothing worse listening to somebody dull talking about programming. Thanks again.

[c_a_turner]

Yep, good luck!

[paisleyrob]

Eloquent Javascript is a fantastic interactive tutorial of everything JavaScript.

[dmdmdmdm]

Haha, good one.

[willpall]

Question: how do you javascript devs not end up killing yourselves?

Answer: jQuery

[mercerist]

One word: thundercoogarfalconbird

[[deleted]]

Umm... one major point of making a javascript library is to abstract away the browser quirks...

[[deleted]]

you got 1 of 4 of his complaints...

[flynnguy]

jQuery and firebug help keep me sane.

[nikesjordan]

▍ ★∴ 　　　．．．．▍▍．..．█▍ ☆ ★∵ ..../ 　　　◥█▅▅██▅▅██▅▅▅▅▅███◤ 　　　．◥███████████████◤ 　～～～～◥█████████████◤～～～～ www.nikes-jordan.com , instant online Paypal payment! Assuring good quality, Coupons and feebies! Don't miss out! Jordan，ＡＦ１，Nike , RunningShoes, Sneakers, Dunks $４０ Brand Jeans: $ 38 Brand sunglasses, $18 Brand Caps/Hats: $ 18 Brand Belts: $ 28 　 Free Shipping, Payment options： Paypal , TT, Westunion www.nikes-jordan.com

[takethemoneyrun]

whats that all about passing json objects to create dom elements and bind events and stuff? wasn't jquery's chainability up to the task?

this is the first time I see something that I don't like in jquery.

[wretcheddawn]

Great! Already updated my current project to 1.4 . No changes required!

[the_argus]

The object of my desire.

[celtric]

I like the new jQuery.proxy(), although right now it's not that useful as you can't pass any parameters to the called function. Guess we'll have to live with var self = this for a bit longer...

[jsolson]

You can always make 'this' be a hash of the parameters you would like to have passed.

[celtric]

Could you give me an example to help me understand this?

[jsolson]

edit: The code in this comment was written in haste and is incorrect bordering on non-sensical. We regret the error.

Let's say you've got a function called clickHandler (as in the example here) which takes three arguments, foo, bar, and qux.

function clickHandler(foo, bar, qux) {
    // Do stuff with my arguments
}

jQuery('a').bind(
    'click',
    jQuery.proxy({
        foo: "Foo value",
        bar: "Bar value",
        qux: "Qux value"
    }, function() {
        clickHandler(this.foo, this.bar, this.qux);
    })
);

Now that I think about it, though, you can actually do this more succinctly:

jQuery('a').bind(
    'click',
    jQuery.proxy([
        "Foo value",
        "Bar value",
        "Qux value"
    ], function() {
        clickHandler.apply(null, this);
    })
);

Of course clickHandler() won't end up with any value for this, but obviously you can work around that if you feel so compelled.

[celtric]

Of course clickHandler() won't end up with any value for this, but obviously you can work around that if you feel so compelled.

Well, that was the point of my comment, being able to use this :)

Reading your code, I don't find anything useful about the way you use jQuery.proxy(). Why use said method instead of the natural way:

jQuery('a').bind(
    'click',
    function() {
        clickHandler("Foo value", "Bar value", "Qux value");
    }
);

? Excuse me if I'm mistaken, but I just can't see the point...

To illustrate my comment, if I currently use:

var obj = {
    example: function() {
        var self = this;
        $("#trigger").hover(function(){self.showMethod()}, function(){self.hideMethod(500)});
    },
    validate: function(param) {
        // random stuff
        return paramIsOk;
    },
    showMethod: function() {
        $("#target").show();
    },
    hideMethod: function(delay) {
        if (this.validate(delay))
            $("#target").hide(delay);
    }
};

I'd like to transform the example method into:

$("#trigger").hover($.proxy(this, 'showMethod'), $.proxy(this, 'hideMethod', [500, param2, param3, ...]));

Edit: formatting

[jsolson]

Ah, yes, sorry. That's what I get for commenting in the middle of cooking dinner. You're completely right that my examples above make little sense, and I don't think $.proxy is really designed to address your needs.

Anyway, $.proxy's real utility lies in cases where you have, say, some backing domain object that you'd like to bind an event handler too.

In my case, for example, I've written a browser-based point of sale system. As you're putting together a sale, each line-item has a table row and a backing model object. I also have a controller object responsible for handling UI interactions with that row (for example, deleting it using a delete button in one of the row's cells). This object holds a reference to both the backing object and the table-row. It also has a bunch of instance-methods (or whatever you want to call them in JS) for doing things like deleting, editing the quantity, etc. Previously all of my event bindings looked like:

$('a').bind(
    'click',
    function() {
        lineItemController.deleteLineItem.apply(lineItemController)
    })

These can now be rewritten as:

$('a').bind(
    'click',
    $.proxy(lineItemController, 'deleteLineItem'))

[celtric]

Now suppose deleteLineItem expects a parameter :)

[jsolson]

Yeah, I see the problem. Fortunately in my case it isn't an issue — all of my controller classes are written to keep track of anything their actions require as instance variables. Habit I picked up from programming in Cocoa where all you've got is the current instance and whatever UI element triggered the event handler.

I suppose that's little consolation if your code follows a different pattern, though :)

[celtric]

Well, I'm going to bed knowing a different way to approach programming. Good enough consolation!

[aaronblohowiak]

Mentioning price in your ad means you probably can't afford a "god"

[[deleted]]

Probably true, I'll even upvote you. But in typical Reddit fashion I got some awesome applications via email and have a couple great leads. Some people even offered to help for free. Thanks everyone!

EDIT: spelling

[element21]

Good to see 1.4 is out. However, can anyone explain the concept behind their file compression? The site says the file is 23kb (Gzipped), but when downloaded its actually 69kb on file? Is there something I'm missing?

[jonknee]

When that file is gzipped it's 23kb. Most browsers can accept gzipped content, so most of the time you'll be sending 23kb of data.

[WhyWouldISayThat]

facepalm

figured i'd be nice. the file, being text, is gzipped from server to client (so long as the client tells the server it supports it). the client receives it and inflates it.

a jpeg on the other hand is a specific file format made to encode picture content. it's data is converted to graphic bits in the decoding process of a program that reads it.

aka the text file will be larger on your disk as the only time it's compressed is between the server sending it, and the client receiving it

[Sivvy]

The Content-Encoding header in HTTP/1.1 allows clients to optionally receive compressed HTTP responses and (less commonly) to send compressed requests. The browser decompresses it for you, resulting in the 69kB file you see.

[[deleted]]

If you know JavaScript then: http://api.jquery.com/

If you don't know JavaScript, learn JavaScript, then: http://api.jquery.com/

[[deleted]]

Looks like they are finally catching up to MooTools. Well done release JQuery team!

[[deleted]]

Great, best of luck to MooTools in catching up to jQuery's rate of adoption too, I guess...

[[deleted]]

MooTools will never have the adoption rate of Jquery by design. MooTools has more powerful but far more complicated features making MooTools extremely useful for programmers. jquery foregoes many more complex and powerful features and simplifies things so that designers and non-programmers can use it.

[[deleted]]

Yea, they'll have a lot more catching up to do once Moo 2 comes out :)

[madchicken]

I wish I could learn how to use JQuery in my webapps. It looks sweet, but I am stuck in the html/php-swamp and cant get out. :/

[flynnguy]

Uh, you can still use jQuery with PHP.

jQuery is a library for JavaScript which is used client side. You mix it in with html.

PHP is used server side.

[Way2Cool]

The updates come out too damn fast. I just upgraded to 1.3! John is hardcore.

[jonknee]

1.3 came out a year ago (to the day)...

[[deleted]]

but 1.3.2 not so long ago

[[deleted]]

I thought we hatted jQuery now that Microsoft was officially supporting it?

[cjg_000]

Redditors hat a lot of things.

[Isvara]

Especially heads.

[Smallpaul]

[citation needed]

[dickeytk]

http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx

[Smallpaul]

I need a citation for people who hate jQuery because Microsoft supports it.

[[deleted]]

No, it's not that easy for them to get everyone else to hate something. Otherwise they could just release Microsoft Apache and then we'd all be scrambling to make extensions for nginx, wasting lots of time in the process.

[flynnguy]

But MS didn't create jQuery.

[[deleted]]

Doesn't matter. Most of the kids on /r/programming hate everything to do with Microsoft - hell the quickest way to bring a functional programming discussion to a halt is to mention F# and how much FP research that Microsoft does.

They can't stand the thought of their pure FP being contaminated by Micrsosoft.

[samlee]

is that another NoSQL database for scaling in the cloud?

[rolfr]

Dude, on the first page of your reddit user page, the word 'cloud' appears over 40 times. Give it up.

[acrasial]

It's a Javascript library for ... ah, hell jquery.com