React Embedded in Django Forms

One technique we have found to accelerate our project development lifecycle is balancing the use of Django forms/views and React. React is a great front-end tool, but React forms are not quick to create and often require lots of work, even to make simple data collection forms. Django, on the other hand, makes building highly-performant forms really straightforward.

Design

This approach does require some forethought before you begin development. Specifically, identifying those parts of your application that should be built using Django forms/views and those parts that should be written as a React app. The last thing you want to do is start building using one approach for a given piece of functionality, only to realize that you should have taken the other approach. Identifying the correct technology is a skill that takes time to develop but will allow you to quickly create robust user experiences that are easy to maintain.

There is a fine line to walk when mixing two front-end technologies (Django forms and React), but the reward is worth the inherent complexity. Writing parts of your application with lots of visual interactions — like panels loading out or one element restricting the way another element performs — can quickly become spaghetti JavaScript in Django templates, and a maintenance nightmare!

React provides a nice framework for isolating logic and breaking down how elements/components communicate with each other by providing a better framework for easier, long-term maintainability. The flip side is — writing a straightforward data collection form in React is unnecessarily complex. The engineer needs to build all the validation logic themselves. Django forms can do this very easily and can tie the validation directly to your Django models. Much of the validation comes for free or relatively inexpensively with Django model forms.

Implementation

To implement this, we embed react applications into Django templates where the high level of UI/UX complexity demands it. We build a directory structure of React applications, shared components and common business logic. Our build process leverages webpack to bundle each React application. We then have a template tag that understands these application names (based on the folder name) and goes and loads the webpacked files inside the Django template.

Since the React app is embedded in a Django template, data needed to initialize the application can be passed through the context, allowing for faster page loads and improved responsiveness. We also leverage Django REST framework to provide APIs where necessary for the React portions of the application to load data they need as the views require (filtering items in a dropdown, for instance).

Build for success

The goal here is to balance both time of development and long-term maintainability. To avoid unnecessary amounts of markup, JavaScript or Python, and to use the tool that is best-suited for the job for each particular piece of the application. The engineering team needs to be able to determine where using React is the best option and where Django forms/views is a better option.

There are certainly still use cases where highly complex, customized form UX/UI can be more maintainable using React rather than Django forms/views. When you start needing parts of the screen to communicate to other parts of the screen without reloads (for example a calendar or an event creation form for that calendar) it is better to rely on React's ability to create small, reusable chunks of front-end logic. By properly leveraging the correct balance of these two approaches, we can quickly create a robust user experience.

A side benefit of this process is that it will make cross-training easier for your front-end and backend engineers, enabling them to see both parts of the stack as they work in the same codebase, instead of isolated codebases. Another improvement is when you deploy the backend, you are also updating the frontend, as the frontend is served by backend templates with Sever Side Rendering (SSR). Thus, you do not have to worry about breaking changes being deployed in one place without the other being updated.

Results

We have found that we can build and deploy highly complex applications faster using this process while also keeping tech debt and long-term maintenance manageable. The performance of our experiences developed in this manner has been excellent. Our team at JBS is able to quickly and confidently determine which technology is appropriate. Paired with this architecture allowing for rapid development of high quality software.