Comparing Prototype, jQuery, and JavaScript standards

In this article, we will briefly overview some of the most commonly spotted differences between JavaScript standards, jQuery and Prototype. jQuery started in 2005 specifically to make CSS selectors usable from JavaScript. Prototype also started in 2005 specifically to make Ajax easier to use from Ruby. Since then, a number of standards have been developed which replace the functionality of much of these libraries, and in many cases, these functions check to see if a built-in version is already available, which can speed up the runtime of your code. So if these two JavaScript frameworks are so similar, then we should have no trouble finding areas of comparison.

First we can do a function-by-function comparison, which looks at some of the most commonly used functions. In the following table, “$” means “jQuery”, and “#” means “.prototype.”:

First of all, both frameworks have AJAX handling functions, which make life easier, however, their parameters have slightly different names, so see the respective documentation for details. jQuery has a function that wraps the typeof operator, which adds a distinction between objects, arrays, and null. The reason for Array.isArray being in the ES5 standard is that the typeof operator does not distinguish between these types and returns “object” for all three. Object.extend is available in both, under almost the same name. Object.toQueryString is also available in both, and can be reimplemented with the help of the built-in JavaScript function encodeURIComponent(), however, it is definitely easier to use a preimplemented function instead of doing it yourself.

Event listeners are another common use of JavaScript frameworks. jQuery seems to have a different definition of “bind” than the rest of the JavaScript world, which Prototype recognizes with its similarly-named Function methods. The first bind() turns a method into a callback function, while the second bindAsEventListener() actually does the binding with addEventListener(). The nice thing about the ES5 definition of bind() is that it requires that multiple arguments be handled in a manner consistent with currying, which makes it similar to Prototype’s curry(). Templating is another area of comparison. Prototype has a built-in template language (which uses “#{var}”), and jQuery has a deprecated plugin (which uses “${var}”), but it seems that more people are using Mustache for templating these days, which can be used with either framework.

Lastly, and most importantly, CSS selectors are what most people use these two frameworks for, and there are many methods to query objects in the DOM to get their children that match a name, ID, or class name, which are all subsumed by jQuery’s find() method and Prototype’s getElementsBySelector() method. While the two libraries do support slightly different gamut of selector syntax, they’re mostly the same. Just remember to add the extra $ if you’re using Prototype.

Like this post? Please share it! Then follow us on Twitter – @thorntech – and sign up for our email list below for future updates.