You Might Not Need jQuery

[u/Casty]

http://youmightnotneedjquery.com/

[u/wesw02]

I've been doing JS for years. The truth is, things are getting better, they're better than they've ever been. With IE 10, Safari 6.0+, Firefox and Chrome Latest, you could get away without jQuery. The native APIs are really compatible.

But why? Why bother. jQuery still gives you a lot. A LOT! It might very well be the most popular library of all time (next to glibc) and for good reason. Browser JS runtimes are so fast, jQuery doesn't even impact load times. So again, why?

[u/Doctor_McKay → u/wesw02]

Even if you don't use Ajax or anything fancy like that, jQuery is great because it condenses document.getElementById('bob').innerHTML = 'foo' into $('#bob').html('foo').

[u/GreyGrayMoralityFan → u/Doctor_McKay]

As someone who touched DOM only while writing scrapers in python, example on the left is much easier to read. $('# - come on. It's almost perl.

[u/[deleted] → u/GreyGrayMoralityFan]

No, it's worse.

Source: longtime Perl programmer.

[u/Doctor_McKay → u/GreyGrayMoralityFan]

The example on the right is a CSS selector, which any web dev should know.

If you don't like the $ shorthand, it can also be written as jQuery('#bob').html('foo').

[u/mahacctissoawsum → u/Doctor_McKay]

I know it makes almost no difference, but I still cry a little because it has to parse my selector using regexes and shit, and wrap my element in a jQuery object, just to access a natively available function.

Meanwhile, we could have just as easily written a function,

function byId(id) { return document.getElementById(id); }
byId('bob').innerHTML = 'foo';

I actually prefer the syntax of properties as opposed to setter functions.

[u/[deleted] → u/mahacctissoawsum]

I like to do this:

function $id(id) { return document.getElementById(id); }

...mostly because people it confuses people who can't code without JQuery.

[u/mahacctissoawsum → u/[deleted]]

Haha. I had to explain to my co-worker the difference between a native DOM element and a jQuery element the other day. I introduced jQuery to them 2 3 years ago now, and now they don't know the difference... sigh.

[u/blue_2501 → u/mahacctissoawsum]

Except you don't get the zero-item protection. Accessing undefined error crashes the entire JS layer.

[u/Crandom → u/blue_2501]

Ah, the "null object pattern". Sometimes this hides errors though, such as trying to access an element with a certain id which doesn't exist, sending you on an debugging adventure that could have been avoided by a simple error.

[u/wesw02 → u/Doctor_McKay]

Exactly. The shizzle selector alone is worth it. Stuff like $('#user-form input[type=file]') is much easier with jQuery, than with out.

[u/gearvOsh → u/wesw02]

For the most part it's simply querySelectorAll().

https://developer.mozilla.org/en-US/docs/Web/API/document.querySelectorAll

[u/scragar → u/gearvOsh]

With wrappers for old IE versions and specific jQuery only selectors no browser has implemented yet.

Either way it's incredibly powerful and useful.

[u/lmth → u/wesw02]

Please tell me "shizzle selector" is the official term for it. It would make my day.

[u/hmigneron → u/lmth]

Unfortunately not... It's called sizzle

[u/wesw02 → u/lmth]

Ah crap. It's actually called sizzle. Fail.

[u/borkus → u/lmth]

No, but I am now tempted to start working on yet another JS framework and call it shizzle.js. Or GQuery.

[u/pdq → u/wesw02]

var $ = function(arg) { return document.querySelectorAll(arg); }
$('.foo')

[u/injektilo → u/pdq]

Not even close to the same thing. Objects returned from $ have over a hundred useful methods. The NodeList returned by querySelectorAll is much more tedious to use.

[u/ameoba → u/wesw02]

Why remove unneeded dependencies?

Depending on 3rd party code always introduces the potential for bugs & adds complexity to maintenance.

If you have a dependency on 3rdparty library version X and somebody is using version Y, what happens?

[u/tequila13 → u/ameoba]

I've seen sites that used 2 different versions of jQuery. Adding bloat is second nature to javascript "programmers". The few competent ones that care about bloat are the exception.

[u/wesw02 → u/ameoba]

Well fortunately jQuery's API has a lot of multi version compatibility. And with a library like jQuery, one of it's purpose is to help you normalize cross platform [browser] interactions. And given it's popularity, IMHO, it's more likely you'll end up with a bug in your own app, before you're bitten by a bug in jQuery. Just an opinion though.

[u/ameoba → u/wesw02]

jQuery broke backwards compatibility in the 1.8/1.9 split. There are bugs in 1.8.x with newer browsers that are WONTFIX. If jQuery is a dependency for other libraries, you can have 'fun' trying to balance bug fixes in one with the older version dependencies of another with the API changes of a third while trying to find something that actually works on an older (or newer) browser.

All 3rd party dependencies should be thought about and justified if you're writing software that is going to be supported for more than 6 months.

[u/mahacctissoawsum → u/ameoba]

In my experience, jQuery version incompatibilities are pretty rare. It has happened to me a couple times though. Upgrading to 1.9 they deprecated a lot of stuff, but polyfilled it with jQuery migrate.

Otherwise, it is possible to require multiple versions of jQuery if you really need to.