jQuery plugins: Five tips for separating the good from the bad and the ugly

Brian Dillard, Monday, July 21, 2008 @ 4:41 pm

I opined recently that jQuery plugins can be more trouble than they're worth. That said, they're often indispensable. True, the worst plugins suffer from bloated code, confusing APIs and too many features. But the best provide instant black-box functionality with just a little configuration. The trick is figuring out which plugins are worth the effort and which ones aren't. Here are five tips for doing just that.

1. Peek under the hood

   The quickest way to determine whether to place your trust in a plugin is to look at the actual code. Does it come with a fully commented version or only a minified production version? Assuming the former, how well is the code factored? Does it follow the standard plugin development pattern? Does it add just one new overloaded method to the jQuery object, or does it litter the namespace with random, one-off methods? Does it include smart defaults for instant invocation, or must you pass in a cryptic options hash with way too many possible configurations? In short, does it achieve the same quality level you aspire to in your own code?

2. Read the book - or at least the docs

   Assuming the actual code passes the sniff test, check out the documentation. Does it cover all the bases, or is it just an overgrown blog post? Is your particular use case covered? Are the examples real-world ones, or radically simpler ones than the use to which you'll be putting the plugin? Time spent overcoming the "missing manual" syndrome is time better spent writing your own solution to the problem.

3. Check the version history

   Is the plugin hosted at Google Code or some other public repository? Failing that, does its download page at least offer a dated archive of earlier versions? Assuming the answer to one of these questions is "yes," how often has the code been updated? Is this a viable project, or demoware from 18 months ago that hasn't seen a maintenance release, let alone new features, since it was launched?

4. Parse the stylesheets

   jQuery UI now offers custom themes, but lots of older plugins include their own, required stylesheets. The CSS code in these assets is just as big an indicator of quality as the JavaScript itself. If the included stylesheets make global modifications to base HTML tags or otherwise interfere with your own styles, stay very far away.

5. Fire up an obscure browser

   Assuming the plugin offers some live demo code, fire up Safari 2.x for the Mac, Safari 3.x for Windows, IE6 or any other non-Mozilla browser. Does the demo work there? If not, chances are this plugin's not for you. jQuery itself papers over the most fundamental cross-browser issues. But for date-pickers, lightboxes and other UI-intensive components, the devil's in the details - and those details need to work everywhere.

Up next: Tomorrow, I'll play favorites and actually review the better jQuery plugins I've employed. Along the way, I'll explain why each one's a winner.

agile ajax

Comments: 1 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. [...] Yesterday I discussed how to separate the jQuery plugin wheat from the chaff. Today, I offer a completely subjective and biased list of jQuery plugins to know and love. [...]

   Pingback by Pathfinder Development » Five jQuery plugins that are a joy to use, Tuesday, July 22, 2008 @ 3:16 pm

Leave a comment