Combining Javascript and Django in a smart way - Przemek Lewandowski¶

Tags: django, djangocon

Django is a javascript-agnostic web framework. Nothing is built-in so you can be up to date all the time. Javascript development moves very quickly.

The basic approach is to include some custom inline javascript in the html pages. It quickly leads to illegible code that’s hard to work on and hard to distribute.

Javascript has frameworks, too. They give your application structure and take work off your hands. This is the advanced approach. It includes several parts:

• Communication with the server (REST api, websockets).

• Application building: combining and minimizing files.

• Static files management.

• Javascript improvements: coffeescript and so.

What Przemek Lewandowski needed was a powerful javascript framework, coffeescript, testable code, js code minimization and fingerprinting for avoiding caches. And also rapid REST API development.

Javascript framework

They started with backbone, but it wasn’t enough. They added marionette to backbone, but it still wasn’t good enough. There’s a lack of a binding mechanism; there are no reusable views; models are poor. AngularJS and Ember are better.

Coffeescript

It is controversial, but it helps to write code faster and use less code for it. It performs as well as javascript as it compiles to javascript. They used requireJS for painless coffeescript integration. Requirejs allows for modular code and gives you both a builder and an uglifier.

Building javascript apps

In the end they used django-require instead of django-compressor and django-pipeline.

REST api

Piston isn’t really maintained anymore. Tastypie is reasonable, but django-rest-framework is the nicest one. It uses class based views, so it saves you a lot of work (even though still being very customizable).

Static files management.

Django’s built-in static files management is good. And you can add extra “storages” to it to get django to store the static files in the cloud, for instance. django-require can be plugged in, too, to add a fingerprint to javascript files to ensure the latest version is always used.

There’s more, like Bower, a javascript package manager. He didn’t look at this yet. (Note by Reinout: look at http://blog.startifact.com/posts/overwhelmed-by-javascript-dependencies.html for a starting point)