Django and client-side javascript templates

Question

Intro

I'm currently writing a very standard Django based app (basically a fancy CRM/contact list sort of thing). It's sort of working, but as I keep trying to improve the interface with more and more AJAXy UI code (using jQuery) it's starting to get to be a real pain to work with. I'm getting long blocks of fragile jQuery event handlers which parse the DOM, push changes back to the server, get some JSON back, and try and update the DOM based on that.

I feel like, at a minimum, I probably want to add some client-side templates into the mix. Alternatively, I could try and switch to a JS framework, and just use my Django app as a database abstraction layer. Or even though I know and love Python, I could abandon the Django app, and try and go with a JS/Node.js solution or something.

Has anyone else been in this situation? How did you solve it?

Design goals

1. DRY: I don't want to have to replicate my models or my templates (or at least, any more than necessary).
2. I want visitors landing on a page to get the results rendereed server-side.
3. As visitors click on things, I'd like to handle that via client-side templates and rendering, and keep the server updated via AJAX calls to a REST interface.

So...how do I do this? I've collected links to a few frameworks and template systems. In no particular order:

dust.js:

This is apparently being used by LinkedIn to solve a similar problem. It uses Node.js on the server side which is not ideal (I've never used Node) but at least it's not JVM based. It also appears to be dormant on github - I've found mailing lists where people have been wondering where the maintainer went. It does sound pretty good - the blog post from LinkedIn does a good job selling the technology, especially the ability to compile it. But it appears to JUST be templating. Is that enough for what I want?

Mustache:

This option has both Python and JS implementations, and seems popular...but I can't find anyone who seems to be using Mustache templates with Django. Is that 'cause it's too easy to deserve a blog post, or is it impossible or otherwise inadvisable? It's also pretty limited; at a minimum I'd probably need to turn to some sort of MVC JS framework, right?

Backbone, Spine, KnockoutJS, EmberJS, JavascriptMVC, etc:

There's so many frameworks it's kind of daunting. All of them seem perfectly good at first glance. It also seems like I'd need to rewrite a LOT of my app if I went this route, and I'd really would like to find someone who has actually done something like this already. Also, it'd be nice if there was a clear choice for someone coming from Django as a background; I don't want to have to learn a half dozen different frameworks to evaluate them.

DerbyJS

This looks interesting as it handles both the client and server sides in one package, but a bit immature. They warn against using it in production, and if I understand the docs it doesn't yet support any form of persistence, which is...limiting. I get the feeling that if it was finished it would be perfect for what I want though...

So....

So, uh...now what? Has anyone used any of these tools to try and add client-side rendering to a Django webapp? How did it go?

Answer 1

For a complete integration with Django templates I found this: Yz-Javascript-Django-Template-Compiler. I never used it myself and unfortunately it looks a bit unmaintained.

Swig is a fast JS django-like templating engine.

Pure is a compiled JS templating tool that, with a bit of thinking, could work well with Django I think because templates are just normal valid HTML.

Other interesting JS template libraries:

• Handlebars (an extension of Mustache)
• Underscore

Answer 2

All the frameworks mentioned only work client-side. That being side, they are worth a look as they are a piece of the puzzle that you are facing.

Your design goals are exactly what I am trying to achieve with my current project. What I am attempting to do at the moment is:

Client-Side

Using Backbone + (some templating engine here)

Server-Side

Renders the first set of html, as well as renders some JSON data that Backbone can pick up and work with (for example, current page that was loaded, max pages etc.)

Example

Client loads: http://mysite.com/blog/archive/5

Server renders:

<html>     <head>         <script>             var data = {                 page:5 // Rendered by Server,                 maxPages: 10             };              $(function(){                 // Hook up all Backbone stuff, and hook into interaction events             });         </script>     </head>     <body>         <!-- Content -->     </body> </html> 

---

This solves Design Points 2 and 3: your server loads the initial state of your web application, and the user can navigate client-side from there.

With design point 1: On the client-side, everything is fine. However, for server-side you require a js engine to render your templates as it is. LinkedIn mentions this in their article:

• Server side support: if you have a client that can't execute JavaScript, such as a search engine crawler, a page must be rendered server side. Once written, the same dust.js template can be rendered not only in the browser, but also on the server using node.js or Rhino.

So you're stuck with 2 options:

• use a templating engine with either node.js or Rhino, or
• find a templating engine with support in other tech stacks.

Funnily enough, thanks to the post above, I realised that Mustache, which have libraries available for most common stacks, fulfils this need perfectly, so I will start having a look at integrating it with my project. (Not sure if there are any libraries available for Handlebars.js) This should allow us to write Mustache.js templates for both server and client side, and have them render html on either ends with the same templates.

EDIT: Should not that a "server-side" solution does not necessarily need to be in your language/stack of choice. For example, just because you're using Dust.js mean you HAVE to code your entire application in Node.JS. It may be possible to get by executing your compilation scripts via a shell command instead.

EDIT: turns out that Mustache does not seem to have a "precompilation" solution, meaning that templates need to be rendered directly into the page for client-side rendering (thus no caching), which isn't 100% ideal.