back to list

The wonders of jQuery

  March 24, 2009 — written by Chris Sloan | 2 comments »

Internet Explorer. Those two words are the dread of all web designers who have ever had to throw in CSS hacks to make their pages look correct or even to try and debug erroneous javascript errors. As much as I dread IE myself, unfortunately, with the amount of traffic that comes to Real Travel, we still have to support it as it is still the winner, if you can call it that, of browsers used. Because of testing for IE, we found out that, even though it already has a slower javascript engine to begin with, some of our pages were loading slower than normal in IE. That is when the research started to find out why this was happening.

The Selector System

On RT, we use a lot of class selectors to gather all the correct DOM nodes that we want to run and build javascript items on. As one would figure, this is one of the slowest methods when it comes to javascript because of the frequency that these could show up on a given page. Googling why IE had such a slow render of some of our pages using heavy javascript, I stumbled across Slick Speed. We ran this on all the browsers and noticed that IE performed poorly when using Prototype, which RT was currently using, only second worst to that of YUI. Doing so also showed us that besides Dojo, jQuery had very fast response time. That's when we decided to drop kick Prototype to the curb and convert over everything to jQuery.

The new library

When comparing javascript libraries, they all seem to boil down to accomplish the same thing, but in different manners. I started out using MooTools because of the excellent plugins that were packaged with the core system and also dabbled in Prototype because of the Rails projects I worked on. I have used each in creating my own set of control suites as I wanted things to be dead simple and couldn't find ones that fit my needs at the time. Please see MooKissControls for MooTools and Oyoyo for Prototype.

jQuery was a dream come true. Not only was it packaged lighter than that of Prototype or MooTools — mostly due to the core not being bundled with multiple plugins, but the syntax seemed so much more intuitive.

$('.item > li')
    .find($(a).attr("href"))
    .css({color:#ff0000})
    .click(
        function(){
            $(this).hide()
    });

Look at that chaining ability! jQuery even lets you go back to the initial selector on the chain by adding a end() and then continuing on the chain.

Of course, being new to jQuery, there was a bit of a learning curve to how the syntax worked and the best practices. I purchased a book, jQuery in Action, read it over a weekend, and started converting my control suites. I was able to compress most of my functions by about 60% using the jQuery library. It's that more intuitive and better reuse of code!

jQuery and Real Travel

Like I mentioned above, we needed to convert over all the functions currently using Prototype to jQuery. Before I came on board at Real Travel, the old site was actually using the YUI library. I find that library to have a bad case of code bloat and quickly made the suggestion to moving to Prototype since we were converting to Rails. Now, another conversion was in need to jQuery.

We quickly diagnosed what was on our site and what plugins we needed to be fully compatible with what we currently had. Because Rails has RJS built in, we needed new Rails helpers to be compatible with jQuery. Thus, we installed the jRails plugin and worked like a charm.

Since we were midstream of conversion, Prototype still needed to be in the app to function. Luckily, jQuery plays nice with other libraries by offering an awesome function that needs to be included just once in the head.

jQuery.noConflict()

Now, all the $ symbols as selector functions used by Prototype would be skipped over by jQuery and it would only look for the jQuery selector method. This saved so much time in development and the headaches of javascript errors.

A breath of fresh air

Now that we have finally converted over the old library and added the new plugins to coincide with what we had, I am so glad we went this route. The client side of the site, once we launch the new code, seems so much faster with rendering time. Not only does the site seem faster, but I feel like the chains have dropped off with the ability to develop new things. jQuery, even though its been around for a while, seems to be coming along strongly with more development backing than Prototype over the past year or so.

If you are looking to dive into a new javascript library, I definitely suggest giving jQuery a spin.

filed in: Geekery | permalink

22 shared their opinion. ADD YOURS »

Kurt said on 04/13 @ 03:17 PM
Nice article. jQuery is definately powerful-- I've been using it for a while in conjunction with ASP.Net AJAX. I was looking at Ruby too, but ulitmately found that it will never be as fast as well-written .Net code, nor as powerful. Then there's the fact that if you want a high-paying job, you have a MUCH better chance of getting it working with .Net as most businesses don't see open source as a viable option.
PeppyHeppy said on 04/13 @ 05:23 PM
@Kurt You might be surprised to know that Real Travel used to be .Net and then after hitting a wall was ported over to Ruby on Rails. I have learned that its not the language but the db design and the ability to find and fix bottlenecks that really matters. Personally, I prefer to to be able to fix the bottlenecks in open source environments where code, workarounds, alternatives are plentiful. We didn't like running into bugs with IIS and .Net, but I am not trying to tell you are wrong in your opinion. If its not broken don't fix it... if you are getting paid too much, and have never had any problems with .Net good for you and congratulations! I have always been a believer that you use the best tool for the job and each tool has its advantages and drawbacks. Paul

Add your opinion here

Commenting is not available in this weblog entry.
March 2017
S M T W T F S
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
top of page
 

where you can find me

RailsConf 2010

Flickr Github Working with Rails Linked In

my twitter tweets

follow me