Skip to content

Simple ‘on-server’ mobile AJAX in Django

17 June 2009Running time 4 minMobile Web · Programming

–or–

“How your mobile site may not be much more complicated than building one with a data API or AJAX”

I am working on a project called ‘IvyRoot’ that is predominantly mobile and which is going to make me fabulously rich and famous.

OK, OK. It’s predominantly mobile, at least. It’s all in Django.

There’s a ‘desktop’ web site to go with it, and this contains panels within pages. Some of these panels might take a few moments to process and so I use XHR to call back to get them once the main page has loaded, displaying a pretty spinning icon in the meantime.

I also use XHR to populate in-page tables which might have many rows – so that pagination and sorting are fast without having to load the whole page again.

I also want to expose a number of data APIs (providing XML, JSON, basic HTML and the like) so that people can build 3rd party clients, their own consuming sites, and widgets.

Finally, I want to provide a mobile web version of the site. I’ll probably do some sort of device detection to refine the behaviour, but I should assume that plenty of browsers will not be able to do the XHR bit, and should have the page (containing all the panels) in one go – admittedly after a slightly longer wait.

Well, it occurs to me that these requirements can all be solved at the same time. Switching templates based on URL (or other HttpRequest clues) is pretty easy, so one thing I could do is have a filename extension convention for all my URLs. Imagine a ‘things’ view that lists things.

http://ivyroot.com/things – this is the human-consumable page: the view surrounded by menus, logos, graphics and the like. Knows how to switch outer template, based on various things, between desktop and mobile.
http://ivyroot.com/things.html – this is the table at the heart of the page, perhaps using unstyled markup containing the list of things itself.
http://ivyroot.com/things.xml, http://ivyroot.com/things.json etc – data APIs that list things in various serializations.

So perhaps we can set up URL routes like this:

...
(r'^things

, things), (r'^things.(?P<mode>[a-z0-9]+)

, things), ...

And have a view that looks something like this:

def things(request, mode=''):
    if not mode:
        mode = desktop_or_mobile()
    template = "things.%s" % mode
    ...

(Or, I suppose we could pass the mode into the template via the context and have some sort of a switch statement in the template itself. It might be good to pass it in, anyway, in case there is any further refinement required within each template.)

Anyway, let’s also assume that the things list is very long and takes a while to generate. For the desktop users, we might want to either load the table as HTML asynchronously using XHR, or paged into a jQuery grid control. For these two approaches, I can call back to /things.html or /things.json respectively (and do a little extra plumbing to make sure the JSON is in the right format for the grid control to consume).

But what of mobile? Well, for many devices, I can’t expect any XHR activity to be supported, so we need to insert the table HTML into the body of the things.mobile page before it departs for the client – and we may need to pre-page it too (if it’s long). But the good news is that, if I made it simple enough, the HTML generated by things.html might be good enough for either type of browser.

(And if not, I could easily do a little adaptation on that view too – perhaps turn my table into a list.)

So what I would like to have a is a way of embedding the output of one view (or even URL) into another, whilst the response is still being put together on the server. Try as I could, there didn’t seem to be anything in Django to do this.

Enter my first DjangoSnippet!

This basically allows me to put a template tag into the mobile template that pulls the output from one of the other views (identified by view name, with arguments; or a verbatim URL which would be the same as the one used in the desktop’s XHR request – nifty!)

It also makes sure that the context for that view is sandboxed with what it needs to render itself – so that I don’t have to worry about getting the context ready in the ‘outer’ view. That’s not necessary in our simple example above – but it might be useful later on if I am dynamically choosing which panels to place on a page, and I want them to gather together their own context prior to template rendering.

Now, I’ll need to be careful to make sure that any interaction elements within the table – say, some actions available on each item in the list, or a paginator – behave suitably for their location. But this may be as simple as toggling between further XHR requests (for desktop) and simple anchor links (for mobile). Forms-in-panels will be harder but similar.

So… there we are, a glimpse at the inner workings of a mystery application that’s many weeks away from seeing the light of day.

But hopefully I’ve raised a few thoughts about how you can treat the mobile version of your site as being a cousin of the data APIs that you might have written anyway. And also how you might be able to sneakily bring some of the funky XHR – that you wanted to impress your friends with on the desktop – up into the server to keep your mobile pals happy too.

All 134 posts →