jQuery, You & I: Lookin' Good Together

adam j. sontag & Rick Waldron

How People Think jQuery Works

How jQuery Actually Works

Joining Up

But I'm Not A JavaScript Ninja (Yet)

That's OK!

There's still a lot you can do if you want to help - and you might just learn a bit in the process.

Support

There are a lot of jQuery users out there - a lot of them need help!
The easiest, fastest way to have an impact!
A great way to get exposure to a diverse set of problems, broaden your familiarity with the API.
Debug in advance! Learn the solutions to problems before you encounter them yourself.

Where?

Documentation

Help EVERYBODY at once!
Existing docs are constantly being improved.
New features need documentation - learn how they work first!

Where?

People Who Make Websites

Websites are more than Just JavaScript™
Plugins site, learning site, new ThemeRoller...the list goes on
JavaScript and jQuery *do not have* to be your main gig for you to make a big impact.
Designers, backend developers (PHP, Ruby), copy editors... we don't really turn people away!

Infrastructure

600,000 visits per day!
Those pages don't just wake up in the morning and serve themselves!
No, but seriously...
If server administration is "your thing," we want you you to do your thing!

Testing Tools

QUnit (repo)
TestSwarm (Jenkins Integration)

Bug Triage

Between jQuery and jQuery UI, we've seen nearly 20,000 bugs filed.
Some of them are critical release blockers...
Some of them are obscure edge cases...(some that we Won't Fix)
And some of them are absolute garbage...

Our Bug Tracker Works - You Don't Have To Test It

For more of this fun, come to the "Dramatic Readings of Awesome Tickets" breakout session later

Bug Triage, cont'd

Separate the wheat from the chaff
Keep an ear to the ground
THE ULTIMATE way to force yourself into the guts of jQuery...
...and then you can actually start WORKING ON JQUERY CORE!

Let's Write Stylish Code

Looking back...

Everyone else imagines this...

It REALLY is like this

Contract-Based, Unified-Collaboration

Today, your code might look like this...

Without a style guide, over time it might look like this...

Gross!

When really, it should look like this...

Why?

Encourages Contribution

Open Source, Distributed Development, Remote Teams, etc.

Waste Less Braincycles

Your brain is a parser - optimize code for your brain!

Future you will be glad you did

So follow along! http://gul.ly/l9

What if that mess was actually code...

...: function(obj){
if(!obj||jQuery.type(obj)!='object' || obj.nodeType||jQuery.isWindow(obj)) return false;
try{ if(obj.constructor && !hasOwn.call(obj, 'constructor') && !hasOwn.call(obj.constructor.prototype, "isPrototypeOf"))
      return false;
}catch(e){return false;}
  for(var key in obj){}
  return typeof(key)=="undefined"||hasOwn.call(obj, key);
}

WTF? So, if obj is not falsy or not typeof object or has a nodeType property or is a window... return false?

Now it wants to check for constructor and prototype.constructor and it might throw an exception?

Um... empty for-in?

If key is undefined? But key was never set to anything...?

How about that awesome horizontal scroll bar?

Be generous with whitespace

becauseruntogethercodeishardtoread

...: function( obj ) {
  if ( !obj || jQuery.type(obj) != 'object' || obj.nodeType || jQuery.isWindow(obj) ) return false;
  try {
    if ( obj.constructor && !hasOwn.call(obj, 'constructor' ) && !hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) return false;
} catch(e) { return false; }
  var key;
  for ( key in obj ) {}
  return typeof key == "undefined" || hasOwn.call(obj, key);
}

We can improve this by commenting with great fervor!

Tell WHY this code does what it does

What can we expect to happen if this code was removed. ( http://gul.ly/d3v )

...: function( obj ) {
  // Must be an Object.
  // Make sure that DOM nodes and window objects don't pass through, as well
  if ( !obj || jQuery.type(obj) != 'object' || obj.nodeType || jQuery.isWindow(obj) )return false;
  // Because of IE, we also have to check the presence of the constructor property.
  try {
    // Not own constructor property must be Object
    if ( obj.constructor && !hasOwn.call(obj, 'constructor' ) && !hasOwn.call(obj.constructor.prototype, "isPrototypeOf") )return false;
} catch(e) {
  // IE8,9 Will throw exceptions on certain host objects #9897
  return false;
  }
  // Own properties are enumerated firstly, so to speed up,
  // if last one is own, then all properties are own.
  var key;
  for ( key in obj ) {}
  return typeof key == "undefined" || hasOwn.call(obj, key);
}

Quotes... Single? Double?

Tabs? Spaces?

IT DOESN'T MATTER... Consistency Rules, Ok?!

No, seriously... Don't mix them.

jQuery mandates tabs and double quotes. kthx

Getting back to our code...

When writing Blocks, omitting braces is weird, confusing and criminal

There is also no need to put EVERYTHING in your condition on the same line

...: function( obj ) {
  // Must be an Object.
  // Make sure that DOM nodes and window objects don't pass through, as well
  if ( !obj || jQuery.type(obj) !== 'object' || obj.nodeType || jQuery.isWindow(obj) ) {
    return false;
  }

  // Because of IE, we also have to check the presence of the constructor property.
  try {
    // Not own constructor property must be Object
    if ( obj.constructor &&
      !hasOwn.call(obj, 'constructor' ) &&
      !hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
      return false;
    }
  } catch(e) {
  // IE8,9 Will throw exceptions on certain host objects #9897
  return false;
  }
  // Own properties are enumerated firstly, so to speed up,
  // if last one is own, then all properties are own.
  var key;
  for ( key in obj ) {}
  return key === undefined || hasOwn.call(obj, key);
}

Recap.

jQuery.isPlainObject()

isPlainObject: function( obj ) {
  // Must be an Object.
  // Make sure that DOM nodes and window objects don't pass through, as well
  if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow(obj) ) {
    return false;
  }

  // Because of IE, we also have to check the presence of the constructor property.
  try {

    // Not own constructor property must be Object
    if ( obj.constructor &&
      !hasOwn.call(obj, "constructor") &&
      !hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
      return false;
    }
  } catch ( e ) {
    // IE8,9 Will throw exceptions on certain host objects #9897
    return false;
  }

  // Own properties are enumerated firstly, so to speed up,
  // if last one is own, then all properties are own.

  var key;
  for ( key in obj ) {}

  return key === undefined || hasOwn.call( obj, key );
}

WIN!

Questions, Comments, Rants & Raves

Resources

Idiomatic.js http://gul.ly/d3r

Extreme Negative Commenting http://gul.ly/d3v

JSHint http://jshint.com

jQuery Core Style Guide http://gul.ly/l9

Google JavaScript Style Guide http://gul.ly/d3q

Crockford's Code Conventions http://gul.ly/d3p

@rwaldron & @ajpiano on Twitter/IRC