Tender now running on jQuery

We recently completed a rewrite of Tender's admin JavaScript. The admin area is now running on jQuery after deciding it was time to move on from Prototype.

Why the switch?

Prototype has served us well over the years. I was a member of the Prototype core team and big proponent of the library. The primary reason we decided to switch was simply a matter of momentum.

We learned relatively quickly that most of the potential hires we were talking to are more proficient at jQuery. We also saw an explosion of jQuery related development and a very active community. The momentum has been shifting for a while, but we only recently decided it was time for us to take advantage of it.

How we did it

The first thing we had to accept was that we're going to have to break the application locally (in a topic branch of course). We also needed to prevent any development in master that would potentially conflict with what we were doing. Next, we created a jq directory and added our jQuery-based JavaScript to that.

We originally used Behaviour, so a lot of our code was broken down into rules. Our method was fairly low-tech, going through and marking all these rules as JQUERY: TODO. We even managed to find some code that was no longer in use. Deleting code feels great!

var rules = {
    // JQUERY: TODO
    '.admin div.dropdown': function(element){
      var replacement = $(element).down('.dropdown_replacement');
      var menu = $(element).down('ul.dropdown').hide();
      var toggle = function(){
        menu.visible() ? menu.hide() : menu.show();
      }
      replacement.observe('click', toggle);
    }
}
Behavior.register(rules);

In our jQuery code, we put most of these rules inside a $(document).ready function. The above code would translate to what you see below and didn't require a third party script. To be fair to Prototype, you didn't need a third party script to do this either.

$(function() {
    $('.admin div.dropdown').each(function() {
      var $this = $(this),
          togg  = $this.find('.dropdown_replacement'),
          menu  = $this.find('ul.dropdown');
      menu.hide();

      togg.click(function() {
        menu.is(':visible') ? menu.hide() : menu.show();
      });
    });
})

We then moved on to bigger chunks of code that were written as classes in Prototype. I won't post them here, but our class-based code changed to jQuery's $.fn style. This isn't intended to be a LOC comparison, but here's a general look at the approach we took:

// Prototype
var AssetDrawer = Class.create({
  initialize: function(assetWrapper, targetTextArea){

  }
})

// jQuery
$.fn.mediaDrawer = function(options) { }

The End

We're really happy about switch and the fact that more of our team members will be more comfortable when writing code for our front-end. The thing that excites us the most is seeing how our applications can benefit from the numerous developments within the jQuery community. We already have a few updates in the pipeline that take advantage of these developments.

Next up, moving Tender's public UI to jQuery.