Fun in the Browser
Prototype brings two unrelated (at least at the conceptual level) things together. The first is a whole pile of things that make make the browser environment more palatable. The $ function is but the tip of the iceberg here. Some of my favourites include
- $$ (and Selector class that powers it): find all the elements in the document matching a CSS rule. The great thing here is that it knows a whole pile of tricks, even if you’re browser doesn’t, so you can go from the basic $$(‘p.alert’) (all paragraphs with class alert) to things that are a little more fun:
( all elements inside something with class ‘sources’ that have the class ‘source’ but not the class disabled).
- down, next, up etc… Navigating the dom by hand is the biggest pain in the arse since Vlad the Impaler, but these functions make it oh so easy. The up function gives you the parent element, down gives you the first descendant and so on (and of course you can say ‘give me the 3rd such element’). That in itself is a modest improvement in comfort. But the killer blow is that you can pass those lovely css selectors and say things like
which does exactly what it should: keep going down until you find something that matches that selector. Now think about how you’d do that by hand!
Event handling: prototype smoothes over all the differences between browsers and makes it really easy to have your own custom events which is great for having page elements react to changes without coupling things too tightly
Style manipulation: getStyle (gets computed styles), setStyle, hasClassName, removeClassName, addClassName are just terrific. Before
1 2 3
There’s loads more of this sort of stuff, the list above is just what sprung to mind. All the way prototype hides the differences between browsers.
Enough waffling. What does prototype give you in this deparment? – Enumerable. A beast of a module. Mixed in to Array by default, it lets you use each, inject, map almost as if you were writing ruby (there’s some punctuation clumsiness, but that’s not prototype’s fault). If that sounds awfully similar to ruby’s Enumerable that’s because it is – Class. Write classes, subclass them = win – method binding – Loads of little utilities like Object.isFunction that really should have been there all along – Your sanity back.
The one bit missing from my workflow was unit testing. I started of playing with jsunit and while it worked fine I wasn’t really enjoying it. There just seemed to be too much machinery involved, and some things seemed needlessly complicated. For example if you want to run a test suite in the browser you have to open the testRunner page, then click on the choosefile button on that page, navigate to your test file and hit run. And because of that you can’t just set a firebug breakpoint. I ended up loading the test file itself in the browser and calling the setup, test and teardown functions from the firebug console. Yuck.
Started tests in Firefox ....................... Finished in 23 seconds. 116 tests, 545 assertions, 0 failures, 0 errors