• Register all components that might listen to something.
• Register all events they might listen to.
• For each listener method among the components, automatically bind the event to it.

In code:

A component looks like:

And elsewhere in the code, the events it listens to get triggered through the normal jQuery custom events mechanism:

Part of this is based on what I said last night, which is (a) I'm keeping things simple - hence everything happens at startup and all the instances are singleton classes; (b) consequently, events are global, rather than being attached to any particular component.

Stepping back, what were the alternatives to this design:

• Components register themselves as listeners - this would be the purist OO answer, i.e. keeping objects autonomous. A perfectly cromulent solution, but a little more redundancy than it needs to be. If objects really do have consistently named listener methods, it's just as easy to handle registration automagically.

• The initialisation routine manually wires up components to events. It has a certain Python-like "explicit" feel to it, but again is quite pointless if we can instead do it automagically.

So where does the automagic model fall down? If we are doing things dynamically, it would get more complicated and would, for example, require objects to register upon their creation. So I think that's still okay. Another problem could be if a single method was listening to more than one event type, since this technique assumes it's one-to-one from event type to methods. But that's okay too - I actually had this problem and it was simply solved by getting both handlers to delegate to a third, common, handler:

I realised while working on TiddlySpace there's a lot to be said for dependency injection style patterns in Javascript, and it's not happening yet.

I've felt for a long time jQuery has been ahead of the pack with its documentation, and since then both jQuery and its docs have gone from strength to strength.

One thing I was still missing though is user comments.

PHP leads the way here, with the official API docs allowing user comments at the bottom (example). No-one can anticipate all the issues that will arise, so why not open up docs to the developer community? Allowing user comments is also an easy way to help keep the docs up to date (if something of a compromise.) It could also be done as a wiki, if the wiki is managed well. (The Rails wiki is a good example of a well-maintained wiki that receives frequent contributions from people in the know.)

I was missing it until I heard that announcement. Again, jQuery's leading the way.

I realise there are spam complications, but user comments are a no-brainer for making documentation useful. I continue to derive huge benefit from user comments. (To wit: The user comments about random number seeding were of vital importance in the making of the site I realised earlier today. I use them pretty much every time I have a PHP problem.)

I've even thought of making such a project myself, so much did I miss doc based comments.

The docs are being migrated from MediaWiki to WordPress. FWIW I think the OWF could benefit from a similar architecture if the wiki is going to engage with the community. As I've learned from AjaxPatterns and maintaining the tiddlywiki comments plugin, most people would rather append comments than updating a wiki. Updating a wiki is intimidating for some, and in any event, requires much more thought in order to make it coherent. Comments tend to be easier to moderate too because of their atomic nature.

Anyway, great news for jQuery and the community!

Highlights for me:

Now:

