-1

I have been told it is 'bad practice' to return data from a Django view and use those returned items in Javascript that is loaded on the page.

For example: if I was writing an app that needed some extra data to load/display a javascript based graph, I was told it's wrong to pass that data directly into the javascript on the page from a template variable passed from the Django view.

My first thought:

  • Just get the data the graph needs in the django view and return it in a context variable to be used in the template. Then just reference that context variable directly in the javascript in the template.

It should load the data fine - but I was told that is the wrong way.

So how is it best achieved?

My second thought:

  • Spin up Django Rest Framework and create an endpoint where you pass any required data to and make an AJAX request when the page loads - then load the data and do the JS stuff needed.

This works, except for one thing, how do I get the variables required for the AJAX request into the AJAX request itself?

I'd have to get them either from the context (which is the 'wrong way') or get the parameters from the URL. Is there any easy way to parse the data out of the URL in JS? It seems like a pain in the neck just to get around not utilizing the view for the data needed and accessing those variables directly in the JS.

So, is it really 'bad practice' to pass data from the Django view and use it directly in the Javascript?

Are both methods acceptable?

What is the Django appropriate way to get data like that into the Javascript on a given page/template?

Improve this question

1 Answer 1

Reset to default
2

Passing data directly is not always the wrong way to go. JS is there so you can execute code when everything else is ready. So when they tell you it's the wrong way to pass data directly, it's because there is no point in making the page and data heavier than it should be before JS kicks in.

BUT it's okay to pass the essential data so your JS codes knows what it has to do. To make it more clear, let's look into your case:

You want to render a graph. And graphs are sometimes heavy to render and it can make the first render slow. And most of the time, graphs are not so useful without the extra context that your page provides. So in order to make your web page load faster, you let JS load your graph after your webpage has been rendered. And if you're going to wait, then there is no point in passing the extra data needed because it makes the page heavier and slows down the initial render and it takes time to parse and convert those data to JSON objects.

By removing the data and letting JS load them in the background, you make your page smaller and faster to render. So while a user is reading the context needed for your graph, JS will fetch the data needed and renders the graph. This will cause your web page to have a faster initial render.

So in general:

When to pass data directly:

  • When the initial data is necessary for JS to do what it has to (configs, defaults, etc).
  • When the time difference matters a lot and you can't wait too much for an extra request to complete the render.
  • When data is very small.

When not to pass data directly:

  • When rendering the extra data takes time anyway, so why not get the data latter too?
  • When the data size is big.
  • When you need to render something as fast as possible.
  • When there are some heavy processes needed for those data.
  • When JS can make your data size smaller (Decide what kind of data should be passed exactly using options that are only accessible by JS.)
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks for putting this out there - it makes a lot of sense to me. So in the instance I gave, a graph... if that graph was based on a specific ID in the URL or something... it would be better to just load that ID into the JS directly - then use that to make the AJAX call for all the graph data (larger data); am I understanding that correctly? I really like these as general guidelines as to when to use it directly and when not to.
No problem. You can get URL parameters in js: window.location.href and then get the data needed. The list for when to/not to can be longer. I'll add more if anything came to mind.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.