[Django]-Django and client-side javascript templates

by

6đź‘Ť

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:

👤Etienne

4đź‘Ť

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.

👤Daryl Teo

2đź‘Ť

I know it’s old question, but i somehow got here, so probably others do.

I also try to find solution to build RIA, which is going to work on as many devices as possible, responsive, performant and with good ux. Django on backend with templates are being implemented to have option to fallback gracefully when required.

Now I’m looking through all those js frameworks and I’m a bit worried, mostly about performance and accesibility.

Taking into account templates are being implemented on server I lean towards solution with doing partial DOM updates with html fragments rendered on backend and sent to the thick client instead of json. Looks like the best option for me.

Idea taken from: http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/

Regards,
Mike

👤okrutny

1đź‘Ť

I’ve used Mustache on both the server side and client side, and it worked great. The project I used it in was just a small side project, but I was really pleased with the results and would recommend it.

The project, a web app for debugging HTTP services, is on GitHub if you want to take a look: Spyglass.

👤Justin Voss

Leave a comment