Hi all,

It’s been a few days since I posted. I’ve been heads down on the project to create a global javascript framework for our sites (Redball, at least). I’ve finished this work (or at least gotten it to a releasable state) and I thought I’d share an update. I plan on documenting it extensively and providing a lot of examples (and teaching it) in the near future, but for those of you who are curious, you can peruse the library now. It’s mostly stable (we’re still tweaking and adding things) and you can just download them and read them if you want to see what’s in them.

They include a lot of functionality, are highly extendable, easily debuggable, and hopefully will be useful. The current framework file is about 30K, but Andy just turned me on to a more efficient javascript compressor that will bring that down to 19K. I can’t express how awesome it is to have this thing going out and it managing to pack in so much functionality in such a small package.
To provide some clarity to those of you technical folks, the library contains the following functionality:

Mootools: The global framework splits this library in two so that advanced functionality is to be included only when it is required. Mootools gives you tons and tons of shortcuts from ajax, DOM scripting, most of the functionality you know and love from the Prototype library ($(), array.each, etc.), draggables, effects (resize, fade in and out, move, etc.), JSON parsing, Cookies, and on and on. Advanced functionality like draggables and accordions are part of the addon library, so they aren’t on every page - just the ones that need them.

Prototype backwards compatibility (sortof). Most Prototype authored code will run with this in the scope instead of Prototype. This isn’t always the case, but it should make converting such code less difficult. If your code worked with Prototype.lite, it should work with our framework. If you need the full Prototype library, you can just include it before the global framework and they should be compatible.

Global utilities: these are a collection of most-used functions (on redball) and it will likely grow. Currently, the functions included are:

  • Cookie: extends the Mootools Cookie object to let you set cookies and specify a domain
  • Ajax: extends the Mootools Ajax object to let you detect errors in responses, since our servers don’t return 404
  • dbug: a debugging framework that lets you do a lot of great stuff
  • mouseovers: functions to allow producers to give an element (an image or otherwise) a class name and have the mouseover behavior to swap the content out with a hover state happen automatically without the producer having to author any javascript at all
  • ie fixes: adds transparency to PNGs and enables the background cache for DOM elements to eliminate ie’s flicker bug (both of these can be disabled)
  • tabSwapper: an easy to use class for layouts with tabs. One line of javascript will set up your tabs events and handle all the details, including slick fading effects
  • a simple browser sniffer
  • iframeShim: for hovering DOM elements over flash elements and select elements so they don’t show through

Debugging is actually pretty awesome, so I’ll write about that for a sec. You can pepper your code with statements like this:

dbug.log(”my variable is %s”, myVariable)

And when the user loads the page nothing will happen. If you open up Firebug and type into it’s console

dbug.enable()

All your dbug statements will print out and any that fire from that point forward will print out, too. The syntax is the same as the console.log() syntax for firebug.

If you want to turn this on when the page loads, just add “jsdebug=true” to the query string of the page you’re viewing and the debugging will be on from the start. Another cool thing happens when you do this: all your compressed libraries are skipped for their uncompressed counterparts.

When the page loads, if you pass it jsdebug=true, the compressed libraries, which are all one line long, highly abstracted, etc. and therefore a total pain in the ass to use to debug something, are not evaluated (though they still load). Instead, they include the uncompressed libraries (if your compressed file is made up of more than one library, it can include them all).

This lets us post javascript that would otherwise be as much as 200% the size of the compressed library but not suffer the consequences that normally come with that compression.

Missing from the global utils are things we’re likely to include related to the header such as search functionality and global login functionality. Additionally, as we develop layouts on the site that are common to all of them, we will add more things like the iframeShim and the tabSwapper.

Documentation will be no small task and I hope to dig into it shortly. I have planned on offering javascript classes to our developers and hope this documentation to be part of that project.
The directory that holds all this stuff is a little messy with test files and whatnot, but you can dig into here:

http://c18-x-publish1.cnet.com:8100/html/js/redball/global/

note: this url is not visible to folks outside the cnet firewall; I’ll post when the library is public.
Note that there are some other libraries in there - jlogger and popupdetails to be specific. These have been refactored using the new framework. They would have worked in their previous state, but I wanted to make use of the shortcuts in the framework to make them even smaller.

If you have any thoughts or ideas on this topic, please post them!