Ajax == Emacs: the Next Generation

I’ve started learning this

thing. which allows you to do cool things like
Google Maps
and the
U Wisconsin directory search.

It reminds me of The Emacs Experience. You start out using Emacs as an editor. Then you learn that there’s a built-in Lisp interpreter, and you think that’s cool: you can use that to set key bindings or automate things for which you used to use M-x define-macro, or add new menu entries. Oh, and you can even start other processes, so if you wanted to, you could run your file through ispell, or run RCS’s ci and co directly from Emacs.

Emacs Lisp is actually a programming language

But as you dig deeper, you realize that Emacs Lisp isn’t just a slightly more complex configuration file syntax, it’s an entire programming language. At that point, you switch mental gears from “how can I pipe the file I’m editing through indent and read it back in?” to “how can I indent C code on the fly?” From “how can I spawn a shell buffer in which to run Lynx?” to “How can I write a web browser in Lisp?” You stop seeing Emacs as an editor that can talk to other utilities to do useful work, and start seeing it as a development platform in its own right (and a way of life, but that’s another story).


Ajax represents the same kind of mental gear-shifting, but with a web browser. It starts with JavaScript which, as it turns out, has some nifty features like functions as first-class objects (yay closures!) and reflection (or whatever the technical term is for when a language can examine its own components).


The document object is basically the parse tree of the HTML being displayed: there’s a “head” node and a “body” node; the “body” node has child nodes “h1”, “p”, etc.; each “p” node has properties and child nodes that say what’s inside; and so on. The interesting part here is that the scripts on the page can manipulate the tree. So if you want to change the contents of a list, you can reach in with JavaScript, find the <ul> node you want to change, delete its <li> children, and replace then with newly-created ones.


Then there’s CSS, which allows you to separate the appearance of the document from its semantic content, the way HTML was always supposed to do. This is also available to JavaScript scripts, which allows for some interesting effects. For instance, you may have wondered why you’d ever want to use display: none other than to embed invisible keywords into your page for Google’s benefit.

It turns out that you can perform some pretty nifty things with this. For instance, let’s say that you have a page with several tabs, each one describing some aspect of whatever it is the page is about (e.g., a general description of a product; its price and availability; and customer reviews). Instead of having the server send out only the currently-selected tab, you can have a page with all of the tabs, all overlapping, but only one of them visible. A script running on the page can reach in and change the visibility of the piece of information you want to display at the moment. The obvious advantage is that once the page is loaded, the user can flip from one tab to another quickly, without having to wait for the server to serve up a whole new page.


Finally, there’s XMLHttpRequest, which allows JavaScript scripts to fetch the contents of a URL. Normally, this is XML, but can be anything you like. What this means is that if the script allows you look up information, the script can just fetch the minimum amount of data it needs from the server, and not bother with all the usual surrounding stuff, like the page title, pretty sidebars and footers, and so on.

Of course, unlike Emacs, this stuff is event-driven (the A in Ajax stands for “Asynchronous”), so naturally you’ve got all of the usual problems when things are happening all at once instead of in sequence: callbacks, interruptions, alarm timers, checking to see whether $FOO has finished loading, and so forth. I’m still struggling with that. But there’s definite hack value in there.

This entry was posted in Hacking, Things I've Learned. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s