June 17, 2009

Simple ‘on-server’ mobile AJAX in Django

–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.

Comments (7)

  1. June 17, 2009
    Bryan Rieger said...

    Very nice idea indeed. I the fact that you’re still able to support both clients with and without Javascript using this approach.

    BTW – nice note on http://ivyroot.com ;)

  2. June 17, 2009
    Paul said...

    Neat. I think this approach has applications beyond the mobile/XHR context, too, though they may not be quite as interesting. Could eliminate the need for custom inclusion tags in some cases.

    Specifying output format via filename extension is simple and REST-y. Takes me back to the first piece of software I saw that did that dynamically and well: Blosxom.

    (Found this via the Djangosnippets Twitter feed, BTW.)

  3. July 16, 2009
    Steve Anderson said...

    One thing to be wary of with Django, is that switching templates in real time based on the request is NOT THREAD SAFE, and you must be extremely careful to reset any settings that you modify at runtime. The Django docs (http://docs.djangoproject.com/en/dev/topics/settings/#altering-settings-at-runtime) display a very mysterious message simply telling us never to do anything of the sort, but don’t really explain why!

    This talk by Simon Willison sums up a few of the annoying things about settings.py, one of which being that changing settings at runtime is not thread safe – http://simonwillison.net/2009/talks/eurodjangocon-heresies/.

    I unfortunately learned this when trying to write my own mobilization middleware for Django (http://www.djangosnippets.org/snippets/1437/). I’m still looking for a decent way to do dynamic template switching with Django, but the globalness of settings.py makes this a bit difficult.

    Simon has suggested some improvements (http://simonwillison.net/2009/May/19/djng/), but of course this involves some significant reworking of the Django core.

    I think we definitely need to look into a better way of doing this for Django, as it is a growing need of a lot of apps built in the framework. It’d be good to hear your thoughts…

  4. July 16, 2009
    Steve Anderson said...

    I’ve just realized that you actually do this in quite a nice way, by building up the string in your view and calling render on the correct template. Makes sense. I must have misread.

    Even so, it’s handy to know about changing settings on the fly being dangerous.

  5. July 19, 2009
    James said...

    Hi Steve,

    w.r.t. to mobilization, I use middleware that decides which page to display (based on this algorithm) and then pops its decision into the request object.

    A context processor then puts the master mobile-or-desktop template name into a universal context variable called page_template, and then my page.html template (which all pages derive from) is literally just:

    {%extends page_template%}

    (NB: page_template is a variable, not a literal – that’s the trick)

    I then just need something like page.mobile.html and page.desktop.html with the appropriate skeleton of the two types of page (but with mostly the same key blocks), that this extends tag will refer to.

    … in other words I am able to dictate the top-level look from the incoming request without doing anything too unnatural with respect to templates and settings :-)

    I need to write this up I guess.

  6. July 21, 2009
    Steve said...

    That’s pretty nifty.

    It’s things like this that make me love Django :)

    I was thinking of extending the built in Template object and render_to_response function to decide which template to use (mobile, json, xml, desktop etc.), meaning you could take that little bit of code out of your views.

  7. November 10, 2010
    Mike said...

    I found your blog on bing and will bookmark it now. Keep up the nice work.

Leave a Reply