CODEWITHSUNDEEP
javascriptpythondjangodjango-templatesdjango-views
Hanny
Hanny

Reputation: 682

Best practice for getting data from Django view into JS to execute on page?

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:

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

So how is it best achieved?

My second thought:

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?

Upvotes: 0

Views: 496

Answers (1)

Navid Zarepak
Navid Zarepak

Reputation: 4208

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.)

Upvotes: 2

Related Questions