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.
1 | $('.item > li') |
2 | .find($(a).attr("href")) |
3 | .css({color:#ff0000}) |
4 | .click( |
5 | function(){ |
6 | $(this).hide() |
7 | } |
8 | ); |
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.
1 | 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.