jQuery: The JavaScript Library That Respects Your Time

Cross-browser JavaScript in 2006 means writing everything twice, once for Internet Explorer and once for everyone else, then testing until your eyes blur. Every developer who has fought the browsers has a folder of hard-won utility functions and a mild flinch.

So when a library arrives with the motto ‘write less, do more,’ skepticism is the professional response. We have spent three weeks putting jQuery 1.0, released August 26 by John Resig, through real work. The skepticism did not survive.

The idea: you already know the selectors

jQuery’s core insight is almost embarrassingly simple. Developers already know CSS selectors. We use them all day in stylesheets. jQuery lets you use the same syntax to grab page elements in JavaScript, in every browser, with the quirks absorbed by the library.

Then chained commands act on the whole selection at once. Hide it, style it, attach a click behavior, all in a line or two that reads almost like a sentence. The old way meant loops, browser-detection branches, and dozens of lines for a simple show-hide feature. The jQuery version is three lines.

Multiply that across a whole interface and the math changes what is worth building. Polish that used to blow the estimate now fits inside it.

Against the incumbents

The comparison everyone asks about: Prototype is the established choice, and it is a fine library we have used happily. Two things push us toward jQuery.

First, manners. Prototype modifies JavaScript’s core objects, which sometimes collides with other scripts on the page. That is a real concern when client sites carry third-party code. jQuery stays in its lane and plays politely with whatever else loads.

Second, weight. jQuery with its effects is lighter than the Prototype bundle, and on the connections many visitors still use, twenty kilobytes is not nothing.

Fairness requires the other column. Prototype has a two-year head start on documentation and battle-testing, and jQuery at 1.0 is exactly as young as the number says. Libraries this new sometimes flame out. Our judgment is that this one is designed well enough to last.

Three patterns we’re shipping with it

• Form help. Flagging a missed field on the spot, before the server round trip. The server still validates everything, always, because JavaScript is an enhancement, never a gate.

• Reveal-and-collapse interfaces. FAQ answers and secondary details that expand smoothly. The content stays in the HTML for search engines and script-less visitors. The elegance layers on top.

• Simple AJAX, done right. jQuery collapses the background-request ceremony into one line, which makes it much easier to build the pattern we argued for in April: pages that work normally, enhanced to update in place where it genuinely helps.

Notice the thread. Everything works without the script, then works better with it. jQuery does not enforce that discipline, but it makes the right architecture the easy path, which is more than most tools manage.

A taste of the syntax

One example, because the economy is the argument. Say every external link on a page should open in a new window and carry a marker class. The traditional version runs twenty-odd lines with two bugs waiting. The jQuery version: select the links that leave your domain, add the class and target, done in three readable lines.

Readability is the underrated half. Code that reads like its own documentation is code a team can maintain without archaeology, and maintenance is where client money actually goes over a site’s life.

The plugin scene, and a caution

A plugin system shipped with 1.0. The community is already producing form helpers, table sorters, and galleries. A lean core with a thriving add-on ecosystem is the pattern that made Firefox durable, and its early energy here is a good sign.

The caution comes free with the enthusiasm. Plugins are community code of community quality, and each one you adopt is a dependency you now own. Our rule: read the source before shipping it, prefer plugins with active authors, and never install what you could write in ten lines yourself.

Hedging the bet

Because young libraries do sometimes die, we are adopting with an exit in mind. Our jQuery use follows the enhancement rule, so the sites still function if scripting vanishes entirely. The worst-case failure is losing polish, not losing pages. And our custom behaviors live in clearly separated files, so swapping libraries later would be surgery, not amputation.

What clients actually buy here

Clients do not buy libraries. They buy outcomes with maintenance bills attached. The outcome here: interfaces with the finish people have expected since Gmail reset the bar, delivered inside budgets that used to rule them out.

The estimate line moves accordingly, and clients should hold us to it. Behaviors that priced at days of custom work now price at hours. We would rather pass that through as lower cost or better polish than simply pocket it. Agencies that keep billing 2004 hours for 2006 tools will enjoy a year or two before their prospects learn better questions.

We are standardizing on jQuery for new work as of this month. We expect it to be everywhere within a couple of years, because it respects the two resources developers never have enough of, time and patience. If we are wrong, we will say so.