Imagine for a moment that you’re building a web application based nearly 100% percent on AJAX. And imagine that you’ll likely need to send bursts of multiple AJAX requests to your server, and you also need all of these requests to be processed in order when they hit your server. You want a near continuous AJAX connection – every action, every edit, every keystroke the user makes – all of these need to be sent to your server for processing. You are building Listotron.
This is exactly the problem I’ve created for myself by working on the Listotron project with Buck. Listotron is [will be] a simple web app that lets users easily create and edit lists and collaborate on them in real time. Simple put, it’ll be a web based OmniOutliner with a much smaller feature set and multi-user realtime editing. I’m particularly excited to use it as a research playground for optimizing web-apps. (As we build, we’ll be sharing our ideas, plans, code, prototypes, and much more – so check out the Listotron blog for more).
Since we’re designing Listotron to be a 100% AJAX based application, every edit the user makes will need to be AJAX’d to the server. What’s more, we want users to be able collaboratively edit the same list at the same time – Google Spreadsheets style. This means that every edit, every tab, every indent, everything needs to be AJAX’d quickly and efficiently to our server so we can update any collaborators that might also be working on the list.
Most importantly, all of the edits need to happen in order, since most edits to the list will depend on previous edits to the list.
The problem with relying on plain ole’ asynchronous AJAX is that it’s, well, asynchronous. We’re not guaranteed that all of our AJAX calls will be received by the sever in the correct order, and we’re certainly not guaranteed that we’ll receive the responses in the correct order.
Imagine sending off 4+ edits to the sever, only to find out in the last response that the 2nd request failed. What if edits 3 and 4 relied on edit 2? How do I roll back the UI? How do I maintain data integrity on the server? on the client? It’d be hell to build, hell to debug, and hell to maintain. No thanks!
Since I need to send all my AJAX requests to the server in order, why not just use synchronous ajax calls? Problem solved, right? Unfortunately, it’s not that simple – from the YUI blog:
So far so good, but here’s the zinger (emphasis added)…
That’s very bad news indeed. Synchronous AJAX ends up looking something like this:
Clearly this is not the way to go. It’s simply not acceptable to freeze the entire browser – (even in Chrome‘s case: the entire tab) – for every single tiny edit. A different approach needs to be made.
The solution we’ll be using with Listotron is to manually enforce synchronization into what would otherwise be asynchronous AJAX calls. The idea is this: after an AJAX request is made, queue up any other requests that need to be made until a response comes back – then send a single bundled AJAX request that contains all of the requests currently in the queue. The server decodes this bundled AJAX call, processes each request, and sends back a bundled response. All this ends up looking something like:
Since we need to maintain the call-order of our AJAX calls, we can queue them up in-order and then send off multiple requests to our server in one go. The benefits are: (1) fewer http connections hitting the server, and (2) the order of the AJAX calls is maintained, (3) and UI is still very responsive. And, since the server sees multiple edits at the same time, further optimization can be done that would otherwise be impossible. For instance, the server receives 2 commands in a bundle: an indent command followed by an outdent command. The net result to the list is to do nothing!
Bringing It To Life
I’ve set up a basic demo and tutorial that bundles up asynchronous AJAX calls to maintain their order. I’ve implemented everything as a jQuery plugin with a lightweight PHP/MySQL server-side. Check it out here.