ansaurus

Question

How to manage Javascript modules in django templates?

Answer 1

+1 A:

If more than one page uses a given JS file you should consider concatenating all of them together and minifying the result. This reduces net connects which will improve overall page load time. Don't forget to bump your expire time out to at least a week or two.

Peter Rowell 2009-11-18 05:59:05

Thanks Peter. There are js compression routines out there which might be a handy afterthought in a piece of Response Middleware; however this question is about how best to lay out a django project to ease having lots of javascript in the responses without headache from the source getting chaotic. I'm expecting 'includes' and 'templatetags' will be involved somehow.

John Mee 2009-11-18 07:26:00

You're right: I had a conversation in my head and only gave you half of it. We tried going the 'use templates to include only the JS files for any given page' route, but within two clicks the user would have sucked down 95% of them anyway. Rather than eat all of those separate downloads and having to deal with the messiness of making sure each page included the right things, we tried shoving all of it into one concatenated file and minifying it. The result was surprisingly small and we then just put the link-tag in the base template. Done.

Peter Rowell 2009-11-18 17:25:39

I agree with Peter here -- It is probably easier to just to concatenate them together and let the user download them all at once. Look at django-assets as an easy way to manage the concatenating: https://launchpad.net/django-assets

sheats 2009-11-18 18:04:28

Answer 2

A:

I think you are going to have a hard time keeping all four pieces together and applying them in a fell swoop - simply because some appear in your <head> tags and others in the <body> tags.

What have done is made sure that jQuery is loaded for all pages on my base.html (as well as my base css file) ... then, I have block tags for {% block css %} and {% block js %}. Templates that inherit the base.html file can supply their own javascript and css (and only the stuff that is needed).

I have created some template tags that create ajax functions whose output is based on the object being displayed (for example, including the object_id) -- which cuts down on re-coding.

One thing I haven't tried but am interested in is django-compress.

thornomad 2009-11-18 11:41:42

Answer 3

A:

"How to manage Javascript modules in django templates?" I know, I know! Answer: very hard.

ja 2009-11-18 12:20:40

Answer 4

+2 A:

Been a while since I posted this problem. What I've been doing to solve it is:

write the javascript parts you need as a library which is served statically
call the routines in the static library from the template with your server side values

Restraint is required to write it in such a way that it acts as a client side script only; don't be tempted to try and inject values from the server at the time of serving the js. Ultimately I've found it less confusing to apply server side variables strictly in the html template.

In this way I'm able to:

keep the javascript selectors on html tags inside the same file (ie: the template)
avoid templatetags altogether
re-use each javascript library in different places, and
keep the css/js/html pieces in all the places where they're expected to be found

It's not perfect, but it's getting me by till a neater idea comes along.

For example a js library in "media/js/alertlib.js" might include:

function click_alert(selector, msg){ 
    $(selector).click(function(){ alert(msg) })
}

and the template has:

<script type="text/javascript" src="media/js/alertlib.js"></script>
<script type="text/javascript">
    click_alert('#clickme', {% message %})
</script>

<div id='clickme'>Click Me</div>

John Mee 2010-03-09 03:15:41

ansaurus

tags:

views:

answers:

How to manage Javascript modules in django templates?

related questions