Hackery, Math & Design

Steven Wittens i

'New Wave' JavaScript in Drupal: jQuery

After an Ajax related chat today, a battle plan has been created for integrating the jQuery Javascript library into Drupal. As this is the result of a long discussion in private mails and on Drupal Groups, I wanted to jot down the reasons in one place for future reference.

Though several people have suggested integrating third party JavaScript libraries in Drupal, I rarely heard good arguments for doing so. The last thing we want is just to add some 'bells and whistles'. I wanted a good, small platform that would serve as a suitable base for both the (relatively small) core JavaScript work as well as the extended needs of the Drupal community at large.

The most important thing is to keep in mind the context of the Drupal system. We have a very advanced code base on the server-side already: text filtering, access control, localization, form API, theming, etc. A well-written, Drupal-like module has to use these systems to integrate with Drupal. Heavy client-side JavaScript applications are not likely to happen soon, as that will lead to self-contained functionality that does not 'play nice' with others.

This means that browser platforms such as Dojo are not good candidates. Though well written, they are simply overkill for what we need. When we look for small, functional libraries, jQuery stands out as the most suitable:

  • It focuses on making common JS tasks easy to do, without much fuss or overkill. There are no grand claims, just a set of well written, self-contained utilities. This means you can focus on your functionality.
  • It is centered around CSS-like queries. Finding and interacting with DOM elements is done with a CSS selector. This means it is easy to pick-up even for those with no JavaScript knowledge.
  • It provides much bang for your buck. In only 10KB, you get the CSS-query system, basic Ajax, basic animations and smart events.
  • It is built by smart, dedicated people. In fact, John Resig (the author) has personally gotten involved in discussions and answered our many questions.
  • It has a modular plug-in system. This means that contributed module authors can easily include advanced functionality, while we can keep core simple. Including an existing or custom plug-in is as simple as adding in another .js file.

To summarize: we chose jQuery because it is compact enough for core, easy enough for non-JS experts and because it provides a broad platform onto which rich contributed modules can be built.

The concrete steps for getting this stuff into Drupal:

  1. Remove those parts of drupal.js that have equivalents in jQuery, and rewrite the left-overs to use jQuery's APIs.
  2. Rewrite the other .js files in core to use jQuery functionality. This is mostly the replacing of complicated code with very simple calls.
  3. Add in new functionality that jQuery makes easy, thus proving how this was a smart move.

I'm confident we can get this done for Drupal 4.8.

Drupal  JavaScript  jQuery
This article contains graphics made with WebGL, which your browser does not seem to support.
Try Google Chrome or Mozilla Firefox. ×