Why I moved from Prototype to jQuery

jQuery is a JavaScript library which follows unobtrusive paradigm for application development using JavaScript. jQuery inherently supports Behavior driven development and is based on traversing HTML documents using CSS Selectors. On the other hand, Prototype is a JavaScript library for Class driven development which makes life easier working with JavaScript. Prototype library has a good support in Ruby on Rails via helper functions.

I have always used Prototype library for most of my projects until I was introduced to jQuery three months back ... and it enchanted me.

The reasons

1. Behavior driven development (BDD)
   Using jQuery, behavior(s) of HTML elements is defined separately from HTML code similar to defining style of an element using CSS. Lets look at a simple example to display alert box on click of an element

   1 2 3 4 5 6

   $(element).click(function(){ alert("warning"); //fill stub for confirming this action from user });

   A complex example: All elements of class "speciallinks" should emit the following behavior:
   1. change their href link to "javascript:void(0);"
   2. generate logs on click
   3. onhover should change background color.

   1 2 3 4 5

   $("div.speciallinks").attr("href","javascript:void(0)") .click(function() {console.log("div.speciallinks clicked");}) .hover(function(){$(this).addClass("hovered");}, function(){$(this).removeClass("hovered");});

2. MVC + J
   MVC framework divides web development into 3 separate parts Model-View-Controller and Ruby on Rails is a great MVC framework. The View part of MVC framework comprises of HTML, CSS and JavaScript which is bulky, combining three different parts of GUI development into one. Moreover, using Prototype helpers in Ruby on Rails views messes up HTML and JavaScript together. Here, jQuery fits in nicely (due to BDD) to separate JavaScript(J) from Views(V) to visualize the framework as MVC + J which I find very powerful especially working with Ajax.
   Using jQuery, I keep all my HTML files are clean and clear as all the JavaScript code is kept in .js files defining behavior of HTML elements.
3. Chaining of actions
   Chaining of actions for a HTML element follows DRY principals and increases readability of JavaScript code. If I want to add a bunch of operations on a single/multiple elements, it can be as simple as:

   1 2 3 4 5

   $("div.message").show() .append("Action has been executed successfully") .addClass("flash"); // chained functions can be on separate lines :)

   Now, this is possible because every method within jQuery returns the query object itself on which further methods can be applied to form a chain of methods on "selected" HTML elements.
4. CSS Selector rocks!
   CSS Selectors are very powerful when playing with HTML DOM. jQuery is based on CSS Selectors to identify elements in a HTML document, which avoids tedious job of managing idattribute for each of my HTML tags. Most of id attributes can be avoided using right CSS Selector. Prototype does supports CSS Selectors via $$ function, but it doesn't fully leverages the power of CSS Selectors. I find Prototype working best with element's id attribute.
5. No more checks for presence of an element
   In prototype, I always need to check if an element exists before applying an action to it. For example: I want to display user specific content in a div{id='user-box'} only if user is logged in (this div will exist on rendered page only if user is logged in). In Prototype I will do :

   1 2 3 4 5

   if ($('user-box')!=null) { // this if block is redundant with jQuery $("user-box").style.backgroundColor = "red"; }

6. Aids development process
   Using jQuery HTML code is clean and nearly untouched. My web designer can easily modify html and stylesheets without learning the Prototype library.

I miss prototype

1. On Ajax request, when a div is updated with a partial and this partial contains elements with JavaScript behavior, the behavior needs to be activated/reactivated. In jQuery I do not have to write a lot of code for this, but still I have to keep this in mind every time a partial is loaded with Ajax. In Prototype, each HTML element use to contain the corresponding JavaScript code along with it in the partial.
2. Ruby on Rails helpers for Prototype library are awesome and makes life a lot easier working with JavaScript and Ajax.
3. Prototype library provides Ruby like syntax in JavaScript for functions on arrays, objects, etc which further makes development easier and faster.
4. With jQuery, element behavior gets activated only after DOM has been built and JavaScript files have been downloaded. For slow connections, this can be painful as there is a delay in activation of behavior.

Conclusion:

Jquery and prototype are both great libraries. For me, jQuery's philosophy (type less, do more, keeping things intuitive and unobstrusive) makes a big difference. But, I miss prototype core javascript additions. Waiting for jquery-rails integration. Some steps have been taken toward this goal. I would love to listen some of your personal experiences in shifting.