Ask HN: Why is Prototype.js so inconsistent?

[PrototypeWoes]

I would consider myself a very experienced front-end web developer, I usually use jQuery and can almost always get it to do exactly what I want in a very intuitive way. I am forced to use prototype/scriptaculous for a small project (really just some light animations/dom manipulation on a page), and I have to say that I am really shocked with how inconsistent and confusing it seems. I know that this combination is very popular within the Rails community and I am wondering if I can get some help on a few issues I am having. I think I must be doing certain things wrong but I cant seem to find the answers anywhere.

Below is a list of oddities that I am running in to, I would really appreciate anyone familiar with prototype to take a read through them. I am not interested in starting a JS library war, only in knowing why I might be finding it so difficult to use.

- Why does $('element_id').getStyle('height') only return a value if the value has been set with inline css (ie by doing something like style="height: 40px" on the element). If the value is set in an external CSS file or in the HTML head, the .getStyle function returns 0.

- Why can't I do an Effect.Appear (and others) on an element by class name, I know that prototype should let me do a $$('[any css selector]'), but with something like Effect.Appear I apparently have to set an ID on my target element and use that. I can do "Effect.Appear('idname');" and "Effect.Appear($('idname'));" but not "Effect.Appear($$('.classname'));" Does prototype force you to use IDs for every element you want to interact with?

- Why is it "Effect.Fade" (capital F) but "Element.hide" (lower-case h) - I know that one is technically prototype and one is script.aculo.us, but come on.

- Why doesn't this example work consistently? http://dl.getdropbox.com/u/128280/prototype-test.html The small box should always start animating at the same position, it works if you leave your mouse off the box for a while, but if you bring it back over within a few seconds or so it starts animating at the previous ending position and flickers a lot.

- Sometimes i have to do "new Effect.something" and other times I don't need the "new". Eg: I can just do "Effect.Appear" but I have to do "new Effect.Move"

- I always use Firebug for catching typos and debugging my jQuery code, but I immediately noticed that with Prototype, many errors just cause the rest of the JS to not function, but no error is listed in Firebug. This is frustrating, especially for a new user who is not comfortable with all the various syntax. Is there anything I can do to catch these errors?

Thanks!

[kangax]

It looks like you're using some older version of Prototype. `getStyle` should return computed style of an element (there are bugs but they are more like edge cases). If something doesn't work, file a bug (with a reproducible test case, of course) and we'll look into it :) `Element.fade` is starting with lowercase `f` (perhaps it was uppercased in older versions of scripty). `Effect.appear` can be invoked on a collection with `invoke` - `$$(cssExpr).invoke('appear')`.

Consider asking these questions on Prototype mailing list where there are always people willing to help.

[robin_reala]

I know you don’t want to start a framework war (and I don’t either), but for my work in Rails the first thing I do when starting a new project is install jRails ( http://ennerchi.com/projects/jrails ). Makes my life a whole load easier. Rails 3 is apparently planning to be more agnostic when it comes to JS frameworks, so if you’re not a Prototype fan this should be good news.

[kqr2]

You should prefix your question with an "Ask HN: <question>" to differentiate it from a linked article.

[PrototypeWoes → kqr2]

Thanks! Updated.