jQuery and Prototype: differences

Although I eventually switched to jQuery almost a year ago, I've been using also Prototype for a very long time. During this period, I noticed some differences between jQuery and Prototype that I'd like to share here. First, Prototype is a JavaScript framework, whereas jQuery is actually a JavaScript library. A framework is something more related to a certain level of abstraction and actually more suitable for very complex applications than a library. On the other hand, a library is certainly a tool that turns out to be very useful for practical scenarios, such as leveling the differences between browser implementations, adding effects, handling events and so on.

In that vein, jQuery is more user-friendly than Prototype. As its motto says ("Do more with less"), jQuery wants explicitly make the life easier for web developers. Instead, Prototype wants to create an ideal background to build up complex web applications. If you notice, jQuery has the concept of plugins, but not Prototype, because the library in itself cannot provide all the features needed. Second, if we look at both libraries from an OOP perspective, jQuery uses this approach behind the scenes, actually wrapping everything inside a global namespace (the alias $), thus creating a selector chain.

On the contrary, Prototype uses an interface-based approach, so that you can either choose to use its custom methods or the DOM core methods. For example:

var divs = $('test').getElementsByTagName('div');

As you can see, the $ alias is not a wrapper but only a method to reference an element. In fact, you can actually attach a DOM core method to it. Instead, in jQuery you can do it in two ways:

var divs = $('#test div').get();
var divs = $('#test')[0].getElementsByTagName('div');

This happens because in jQuery everything is bound to a chain, so you have to move your code outside that chain. Another example concerns the handling of effects. Prototype uses interfaces, so you have something like Element.hide(element), whereas in jQuery you can write $(element).hide().

To summarize: both jQuery and Prototype are really powerful tools, but they're different in concept and design.

Leave a Reply

Note: Only a member of this blog may post a comment.