Pimp my jQuery: Five plugins to replace the features Prototype and Scriptaculous users expect

Brian Dillard, Monday, December 1, 2008 @ 4:53 pm

Ajax pros, especially in the Rails world, often know the Prototype and Scriptaculous JavaScript libraries inside and out. When faced with the prospect of writing on top of the competing jQuery framework, they may quickly stumble upon seemingly missing features.

The culprit? jQuery's less-is-more approach, in which advanced or specialized features come via plugins instead of the core library. The greater reliance on single-purpose plugins gives jQuery a lean footprint and a vibrant ecosystem, but they come at a cost. You often must rope in several plugins to accomplish things Prototype and Scriptaculous can do out of the box.

If you want to encourage your team to step out of the Prototaculous mindset, it helps to have a readymade list of plugins that approximate those libraries' core features. At this point jQuery and Prototype approach feature parity, but once Scriptaculous is in the mix, jQuery relies on multiple plugins to keep up with the Joneses. Here's a quick stab at how to trick out jQuery:

• jQuery UI: jQuery's user-interface library. Some components offer effects functionality similar to Scriptaculous's, while others offer prefab UI components like the ones that are starting to roll out from Prototype UI. If you're looking for tried-and-true effects such as drag-and-drop, this is where you'll find them.
• jQuery FxQueues 2.0: The latest version of Luciano German Panaro's effects-queue plugin. It rewires jQuery's native global effects queue with fine-grained effects queues like the ones that ship with Scriptaculous.
• jEditable: In-place editing for the jQuery crowd. When coupled with other plugins, it offers in-place versions of utilities ranging from time pickers to character counters.
• jQuery Autocomplete: Dylan Verheul's much-revised solution to the original killer app of the Ajax era.
• jQuery Easing 1.3: Advanced animation tweening algorithms for jQuery visual effects.

It's worth noting one additional feature that Scriptaculous offers: A built-in unit-testing library that can be utilized for your outside JavaScript code. Of course, several standalone JS unit-testing solutions exist out in the wild, including the well-known jsUnit. Michael Grosser also offers jqUnit, a jsUnit-compatible testrunner for jQuery code.

What about you, readers? What jQuery plugins give you the most seamless transition from Prototype and Scriptaculous?

agile ajax

Comments: 7 so far

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

1. 

   It seem to be a good day for jQuery posts. One of the things I miss most in jQuery is the fine grained Ajax support. I have been experimenting with multi-part AJAX responses. Prototype had hooks in those browsers that supported it (everything but IE - supprise) to get partial data jQuery does not.

   I would also love to see Comet support in a plug-in particularly Orbited Socket support (http://orbited.org/).

   Comment by Antares Trader, Tuesday, December 2, 2008 @ 3:36 pm

2. 

   Personally, I’d add bindo to this list.

   http://xwisdomhtml.com/bindo

   One of the big differences between jQuery and Prototype is Prototype’s modifications to the Function object which makes it possible to create objects which handle their own events, eg:

   prototype:
   var SomeWidget = Class.create({

   initialize: function(targetElContainer)
   {
   this.clickCount = 0;
   $(’targetElContainer’).observe(”click”,this.clickHandler.bind(this))
   },

   clickCount : function(evt)
   {
   this.clickCount++;
   alert(”clicked ” + this.clickCount + ” times”);
   }
   });

   As far as I know, there is no way to specify the context of an event handler in jquery without using bindo.

   Comment by iolog, Tuesday, December 2, 2008 @ 3:39 pm

3. 

   jQuery Easing ships as part of the full jQuery UI pack. Also, jQuery UI 1.7 will include an autocomplete component (an unfinished version) which is based on Dylan Verheul’s. If you want to fill the sudden voids in this top 5, you might look at these crucial plugins.

   BlockUI
   http://malsup.com/jquery/block/
   Selectively block user interaction, simulating synchronous behaviour without actually locking the browser.

   Form
   http://malsup.com/jquery/form/
   Seamlessly convert forms to use AJAX, and related methods.

   scrollTo
   http://plugins.jquery.com/project/ScrollTo
   Scroll the browser somewhere automatically.

   Less canonical but more fun is a personal favourite, jQuery Flip
   http://lab.smashup.it/flip/

   The list of course goes on and on, but why not roll your own?
   http://www.learningjquery.com/2007/10/a-plugin-development-pattern

   Comment by adam j. sontag, Wednesday, December 3, 2008 @ 1:35 am

4. 

   ** should read (an unfinished version was available in jQuery UI 1.6rc2, which is the current version).

   Comment by adam j. sontag, Wednesday, December 3, 2008 @ 1:36 am

5. 

   hi :
   i do miss functions like gsub and toQueryParams , but one of the guys made a really good job with this plugin :
   http://plugins.jquery.com/project/dotString

   and thats what i like the most

   Comment by mhd zaher ghaibeh, Wednesday, December 3, 2008 @ 2:13 pm

6. [...] dovetailing off our very own Brian Dillard’s blog entry earlier this week, Pimp my jQuery, I wanted to jot down a few of my favorite Ruby on Rails tools that I would find life completely [...]

   Pingback by Pathfinder Development » Pimp my Rails: Five Plugins & Gems to Make Rails Better, Thursday, December 4, 2008 @ 2:02 am

7. [...] Pathfinder Development » Pimp my jQuery: Five plugins to replace the features Prototype and Scripta… (tags: ajax webdesign jquery) [...]

   Pingback by JeremiahTolbert.com » Blog Archive » links for 2008-12-04, Thursday, December 4, 2008 @ 11:30 am

Leave a comment