Wellfire Interactive // Django consultants for your existing Django site

Should you add React or Angular to an existing Django site? (This Old Pony #39)

Trick question: you should add YabbaDabba.js, a new framework from iMzanga that lets you write JavaScript _just _like Prolog.

Sorry, sometimes I make jokes.

The truth is that this is a serious question that nips at developers and product owners. New interface paradigms demand different tooling and often the original Javascript used on an existing app is the thing that ages the worst.

Why Javascript frameworks and what does this have to do with Django apps?

First off, you don’t necessarily need to add a Javascript framework to your Django site. I’m including jQuery in that sweeping statement. However most sites will need some kind of minimal client side interactivity and beyond a certain point a framework starts to prove very useful.

Javascript frameworks on the front-end provide many benefits that parallel what Django provides on the backend. Patterns for development so we don’t have to make mundane decisions over and over, shortcuts to simplify development, pre-packaged features, and not to mention a bunch of library code that is well tested.

User facing Django apps from SaaS’s to educational portals to CMS’s need to allow users to make and see changes without affecting the full request/response cycle, and frankly, this often grossly simplifies the application too (imagine having to code every possible template state individually).

Django doesn’t do this stuff. First off, it’s a backend framework. Secondly, it doesn’t provide any kind of Javascript for end user consumption[x] or any kind of opinion about what you should use.

That’s left for you.

What is the best Javascript for a Django site?

This is a trick question because there isn’t a “best” answer across Django sites.

Years ago Rails shipped with Prototype.js and so that’s what Rails uses ended up using. It was considered a mighty shame that Django didn’t ship with such support built in since AJAX was all the rage.

Rails has since abandoned shipping a readymade Javascript framework and Django continues to operate as “front-end” agnostic.

It is a little when you think that even Django’s configurable components have defaults or community conventions (templates and backing databases come to mind). However we draw the line at the HTTP request, which means we have to figure this one out ourselves.

The considerations of picking - and migrating to - a Javascript framework

Your first consideration should be what are you trying to accomplish. Do you need to add some minor interactivity (modals, dropdowns, etc) or the equivalent of a single page application?

Next, how extensive throughout the app and the code are these changes? That is, is it cheaper to repeat code or repeat patterns?

Third, what kind of Javascript do you have in place now? Because quite likely you won’t want to replace everything in one fell swoop. Migrations of this sort can take place over quite a bit of time for production apps.

With regard to the framework itself you obviously need to consider your team’s knowledge. Does the framework’s choice of paradigms mesh with your team? Is it compatible with your existing Javascript-ing? Does it scale - not just up but down to smaller features? Ultimately you want to know what you’re buying into.

And now some thoughts and opinions

It’s better to be conservative here rather than pick something that seems full feature for the app you want to build in two years. Personally I think Elm[x] is a cool choice but the buy-in in non-trivial. React is a perfectly fine and justifiable choice but setting up a complicated immutable data store with Redux is often overkill. Overkill is expensive.

If you don’t have an API you’ll either be working with in-page JSON or data from your templates. This is a constraint you need to pay attention to, especially if you want to build any kind of client interaction consuming and sending data to the server. Some frameworks make working with data from the DOM easier than others.

Our own go-to workhorse for a while now has been Vue.js; it plays nice with jQuery, it brings to bear the design patterns required by larger client side application and it can still scale down to individual features.

But I’m still not going to tell you that it’s the one you should choose.


[0] http://elm-lang.org/
[1] A cartoon intro to Redux
[2] Vue.js

Learn from more articles like this how to make the most out of your existing Django site.