Progressive improvement with Django and Backbone - how to integrate the two?

I have a very simple Django application that allows users to submit a form and view a filtered list of holidays by country, duration and price.

I would like to use Backbone in the interface so that users with JS enabled do not need GET to view the results, but can load them dynamically.

I want to use progressive improvement so that users with JS will get Backbone work, and users without JS can use the form. I also want to follow the DRY principle.

My question is how best to do this. Are there any examples of using these two together with minimal repetition? I mean in particular:

  • Routing URL, e.g. /italy/1-week/from-500-to-1000/ - I now need to write two sets of routing codes: one in Django urls.py and one in the Backbone router to get the country / duration / price options?
  • Parameter-based data filtering - do I need to write two separate ways to do this: one in views.py and one in Backbone? (I assume that I can at least use one API for both calls.)
  • Rendering in templates - do I need to write one list template for Django and the other for Backbone or use both templates?

The best (only) example I've found to integrate Backbone into Django so far is the Josh Bohde Django Backbone repo , which is not gradually expanding.

I also found this progressive blog post with Backbone and Rails , but it would be very helpful to see something like this for Django.

UPDATE: just found this CO question on a similar topic - is the situation really hopeless as the answer makes it sound?

+7
source share
3 answers

is it really as hopeless as the answer makes it sound?

To a large extent. But, since I work on a site that used to be based on Django, but is now becoming the base, I can offer several considerations:

URL routing as / italy / 1-week / from-500-to-1000 / - I now need to write two sets of routing codes: one in Django urls.py and one in the Backbone router to get the country / duration / parameters prices?

Yes, but there are ways to minimize duplication. The approach we took was for Django to spit out all URLs as JS variables to our main HTML page template:

 <script> URLS.report_error = "{% url app.log_client_error_view %}"; URLS.access_file = "{% url app.access_file_view 12345 %}"; </script> 

Now we have a pattern of using 12345 for parameters in each URL that we generate; this makes it easy to translate this URL into a regular expression Backbone route, because we can basically replace 12345 with ([^/]+) .

In the interest of full disclosure, we have a bunch of routing regular expressions that are written โ€œmanually,โ€ but this is not because we were unable to automate them; it's just that we moved away from the side of Django, so we have no reason to clear this code. If you want to get solid support information for both, you should have a fairly simple / simple translation.

Parameter-based data filtering - do I need to write two separate ways to do this: one in views.py and one in Backbone? (I assume that I can at least use one API for both calls.)

This is an almost inevitable problem on any site, not just Backbone / Django. You must filter the data on the server side, because you can never trust the client side (for example, the user can disable JS). At the same time, filtering only on the server side is sooo 1990, so you need to create (duplicate) logic for filtering on the client side (so you can tell the user "you forgot to provide the X field", without waiting for the server to return to the server) .

However, there are ways to limit this duplication. I myself have not worked on this subject, but I know that an employee managed to use Django forms in an odd way (he took the Django form and then parsed them a bit before using them as a template for the Backbone View). This did not completely eliminate the duplication, and, unfortunately, I do not remember any details, but it helped.

Rendering in templates - do I need to write one list template for Django and the other for Backbone, or can both use the same templates?

Handlebars templates have similar syntax to Django templates, if all you do is variables ( {{foo}} ). If you want to share the logic between them, they have a slightly different syntax ( {% if foo %} vs. {{#if foo}} ), but they are close enough that if you don't mind doing a little parsing work, You can easily convert one to another.

So yes, you work hard to support a very small subgroup of your users (those with browsers that cannot support Backbone). I highly recommend that you look at the statistics of your userโ€™s browser somewhere like Google Analytics (or see general statistics on the Internet if your site is not already up) to decide whether all these problems really are behind such a small percentage of your user base, Without statistics you cannot know how small this percentage is, and obviously, a key factor in this decision.

For us, the choice was obvious: we need our users to use browsers made in this century (which is largely related to the database), and just go to all Backbone. But if this choice is not so obvious to you ... good luck trying to dry your Django and Backbone code :-)

+3
source

I just read about a completely different solution to this problem, which I thought I would share: HTML snapshots (https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshot). The page I'm linked to is Java based, but you might have installed something similar in Python / Django.

The basic idea is that you install a runner without a Javascript header on your server, and when a web crawler hits your site, you use that runner JS to generate HTML code that would generate your base code if it ran normally on the client, then it sends this HTML code back to the web crawler, allowing you to have one set of code for the client and server.

There may be some minor potential problems when running JS without a header (they are not 100% identical to the built-in JS web browser), but when using the HTML Snapshot for this approach, they should not be too relevant.

+1
source

Not sure if you are still struggling with this, but I worked on finding some solutions to this problem. I wrote a preliminary blog entry:

JavaScript interoperability with Django

which I will follow in a couple of weeks with a complete Notes application example done using Django + Backbone + Marionette + Some Other Plugins.

The code will show how to use client-side Django templates, so this may be useful for you.

If you're interested, you can either after my blog or Twitter (better) @sid_azad

0
source

All Articles