Recently, I inherited a website that was using script.aculo.us and the Prototype.js libraries, Asylum.com. Unfortunately, the larger group that I work for has standardized on Mootools. Because the site was built by contractors, and not internally, no guidelines on a JavaScript framework were communicated to the contracting company.
After inheriting the site, I found no immediate need to switch to Mootools. But as the business development team began adding features to the site, and wanting to integrate features available from the other AOL Entertainment sites (AOL Music, AOL TV and Moviefone), it became necessary to reconcile the JS library differences between sites.
As you probably already know, script.aculo.us & Prototype.js cannot co-exist with Mootools. There are many reason why this is, but the main concern is the conflict in name space. Both script.aculo.us and Mootools utilize the $() functionality as well as many other similarities that cause these libraries to not play well together.
My first priority was identifying what was going to break if script.aculo.us was removed. Step one was contacting the contractors who wrote the code in order to provide some background. With their help and a simple text search, I identified 15 functions that were relying on script.aculo.us. Not horrible, but easily a week’s worth of work. I would have to rewrite or convert these functions in order to provide the exact same functionality. Additionally, there was the opportunity to make some minor tweaks that would improve the user experience.
I wanted to utilize Mootools classes so that my rewrite to Mootools would be reusable for other members of the AOL Entertainment Front End Development [FED] team.
Typically, including half-a-dozen or more, independent, JavaScript class files (broken down one class per file) would be unwieldy and highly undesirable. However, AOL has written an amazing backend process that concatenates individual files into a single object that is stored on our Content Distribution Network [CDN]. Apache offers a similar plugin called mod_concat written by Ian Holsman. AOL calls its proprietary functionality the merge tool.
With this powerful tool, Front End Developers can breakup JavaScript (and CSS) files into easily readable, and highly specific files without fear of adding overhead to page load times.
With these tools (Mootools and the merge tool) I would be able use a Java-like approach for development. Perfect, now to the details. It was my goal to not require any HTML markup changes. I was determined to only need to switch the JavaScript functionality. As always, this was easier said than done.
I decided to work on the most complex features first. There is a promotional slider at the top of the page that uses a tween effect to move the CSS left position. I wrote this tween class to provide the same functionality.
The second piece is an Ajax style menu flyout. In the original implementation, it was possible for multiple instances of the flyout to be created. I attempted to resolve this by tying the flyout to an Id and looking for that Ids existence. If it’s already created, use it, otherwise create it. It’s not bulletproof, but it prevents multiple appearances of the menu. I also used the Element.store() method that is new to Mootools 1.2. It’s very cool and very fast. Read more about Element Storage here.You can find my class here.
The third class I created is very specific to the blogging software we use. I’ll spare you the details.
Much of the other code was extremely specific to the Asylum design and did not necessitate the creation of a Mootools class. Head over to asylum.com and check out the changes, if you have been before you probably cannot tell a difference - that’s the point - but now I have something I can build on!
