jQuery is a Swiss Army Knife (and That's OK)

adam j. sontag
FOWD NYC
8 October 2013

Take it from me, jQuery is truly the greatest thing since sliced bread!
Big Fan of Sandwiches

Why, I'd rather change my name to Quay Jeery than use jQuery!
Holder of Strong Opinions

Big Fan of Sandwiches:

Holder of Strong Opinions:

If you thought those were strong opinions...

...I find that hard to believe

Source: Don't Panic

this old chestnut is actually insidious

it promulgates a belief that:

  • people who take jQuery seriously don't take JavaScript seriously
  • people who take jQuery seriously shouldn't be taken seriously
  • jQuery shouldn't be taken seriously

jQuery is not an elixir!

Source: Esther Aarts

But …

jQuery is not the enemy!

Source: A Midsummer Night's Blog

jQuery is just a tool!

Building a web app is kind of like building a house

Source: Building Our House

jQuery is a multitool

Source: Building Our House

[Slide That Clearly References The Talk Title]

jQuery is just a global constructor with a bunch of handy static methods attached

jQuery Objects 

$("div"); // Looks like a 'magic invocation'
jQuery("div"); // Looks like a good ol' function call
new jQuery("div"); // What's 'actually happening'

In all cases, you get back a jQuery object, an array-like structure that's like much sugarier version of a DOM NodeList.

All for one, one for all

jQuery unifies the experience of:

// Next element sibling of one element with an ID
$("#onlyOne").next();

// Next element sibling of all elements with a class
$(".lots").next();

// A brand new element
$("<div>Hello World</div>");

Each of these returns an object with the same exact interface

Think of jQuery objects as a basic building block of your application
Me

A note on DRY

It's not just about avoiding writing duplicative code, it's about not repeating unnecessary actions. (And jQuery() is an action!)

Don't construct things you don't plan to use

It would be fairly strange to encounter something like the following:

JSON.parse( str );
// or
new RegExp( "^"+str, "ig" );
// or
isNaN( "blarg" );

because when you create things in JavaScript, you typically use a variable so you can actually use them later.

var myObj = JSON.parse( str );
// or
var rDynamic = new RegExp( "^"+str, "ig" );
// or
var valid = !isNaN( "blarg" );

When it comes to jQuery, people seem to forget this

JS Bin

Always™ Cache Your jQuery Selections

All you're doing is calling a function with a useful return value … use it! 

var $articles = $("article");
// In fact, because most jQuery methods return a jQuery object, this works as well
var $articles = $("article").click( fn );

// Once you have one collection, use it as the basis for other queries
var $img = $articles.find("img");

Don't repeat actions, even if they are "cheap"

// Bad
$("a").click(function(e) {
  $(this).addClass("active");
  $(this).parent().siblings().find("a").removeClass("active");
  var o = $(this).offset();
});

// Better
$("a").click(function(e) {
  var $t = $(this),
      o = $t.offset();
  $t.addClass("active");
  $t.parent().siblings().find("a").removeClass("active");
});
JS Bin

Where Can I Save jQuery Objects

As variables: 

var $friends = $(".friend");

As properties of objects:

var catApp = {
  $cats: $(".cat"),
  init: function() {
    this.$cats.click( this.catClicked )
  },
  catClicked: function(e) {
    alert("'Meow', said " + $(e.target).data("name") );
  }
};

Caching selectors can make your app faster, but more importantly, it makes it better organized and easier to talk about!

jQuery is JavaScript, but so is JavaScript
Me

Hey, who you callin' an idiom?

  • There are often idiomatic patterns for common jQuery use cases
  • However, there are also native JS or DOM solutions as well
  • Don't use jQuery for everything just because it's there
$("a").click(function(e) {
  // Bad
  var id = $(this).attr("id");

  // Good
  var id = this.id;
});

Don't waste time looking for "The jQuery Equivalent" of Math.round, parseInt, etc. — you've already found it.

The stereotypical "jQuery Application" with lots of anonymous functions, "anonymous" collections, and a heavy dependence on selectors can quickly devolve into a Choose Your Own Adventure Story About The DOM with no beginning, middle, or end.

The DOM is not your application, it is the visible manifestation of your application.

Put up the walls of your house before you try to paint them.

But I'm building something bigger than a house!

Source: EDP24

You need bigger blocks!

MVC Frameworks like Backbone, Ember, Angular, CanJS all build on top of jQuery, letting you build the larger, application-centric pieces while they take care of fiddling with the DOM, sending Ajax requests, and so forth.

Source: Living Green Choices

Yo dawg, I herd you like Swiss Army Knives

jQuery: My Gateway Drug

SO SHIT LIKE THIS MAKES ME FURIOUS

"The jQuery Dummies"

There are a lot of dumb and painful mistakes you can make with a pocketknife. It's not the knife's fault (usually).

Open Source Engagement

THE SOFTWARE IS PROVIDED "AS IS"

We're All In This Together

Collaborating To Work On The Web

We don't just work on jQuery

BUT JQUERY IS SO...
  • Big!
  • Slow!

To repeat

  • jQuery 1.10.3 is 33kb min+gzip
  • jQuery 2.0.3 is 29.2kb min+gzip

So is this Google Doodle for election day

Most are twice as large!

The solution? Just use One Less JPG

The solution: Use a CDN?

No thanks!

The real solution: Concatenate and Minify

Concatenation and Minification

The realest solution: Custom Builds

Let's talk about performance

Measure Twice, Accuse Once

jQuery is not perfect

Rough Edges

If you're capable of making an informed decision about why jQuery isn't appropriate for your project

and you understand the tradeoffs between your (other library of choice/using all native APIs)

and your whole team does as well

and you know exactly which environments your code will have to run in

and you don't mind occasionally solving bugs that have already been solved for you

...then don't use jQuery!

Just don't make decisions based on "stuff you've heard", or what the JavascrHipsters are doing

[Meaningful concluding quote]
[Significant historical figure]

Thanks!