Home

'New Wave' JavaScript in Drupal: jQuery

Jun 23, 2006

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.

Replacing drupal.js in Core

Jun 23, 2006 Gordon Heydon

Sorry I couldn't make it to the conference call this morning.

I have been evaluating jQuery for another project, and because it is so much different to what we currently have I would just remove all the js from Drupal and start again, with a clean slate.

There is not that much js in Drupal, and using jQuery should reduce this even more.

There is only 4 major sections, autocomplete, collapsible fieldset, the progress bar, and the textarea resizing that needs to be done, and I don't think that this will tax jQuery very much.

We will also need to create a plugin to handle the variable passing for drupal_to_js() which is used by the autocomplete and the progress bar.

The other 2 areas are the update, and upload are really just helper functions which should be much easier to implement in jQuery.

I look forward to getting jQuery into Core.

JQuery

Jun 23, 2006 Dries

How are we going to keep both in sync? How does JQuery deal with backward compatibility? Do they share the same vision?

Cool!

Jul 26, 2006 Breyten

I got a first taste of jQuery at work today, and I quite liked it, I must say. So I think integration of jQuery is good :)

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <b> <dd> <dl> <dt> <i> <li> <ol> <u> <ul> <img> <em> <p> <br> <span> <div> <h2> <h3> <abbr> <small> <table> <tr> <td> <strong> <acronym> <th> <blockquote>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

Recent comments

Images