Earlier this month, I decided I needed to add an e-commerce section to an existing website and began a search for examples written with Django. The best one I found was a tutorial by Dennis Ivy on Udemy. However, it came with a React frontend on it. While I was initially interested in a pure Django application, I figured it never hurt to learn something new, so I dove right in. And the more we did in the tutorial, the more curious I became about how (and why) I might incorporate this new tool into my toolkit.
First, let's get some terminology out of the way so we're all on the same page here.
The backend refers to the piece of your application that is behind the scenes and out of sight of the users. The backend handles the requests for data and prepares data to transmit back to the user.
The frontend refers to what the user sees and interacts with. It's the layout and the style of the page, and any interactive forms that the user may fill in.
The browser is the application on the user's device that he or she uses to engage with the web app.
What is React?
Why Do Developers Like React?
From the research I've done, here's why developers like React:
- React is component based, meaning you can easily build dynamic web applications because there's less coding. You can build customized components that can be reused again and again.
- React is really fast. It uses Virtual DOM, which allows React to evaluate an object's state and only update objects in the real DOM which actually changed. In other words, it doesn't have to refresh the entire page every time something changes.
- React is used to develop both web and mobile apps.
- React has a large community with multiple libraries in place that can be imported and used to enhance the basic features. And a large development community means lots of support and places to find help if you get stuck.
- Developers also like React because it is easy to learn. (I'm still deciding if I agree with that. Although I will say I found it easy to follow along in the tutorial and understood exactly what we were coding and what that code was doing.)
Why Use React Instead of Django Templates?
The trend to use a separate frontend (instead of Django's built-in templating system) grew with the increased popularity of single-page applications or SPAs. You can build a single-page app using Django templates, but you have to feed all of your data to the template up front, then go back to the database and update the entire page if things change. And frequently querying your database affects performance. In today's world, performance is key when users have little patience for slow websites.
Developers addressed the performance issue by putting a sleek, fast frontend for users to see, then linking it to their Django backend via an API. An API (application programming interface) is like a middleman or translator. It takes data from the database and outputs it in a standard format so different consumers (i.e., programs) can use it. A common API package used with Django is Django REST Framework.
One of the biggest advantages in using a separate frontend and backend is the independence of one from the other. Independence gives you these advantages:
- Development can proceed separately. Larger organizations often separate IT teams into distinct groups (or even departments) for the frontend stack versus the backend stack.
- You can easily change one without affecting the other. What if I like the way it looks and acts on the frontend, but want to change the backend from Django to Flask? Or maybe I'm happy with a standard backend boilerplate, but want to offer different frontend looks? This becomes much easier when web pages aren't integrated tightly to the backend as with Django templates.
- Deployment becomes easy because you can deploy one without affecting or needing to redeploy the other.
- Multiple clients, whether they are web or mobile apps, can use the same backend and API. That feature alone makes separating the frontend from the backend a huge consideration. Of course there are also disadvantages:
- Instead of one project, you now have essentially three.
- Django has a whole lot of built-in functionality, which makes things very convenient (forms and validation) that you won't use with a separate frontend.
- You will duplicate effort when you have to write the same logic for the Django backend and again in the React frontend.
- When things break, you've got a bigger playing field to track down where the error happened. (Luckily, there are linting tools for that and both the Django and React servers give nice, easily understandable error messages.)
How Does It Work?
If you really want to play with it, a simple Internet search will return pages of tutorials on using React with Django, some simple and others extremely complex. My intention here is to give you a big picture view of how it works. There are basically three pieces to configure:
- A basic Django project
- Django REST Framework for the API
- The React frontend
For the Djangonites (Is that a word?) out there, you do surprisingly little in your Django project set up beyond the models, views, and urls. There are a few files you must set up (like serializers), but it's nowhere near as involved as some of my best website creations. In this scenario, Django’s primary role is the keeper of data and routes to that data.
As with most things I've discovered since beginning my coding journey, the answer to whether or not to use React with Django is... it depends.
Is your app big enough to warrant separating out the pieces? Is your app going to grow? Does splitting the frontend from the backend simplify or add complexity to your application?
Here are some other articles to read about using these two development tools together:
- Do I NEED to Combine Django with Vue or React? by Vladislav Supalov.
- Why Developers Use React Native and Django Together by Nakul Shah