• Now using sizzle, the quick, generic (not just JQuery), selector engine. Slide 8 show s almost 2* performance improvement on IE6 from JQuery 1.2.6 -> 1.3.2.
• Performance improvements are apparently dramatic (browser averages):
  • width() / height() ~4* speedup (good - I need these for http://caption.im8ge.com)
  • hide() / show() ~3* speedup (good - I use them everywhere!)
  • element insert: : ~6* speedup (likewise)

• Test Swarm is go! Awesome, Awesome initiative. I hope we take advantage of it for TiddlyWiki testing, once it extends to other frameworks. (Or make something similar.)

• Ridiculous growth and market share (p15-17), and new big sites using JQuery (p13): Whitehouse, Wikipedia, Amazon, Microsoft. Not too shabby eh. Stuff like this makes it much easier for advocates to sell in their organisations.

• Setting up private CDN on Media Temple, who's donating all the resources.

Future:

• More performance improvements in 1.3.3 - p23 shows 3.5x improment over 1.3.2! (perhaps for a subset, but it's still a big and useful set).
• JQuery builds optimised for mobile.
• Moving parts of JQuery UI widget -> core.
• Four conferences in 2009 - online, London, SF, Boston.
• Better community sites, inlcuding online forum. Plugin site rewrite.
• All plugins on CDN..
• Core -> Github.

JQuery IFrame plugin

The plugin basically tells you, the programmer of the parent document, when your child iframe has loaded. It also has some other bells and whistles, like timing the load duration.

It's inspired by the use cases of WebWait (http://webwait.com) and the Scrumptious trails player (http://scrumptious.tv). Both are applications whose whole mission in life is to open up an external page in an iframe, and do something when it has loaded.

There's already an IFrame JQuery plugin, but it's to do with controlling what's inside the iframe, i.e. the situation which is only possible when the iframes are from the same domain. What I'm dealing with here is the parent knowing when the iframe is loaded, regardless of when it comes from and agnostic to what it does.

This has been a while coming, but I made a little "yet another modal dialog lightbox JQuery plugin" thing this week.

Demo and Download for Modal Dialog - JQuery Plugin

It was driven by TiddlyDocs, but I've been wanting one anyway for a while. Mostly because lightbox libraries generally do some hocus-pocus on page load, like applying to everything marked rel="lightbox", but don't let you dynamically produce the lightbox yourself. That's fine for pages that are just a static image gallery, but not useful to someone building a dynamic web app.

I've subsequently used nyromodal, on good advice, but wanted something smalller and with a simple API for my main use case, which is just showing some text.

The plugin also simplifies work by not requiring you to install a separate CSS file. Doing that, and linking to it, as well as installing any images, is something that always slows me down when I want to start using a graphical client. In keeping with the "happy path" You-Aint-Gonna-Need-It (YAGNI) mantra, I'd rather keep a library to a single Javascript file - be evil and do styling in the library by default, but still support users who want to put custom CSS in a stylesheet.

TiddlyWiki is a framework for developing SPAs. One might say it's the framework for developing SPAs, since there are no prominent alternatives. So my obvious choice was a TiddlyWiki. However, not too long ago, the TiddlyWiki core guys extracted out the secret sauce for SPAs: the ingenius bit of code that saves files without requiring any browser extensions. (I've tried to explain this to people and it always leaves even the most brilliant minds a little dumbstruck, but yes TiddlyWiki demonstrates there are pragmatic hacks that can be used to read a file into the browser and then write it out again.) I was keen to explore this saving mechanism, so experimentation ensued.

The file management techniques ship conveniently in a JQuery plugin, jQuery.twFile. There is a basic demo which lets you edit the entire text and save it. The demo confused me at first - because it was editing the entire body of the file, I wasn't sure how to translate that info into what I, as an application developer needed. The demo is useful for framework developers understanding the plugin, but less so for application developers. So I extracted it into a demo that is still minimalistic, but closer to the kind of thing you'd do in an application.

The SPA demo is here.

Once I did that, I realised what's required is a SPA framework. In practice, most developers using twFile will be keeping all the HTML, CSS, and Javascript in a single file, so it's possible to build a higher-level abstraction on twFile, so that developers can focus only on the content. I built the demo in a way that distinguished what was boilerplate framework code and what was application-specific HTML, CSS, and Javascript.

It was all still in one file, and that's fine for many developers - you can give the developer the file, tell them "edit these bits", and they can come up with something functional. I decided to extract things further though, and found the Jinja templating framework to be useful here. Jinja has a concept of template inheritance, so you can easily build up an "include" system. The net effect is I was able to encapsulate SPA logic in a single file, which was passed through a Jinja processor to produce the executable HTML document.

The basic SPA logic is shown below:

So it contains separate HTML/CSS/Javascript blocks. Probably not a good engineering practice (though it doesn't impact on the end-user experience, which is always a single file), but it's convenient for now. The key SPA logic is here:

As an app developer, all you have to do is override $.spa.save (which in retrospect should be renamed as it doesn't actually perform the save). This function receives the text of the file as it was stored on disk when the page loaded. It must then return the text that should be saved to disk. Thus, it must store application state in HTML, probably by performing some kind of substitution.

Having put this together, I'm keen to proceed with the envisioned Twitter app. It's not yet clear if there's any mileage here over a regular TiddlyWiki, but as someone who is more familiar with starting apps from a blank HTML page (or a simple Project Deploy* template), it might end up being a more familiar way to kick an app off. Watch this space.

However, I noticed there was no JSON-P interface, so there was no way to write a pure browser-based mashup. I got in touch with them, and heard back from Chris Williams, who to my pleasant surprise was willing to introduce JSON-P. And so we had some email discussion about the various options for the API interface (e.g. do you call it "jsonp" versus "callback"; do you use "real JSONP" versus just a callback function; do you hardcode the name of the callback function versus let the caller specify it as a parameter), and ultimately Chris went ahead and implemented it a short time later and published the API on January 26, 2009. Fantastic!

I offered to make some demos illustrating code usage, and did around that time, but never got around to publishing them until now. I've released the demos here. There's a couple of JQuery demos, and one raw Javascript demo. I had fun making them and have plans to do a lot more with this API.

TiddlyWeb-JQuery Comments Plugin - Screencast @ Vimeo

I've extracted from Scrumptious a nested comments plugin you can integrate into any POJA (plain ol' Javascript app). You can find it here in the repo: TiddlyWeb-JQuery Comments Plugin.

As the README explains, usage is a one-liner once you've set it up. Just do $(selector).comments("topic"). The topic is an identifier for the set of comments; so that when the UI loads, it pulls down all comments with that ID in its "topic" field. Internally, topic acts as the root of the comments tree...but you don't really need to know that.

This plugin is a JQuery equivalent of the TiddlyWiki comments plugin, minus some of the more exotic options, and the ability to delete. Eventually, I hope to introduce those things, but only as the need arises - so if you're using this, please let me know how I can improve it.

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

For example, cut-and-paste one of the following:

• curl -O http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
• wget http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

With the release of JQuery 1.3, I thought I'd mention the Google JQuery CDN, one of several libraries you can yoink from Google's Ajax Libraries API. Instead of hosting your own JQuery, you just point your web app to Google's JQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> (Modified version from 1.3. I'll try and keep this post linking to the latest version.)

Google's documentation would lead you to believe you need to import Google's library, and then call google.load(), but it's unnecessary; just pull in the script directly using the link above. The link is officially documented, so it's going to stay put for a very, very, long time.

There are also other libraries available on Google's CDN and elsewhere.

The main point of the CDN is caching. If a user hits 100 JQuery sites, the library will only be downloaded once, and the remaining 99 sites will pull it from the local cache. From an operation cost, you also get to offload the cost of server Javascript to Google. As an added bonus, I also find it easier as a developer to kick off a new project by just linking to the CDN - no need to download and copy the latest version of JQuery.

Great. So when not to use a CDN?

Obviously, whenever you're working offline. This sometimes occurs as a developer working locally, and with Single Page Applications like TiddlyWiki. (The next "major minor" release of TiddlyWiki, v2.5 is JQuery-powered.)

Another case would be when you can deliver faster than the CDN, and care about that. This might be the case when all users are close to the server. Even then, though, you won't get the local cache benefit from users who already have the JQuery.

Finally, privacy and security concerns. Using the CDN, you are trusting the CDN to faithfully serve JQuery and relying on no third-parties injecting funniness in between the CDN and your user's browser. If anything went wrong here, your user could be subject to a world of XSS and CSRF attacks. Or, in a more mundane scenario, the CDN might simply go down, thus breaking your web app. Furthermore, you're giving the CDN data about your users this way. Although Google doesn't use cookies, others might; and even if they don't, the IP number is going to be sent back to them. The referrer - being your website - will also be sent to them, so they can, if they want, track your website's usage.

For many websites, though, it's great that we can use a reliable CDN like Google's to fetch JQuery fast.

Update (11-Feb-2009): In a show of recursive linking, I should fess up as to why I originally sat down to wrote this ... .

Update (erm, mid-2009 sometime): Montana left a comment pointing out you can also drop off the minor numbers to get the latest version. So, for the latest JQuery (since 2.0 doesn't exist), use http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. Or, for the latest in the old 1.2 series: http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js.

Update (19-March-2010): Scratch that. @premasagar pointed out to me that the link to just the latest version (until 2.0, i.e. http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js) as opposed to a specific version (http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js) is undesirable; Google will expire the "latest" content after one hour, as opposed to one year for a specific version. This is for good reason of course, as the latest version is subject to change. For this reason, I've reverted the link at top to be a specific version, which I'll endeavour to update upon each new release.