jQuery for the Control Panel Considered Harmful

Categories:

ExpressionEngine, JavaScript

Tags:

expressionengine, javascript, jquery

Published:

3:55pm on Saturday 24th October, 2009

Okay, it’s not actually harmful—in fact it’s rather awesome—but you’ll not get any blog traffic without a provocative title, right? What it can be is a pain-in-the-ass when working offline due to the default settings.

The jQuery for the Control Panel extension is not a first-party extension (it was created by the clever folks at nGen Works), but it does come bundled with ExpressionEngine and is invaluable (and often a requirement) for other add-ons. Unfortunately, the extension’s default settings are to load the jQuery library and UI from Google’s centralised repository for JavaScript libraries; this means that if you don’t have a working internet connection—you’re working on the train or a plane, say, or trying to perform a live code demo at a tech conference with patchy wifi—you’ll get nothing but a spinning icon and no JavaScript.

Pros and Cons

Loading code from Google’s servers obviously has some fantastic advantages. The response time is likely to be super-fast with 100% uptime; it’s a different domain to the rest of your site, so downloads can happen in parallel; and if the user has visited a different site using the same library they will have the file cached, speeding up your overall load speed.

But this is the Control Panel we’re talking about! Most of the benefits listed above are irrelevant, particularly if your CP admin team is a small one (indeed, for many sites it may just be one individual). And for development, where you may often be working offline, it can be crucial to have jQuery working properly in all environments.

Therefore I recommend that, when installing jQuery for the Control Panel, you also:

1. Download the latest version of jQuery core and UI from the official jQuery website (zipped or not is up to you, depending on how often you find yourself stepping through JavaScript code at runtime)
2. Change the Settings for the extension to point to your local files

If you are also using jQuery on your website front-end, you can even just point the extension to the front-end’s file (for example, mine lives at /j/jquery.js—save those extra characters where you can!)

Now you can work on the train, on a plane, or in a blackout—or run a live demo of ExpressionEngine while hundreds of geeks hose the wifi connection—safe in the knowledge that jQuery is always going to load when and where you want it. Just don’t forget to update it whenever a stable new version is released.

I believe EllisLab should consider bundling the latest version of jQuery within the .zip of EE (maybe in the cp_themes folder?) and default the extension settings to point to that file instead of Google.

Retain the distributed advantage

There are ways that you can host your own JavaScript library but still retain (most of) the advantages I mentioned above when using Google’s repository. I can’t help you with Google’s uptime (but what does that matter if your own site is down? All you need to worry about is your own uptime, really) but the other benefits are easy enough to duplicate.

• Serve your site assets—which might include images and stylesheets as well as your scripts—from a different subdomain on your own site, e.g. assets.example.com. It’s easy enough to configure your server to point the subdomain at the same location as the rest of the site, but you get the benefit of parallel downloads.
• Use Stephen Lewis’ SL_Combinator extension to minify, combine and zip your scripts (and stylesheets) for the front-end site. The result is one single, cacheable file for your users, and you can still refer directly to the jQuery library from the back-end.

Summary

I hope this helps you avoid the annoyances of interrupted work or embarrassing beachballing on stage if you’re trying to work with jQuery as part of the ExpressionEngine Control Panel. It’s a fantastic library and extension; if it were not for this one little issue it would be perfect.