Best practice for using JavaScript in Django

Question

I want to push my Django project with some JavaScript/jQuery. To make it right from the beginning on I'd like to know, which way of organizing the .js-files ist the optimal one.

For loading one big file includes less overhead than loading many small ones and also because it looks cleaner in the code I considered to make one global .js-file and include that with the base.html (from which every template inherites). However, the result would be, that JavaScript would try to assign all the event-binings, even if the elements which the events should be bind to aren't in the current document. With all the jQuery-selectors which then would have to do their work that can't be too efficient. From earlier web-development experience I know that one can do something like if(location.href == '/some/url/') { (JavaScript code) ... }. That seems not practicable for me in this case, for with changing URLs, I'd have to change the URLconf and the .js-file (while using reverse() and {% url %} to prevent that elsewhere). I guess there is no possibility to make use of the named URLs here?

Has anyone an idea how to organize the JavaScript without having a file for every single template on the one hand and without killing performance unnecessarily?

nrabinowitz · Accepted Answer · 2011-08-30 21:12:20Z

5

I don't know that this question is specific to Django - similar issues come up managing Javascript in all sorts of systems.

That said, I usually try to tier my Javascript files, so that truly global scripts and libraries are included in one file, scripts specific to a section of the site are included in a set of section-specific files, and scripts specific to a single page are included in yet another site of page-specific files (or in inline code, depending on the context).

Django has good support for this approach, because you can tier your templates as well. Include the global script in your base.html template, then create a mysection-base.html template that inherits from base.html and just adds the Javascript (and CSS) files specific to that section. Then subpages within that section can inherit from mysection-base.html instead of base.html, and they'll all have access to the section-specific scripts.

answered Aug 30, 2011 at 21:12

nrabinowitz

55.7k10 gold badges152 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

j0ker Over a year ago

I guess that' the best compromise. For that's also the way my CSS is organized I should do so with my JavaScript too for clarity's sake.

Cromulent · Accepted Answer · 2011-08-30 23:07:33Z

3

I find django-compressor invaluable as it automatically compresses and minifies your JavaScript and CSS pre-deployment. It even automatically handles SASS, LESS and CoffeeScript if they float your boat.

answered Aug 30, 2011 at 23:07

Cromulent

3,8284 gold badges35 silver badges45 bronze badges

2 Comments

j0ker Over a year ago

I didn't know there is such things especially for Django. Will have a closer look, thanks!

krs Over a year ago

django-compressor is the single app that is included in 100% of our projects, its invalueable.

Mikhail Korobov · Accepted Answer · 2011-08-30 22:18:20Z

2

Apps from http://djangopackages.com/grids/g/asset-managers/ may help.

answered Aug 30, 2011 at 22:18

Mikhail Korobov

22.3k8 gold badges75 silver badges66 bronze badges

Comments

Raynos · Accepted Answer · 2011-08-31 00:01:18Z

You use modular javascript.

Choose your packager of choice (mine is browserify) that packages all your modules into one package that you minify and gzip. You send this file to the client and it is cached.

This means you have all your code cached, minimize HTTP requests and stay lean and efficient.

And since you have modular code you just load your code as you would normally.

Personally I would use some form feature detection to load modules. You can choose to feature detect on almost any feature (some css selector, routes, url segments).

Feature detection would look like this :

var Features = {
  "class": "name",
  "class2": "name2",
  "dynamic-scroll": "dynamic-scroll",
  "tabstrip": "tabstrip",
  ...
}

for (var key in Features) {
  require(Features[key]);
}

Where as routing with davis would look like

Davis(function() {
  this.get("blog", function(req) {
    require("blog")(req);
  });

  this.get("blog/:post", function(req) {
    require("blog-post")(req);
  });

  this.get("shop", function(req) {
    require("shop")(req);
  });
  ...
});

Alternatively you can try an event driven architecture. This means each module binds to events

// some-module

mediator.on("blog-loaded", function() {
  // load in some libraries

  // construct some widgets

  mediator.emit("blog-ui-build", widgets);
});

And you would need some bootstrapping in place to kick off the event loop. Feel free to look at an EDA demo

This is well and good for lesser frameworks, For django we have django-compressor that does this for you even better.

Collectives™ on Stack Overflow

Best practice for using JavaScript in Django

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related