Ask HN: Why is Prototype.js so inconsistent?

2 points

17 years ago

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?