The Wicket framework is adding animation (effects) support to its capabilities. Instead of reinventing the wheel we are looking at different libraries. Our list of requirements is not that big:
- the footprint of the library should be small
- the philosophy of the library should be similar to Wicket’s
- the library should enable most if not all effects available in most popular libraries
- the code should be clean and work in all modern browsers
- the library should play nice with the leading javascript libraries such as prototype, scriptaculous, dojo, jquery and Yahoo! ui
Now not a very impressive list, but apparently enough to drop scriptaculous and dojo (too large), prototype (not an effects library, can enable conflicts with scriptaculous, rico and others). I haven’t got much experience with jquery, but it seems to cover too much for our taste: we don’t need a full stack Ajax framework (already have that in place), but merely the animation part.
So that leaves Yahoo! Animation and … animator.js created by Bernard Sumption. I discovered animator.js when it was first featured on ajaxian.com and added it to my list of things to check out. Recently I was looking at some effects for our application and wanted to remove dependencies left over from the time Wicket didn’t support Ajax out of the box. Currently we have superb Ajax support and are now ready to take it to the next level.
I already had created a proof of concept, “I’m jealous of the Scriptaculous front page design”, new front page for Wicket. I made my first cut using animator.js and wanted to see how much work it would be to build it with Yahoo! Animation. So I spent a day to rewrite it using Yahoo! and tried to tweak the animation a bit to make it smoother.
You can see the animation on my people.apache.org page (links provided below). I have tried the animations using Safari and Firefox (1.5 and 2.0) and it led me to the following conclusions:
- safari’s javascript is horribly slow
- firefox’s javascript is extremely fast (compared to IE and safari)
- I hate writing javascript
- Yahoo’s event model is a bit more advanced than animate.js, somehow it looks smoother
- Animate.js seems to deliver more snappier animations
- I hate writing javascript
Try the animations yourself and don’t limit it to one browser. Comments are welcomed and appreciated. Press the back button to return here and select the other animation:
- Wicket homepage using Yahoo! Animation
- Wicket homepage using animator.js
Enjoy!
I tried both pages with Firefox 2.0 and MSIE 6.0. Firefox is fine in both cases, and I like what you have created
I think it would be very nice having such a startpage!
Sadly, MSIE 6 is just a mess, as you probably already feared. The result is equally bad in both cases:
The text boxes (left and right) are visible from the beginning. Along with the bouncing Wicket logo, the large text “Wicket” is horizontally moving at the top of the window. The license text is visible at the top of the page, the word “Wicket” is moving over it.
yahoo.html also produces a javascript error, but the error message is not very helpful (line 1, column 1, “Object expected”).
When the animation is finished, the page looks almost like in Firefox, just the text is now very blurry. It looks like it is displayed twice with one pixel offset.
Screenshot: http://www.2rue.de/stuff/wicket_startpage.png
This last mis-effect is also on script.aculo.us startpage, but they seem to do something at the end of the animation, as it is visible only for a short time. After that, the text appears normally.
Yeah MSIE 6 is a real bitch, as always.
In my current wicket project we decided to scrap cool effects for MSIE users if we cannot get it to work within a decent timeframe.
I tried them both on Safari 2.0.4 and Firefox 2.0.0.2 on my MacBook Pro.
The Yahoo version seems to suffer in both browsers. When reloading the page some frames are lost and you often see only the few last frames in the animation. This happens on both browsers but with different outcome.
The animator version runs much more complete, with all frames drawn at all reloads. Interestingly, the animation is slightly more than twice as long in Firefox. I don’t know if Firefox is slow or if Safari runs it too fast, but the most pleasant to view is actually Firefox. Except for the speed difference, animator seems to render more consistent on both browsers.
So in my eyes, animator.js is a clear winner.
[...] Have a look at Martijns test of Yahoo Animation vs. animator.js, and tell Martijn what you think. [...]
Actually, I had to tweak the animator.js version to speed up the animation in safari. The animation renders all intermediate frames in animator.js, and on safari that runs very slow with the default settings. I tried increasing the interval, but that didn’t give the right results, so I cut down the time for the animation instead (use the source, Luke!)
Firefox just runs the animations much, much better in both yahoo and animator.
Yeah, verry nice indeed. I’d agree that Yahoo apears smoother (using Firefox). The rest I didn’t check. Are you aware of Firebug? http://www.getfirebug.com/ Hating JavaScript too, it at least eased my pain with it a little bit.
Why not check out moo.fx? http://moofx.mad4milk.net/
I would highly recommend you look again at jQuery. You discounted it because it “covers too much”. If you look at the jQuery reference documentation (http://docs.jquery.com/Main_Page) you will notice that it covers a very nice sweetspot of functionality. It is also one of the fastest performing libraries for selector-based development, and they continuously obsess on performance.
Of the three (YUI, Sciptaculous, and jQuery) that I have used, jQuery is the first that allowed me to extend it easily and sanely when I needed. There are a ton of plugins (jQuery extensions) to enable additional effects. One of the most polished and complete is called Interface (http://docs.jquery.com/Plugins:Interface).
jQuery weighs in at only 19kb packed, and designed to play nicely with the other major libraries, jQuery meets all of your criteria.
As a self-confessed person who “hates writing Javascript”, it will be interesting to see where this leads. I believe that you truly must embrace the elegance of Javascript in order to make it work well in these next-gen web environments.
The biggest advantage of animator.js is that it is completely orthogonal to other libraries and focusses on just one thing: animation. It also doesn’t require any other base libraries, minimizing the dependencies.
The library is quite stable and mature so I expect it to keep working for a whole Wicket release cycle.
Yeah, Safari js is pretty slow; I ran into that doing RSA in javascript. Newer WebKit builds are supposed to be much better, but with the OS 10.5 delay we’ll have to wait even longer for a fix. Still, Safari’s my favorite browser because it does job number one (rendering text) the best.
I’m seeing exactly the same thing with yahoo, that it drops the beginning frames most of the time (at work, opera linux). The animator version always renders from the start, but flickers badly.
You definitely want to use Ext. http://www.extjs.com.
It is a wrapping library that is very much community tested and abstracts away various other libraries such as Prototype/JQuery/and YUI. It has a gorgeous component lib, but I think it would function very well as a low-level library that lets the user (in this case a Wicket programmer) choose their JS provider. I typically use it with YUI since I find YUI’s seem to be consistently the fastest to my eye.
incidently, ext sounds like such a great match for wicket, you should just talk to Jack directly.. pop on over to the forum- He’s also a Java guy. (or was at some point.)
Gents, this is not a pimp my ‘complete Ajax library that also happens to do animation’ post. It is focussed on providing specific functionality for adding effects and animation to your Wicket application without tying into a specific framework (other than Wicket).
Ext-js is LGPL licensed, so we can’t ship it with Wicket core, and /if/ we’re going to support it, it most likely will end up at http://wicketstuff.org Given that Jack wants to make a living from ext-js, I can’t blame him for using the LGPL license.
I do think that ext-js looks pretty awesome, and it has been on my radar for months. Just waiting for an excuse and time to use it.
Just for fun I built the latest Webkit and now runs Safari with it. The Yahoo version now runs very smooth and elegant when opening a new window, but if I reload the animation will only show the last frames.
The animator version now runs WAY too fast and not so smooth, but it’s much more consistent when you reload.
I agree with Martijn that animation support in Wicket should be done without sideeffects like lots of new dependencies or license woes dropped in users knees. And yes, I too hate writing JavaScript even if I did make some pretty good money doing it.
Is the homepage you demo written using Wicket? With the effects provided by the framework?
If so, can you provide the wicket project?
No, it is static HTML (no need for serverside interaction). The effects are kindly provided by animator.js and Yahoo! Animation.
From the looks of it, animator.js will become the part of Wicket in the near future.
In Firefox 2.0 on Windows XP, the Yahoo animation was MUCH more smooth than the Animator one, and I don’t know if that’s just a matter of tweaking of the code.
Like many Java people, I used to hate Javascript, but I’m finding now that I have a good JS library behind me, that it’s not bad at all. My library of choice is JQuery, but I agree that it is not a good fit for this. It is compact, elegant, and efficient, but it’s built-in animation is relatively limited, and it does too much else. It’s not nearly as intrusive or as large as Prototype or Dojo, and if Martijn were looking for a good overall JS library to plug into Wicket, I would highly recommend it.
As it is, if Animator can be made as smooth as the Yahoo library, I would go for it.
I have to agree with Rüdiger Schulz , I am experiencing the same problems with Internet Explorer 7. I tried also Opera 9.10, animation is much more smoother and nicer with animator than yahoo. Animation also begings before the all resources are loaded.
[...] June 25th, 2007 inspired by this post on wicket-diary, i decided to take this in my own hands and see how far i’ll get. [...]
Have you looked at MochiKit for this purpose?
Wicket animation using iAnime.js…
I found a good blog entry comparing various animation libraries, which has implemented Wicket homepage in two different animation libraries. As a comparison, I have implemented the same animaition using iAnime.js. Wicket home page using iAnime.js Becau…
I have implemented the same animation using iAnime.js. Please take a look.
http://satoshi.blogs.com/uie/2007/12/wicket-animatio.html
Although iAnime.js is a Javascript library, the entire animation sequence can be described as an array of JSONs, which makes it a lot easlier to generate it on the server side.
Have a look also at AnimeJ library (http://www.codeplex.com/animej)
You should also check out jsAnim, http://www.jsanim.com. I think this is the most fully featured one, but I guess I’m biased.