Doll up your website with great effects and widgets by using JQuery UI or Script.aculo.us. It is becoming easier and easier these days to impliment all sorts of effects to your site with just a few lines of code. One question many people have is which one of these interfaces reigns supreme over the other? The answer is not really that simple considering how many different flavors of designers, code monkeys, and developers there are today.
There has always been a huge argument over the file size when using any plugin… “In the left corner weighing in at 450.5KB is JQuery UI! In the right corner weighing in at 621KB is Scriptaculous!”. It does not seem like that big of a difference, I mean we are only talking about 17oKB difference between the two. If we were to minimize both of these files and enable file compression on our servers I doubt you could even notice a difference on a good 56KB modem connection. So what are the benefits of using one over another?
Round 1: Effects
Visual appeal is almost as vital as functionality these days. Even if your site functions better than most you still need the eye candy to attract and retain visitors. These two APIs go head to head when it comes to styling your page.
| Effect | JQuery UI | Scriptaculous |
| Appear | YES | |
| Blind | YES | YES |
| Bounce | YES | |
| Drop | YES | YES |
| Explode | YES | |
| Fade | YES | |
| Fold | YES | YES |
| Grow | YES | |
| Highlight | YES | YES |
| Morph | YES | |
| Move | YES | |
| Opacity | YES |
| Effect | JQuery UI | Scriptaculous |
| Parallel | YES | |
| Puff | YES | YES |
| Pulsate | YES | YES |
| Scale | YES | YES |
| ScrollTo | YES | |
| Shake | YES | YES |
| Shrink | YES | |
| Slide | YES | YES |
| Squish | YES | |
| Transfer | YES | |
| Tween | YES |
Scriptaculous wins round 1 hands down with the most available effects.
Round 2: Implimentation
We will compare how a few of the similar effects are called as well as additional functionality such as parametrization.
Effect Call: JQuery UI
Effect Call: Scriptaculous
The call to run the effect is very similar on both of these API’s. The code required to call an effect is also similar in length. Let’s take a look at the options available when running an effect.
Effect Blind Options: JQuery UI
Callback: Something to execute after the effect
Effect Blind Options: Scriptaculous
duration: Length of effect
On one hand JQuery allows for a callback, in the other you can scale with Scriptaculous. This round comes down to user preference, if you are looking for more options for your chosen effect then Scriptaculous wins, if you are looking for callback functionality then JQuery UI wins.
The result of this round: Draw
Round 3: The Add Ons
JQuery UI has Widgets and Interactions, Scriptaculous has Behaviors and Controls. Contained within these two areas we have things such as: draggables, droppables, sortables, sliders, progress bars, Ajax controls, and more. Jquery UI has a great interface in which you can edit themes which will pump out the required code to implement, Scriptaculous does not have this. When we talk about Ajax controls Scriptaculous has several features available where the JQuery UI has none.
The overall comparison of the add ons is rather even and it comes down to what the user desires again. It would be great to have the functionality of both combined into one.
Result of this round: Draw
The Winner Is….
Overall I would call Scriptaculous the winner, I personally beleive it is far ahead of JQuery UI as far as options and effects. While both of these are great tools to use you still have to pick and choose the effects or features you want and the ones you can live without.
![[del.icio.us]](http://scriptperfect.com/wp-content/plugins/bookmarkify/delicious.png)
![[Digg]](http://scriptperfect.com/wp-content/plugins/bookmarkify/digg.png)
![[dzone]](http://scriptperfect.com/wp-content/plugins/bookmarkify/dzone.png)
![[Facebook]](http://scriptperfect.com/wp-content/plugins/bookmarkify/facebook.png)
![[Furl]](http://scriptperfect.com/wp-content/plugins/bookmarkify/furl.png)
![[Google]](http://scriptperfect.com/wp-content/plugins/bookmarkify/google.png)
![[LinkedIn]](http://scriptperfect.com/wp-content/plugins/bookmarkify/linkedin.png)
![[MySpace]](http://scriptperfect.com/wp-content/plugins/bookmarkify/myspace.png)
![[Newsvine]](http://scriptperfect.com/wp-content/plugins/bookmarkify/newsvine.png)
![[Propeller]](http://scriptperfect.com/wp-content/plugins/bookmarkify/propeller.png)
![[Reddit]](http://scriptperfect.com/wp-content/plugins/bookmarkify/reddit.png)
![[Slashdot]](http://scriptperfect.com/wp-content/plugins/bookmarkify/slashdot.png)
![[Spurl]](http://scriptperfect.com/wp-content/plugins/bookmarkify/spurl.png)
![[StumbleUpon]](http://scriptperfect.com/wp-content/plugins/bookmarkify/stumbleupon.png)
![[Technorati]](http://scriptperfect.com/wp-content/plugins/bookmarkify/technorati.png)
![[Twitter]](http://scriptperfect.com/wp-content/plugins/bookmarkify/twitter.png)
![[Email]](http://scriptperfect.com/wp-content/plugins/bookmarkify/email.png)
Good article. JQuery has some effects in basic, ie. ‘fade’, ‘opacity’ alternative fadeTo(). Because jQuery UI doesn’t work without jQuery, we can say that jQuery UI has these effects too.
If you are using all(or several) of those effects, I assume you’ll be using prototype and scriptaculous heavily.
In such scope, it scares me when I see this http://blog.creonfx.com/javascript/mootools-vs-jquery-vs-prototype-vs-yui-vs-dojo-comparison-revised , because I’ve been bitten before by poor performance of a js library.
PS: That case was a rich interface with thousands of selectors and an old version of jquery(pre-sizzle)
The implementation code for Scriptaculous can be shortened to: $(‘id_of_element’).selectedEffect({ options });
@yed, this is very true and I did miss this point in comparison. In my opinion though Scriptaculous still offers more options for the effect functions as well as a wider array.
@Mustang, that comparison is very nice and well thought out, I would like to see more of the standards they used when testing. They make no mention of the hardware used and which options were chosen within the browsers.
Scriptaculous is way ahead of jQuery when it comes to proper queue and scoping, these things are at the core of a good animation library.
In jQuery an effect scope is bound to the element on which the effect takes place, a lot of people have written plugins in attempts to create global and shared scopes to fix this flaw. There’s a queue/dequeue priciple in jQuery that does nothing to fix this and even introduces more limitations by not playing nicely with animate.
Scriptaculous got all of this right. It’s Effect.Event alone proves that jQuery’s queue/dequeue alongside of animate is a terrible implementation.
If your goal is to write real application in Javascript you shouldn’t be looking at jQuery. You will be spending a lot of time fixing flaws like the effect-queue I’ve just described. jQuery has these design flaws because at it’s core is DOM manipulation which has been taken too far. The whole library is coded around chaining up code to work on DOM nodes, this approach shouldn’t have been carried through into the effects part of the library since it brings along limitations.
The dom query approach, as easy as it might seem for newcommers, is also jQuery’s biggest flaw. Prototype and Scriptaculous are thought out much better, it’s the obvious choice if you are a coder that knows what he’s doing with Javascript.