Do I NEED to Combine Django with Vue or React?
Everybody seems to be using a fancy frontend framework - React here, Vue there. To make matters worse, it seems that every project needs to be a single page application (SPA) or progressive web application (PWA). Just because.
Is it really that bad if you’re “only” using Django templates styled with Bootstrap and sprinkled with jQuery?
The short answer
No, you’re not doing anything wrong by not-using a frontend framework with Django. There’s no unwritten law, that everything has to turn into a SPA, or be rewritten from scratch in React. Your project can be awesome without them, and you won’t miss out much.
Go you! Now that this one’s out of the way, let’s go a bit deeper to help you approach similar questions in the future.
Let’s talk about the why behind using frontend frameworks.
Why are SPAs a thing?
The most popular use case for Vue and React are single page applications. With the SPA approach, the frontend and backend become almost separate projects. They only communicate via an API to exchange data. This has upsides, but also costs.
First, let’s look at the legitimate reasons why people decide to split up the frontend and the backend, building an SPA:
- Separation of concerns - backend and frontend developers can focus on their own stack and tools they know well. A frontend developer does not need to learn Django to fetch data via the REST API.
- Less room for interference. Mostly with team consisting of multiple people. When you have multiple projects, backend developers don’t have to work on the same code as frontend developers – and the other way around.
- Smoother user experience, with less loading times and less perceived transitions - data is fetched in the background, and only a part of the page is reloaded. With Django templates, you are reloading the page completely with each click.
Those upsides don’t come for free. Here are some things which become harder when you’re choosing to build a SPA:
- Now you’re working on three projects instead of one. You need to implement the Django backend, the API and the new frontend project as well. This adds complexity.
- Simple things can become harder - you might need to figure out how to authenticate your frontend session with the backend, and how to bass CSRF tokens correctly.
- You lose some of Django’s built-in convenience - form rendering and validation will not work out of the box as it would Django templates.
- You’ll have duplication of effort. Logic might need to be implemented in the backend and in the frontend.
- You’re dealing with a more complicated tool stack because more tech is used. You’ll have to make more things work together.
- Depending on your project, SEO concerns may arise. There’s some work involved to make your SPA play nice with search engines.
When you’re wondering if you should transition your app to a SPA, here are some questions you can ask yourself:
- Is your team growing, and do frontend and backend developers struggle with frequent merge issues?
- Are you prepared to handle the additional complexity of providing an additional API and having two somewhat-independent projects instead of one?
If you don’t have a clear YES for both of those, you might not want to go the SPA route.
There’s a two question which has not been addressed yet:
- Would your product benefit from a smoother-feeling user interface?
- Are whole-page reloads an issue?
- Would you like to make your frontend more dynamic without having to touch jQuery?
Frontend frameworks can help you with those, but you don’t need to build a SPA to get them.
Using a frontend framework without SPA effort
Good news if you did not like the SPA downsides: going full-SPA is not necessary! You can get the benefits of using a frontend framework without the complexity and costs of a SPA.
Vue.js is designed to be incrementally adoptable. You can define complex, dynamic user interfaces and get that smooth SPA feeling without having to take a leap of faith first or rebuild your site from scratch.
You can integrate Vue.js into your Django templates piece by piece, to get a bit more reactivity where it matters. Vue can be used like (or instead of) jQuery, to spice up single templates and add interactivity incrementally.
If you want to try Vue.js with your Django project, you can follow this approach without having to design a REST API up-front. You won’t have to create new views, rethink your url patterns, change your deployment or introduce Webpack.
Your Django project does not NEED a frontend framework, but it’s quite simple to give it a try with Vue.js. You can see if your Django project can benefit from using a frontend framework, and learn by doing instead of making a hard decision up-front.
It’s easy to get started! Go ahead and add a dynamic component to your site. Or pick a template where you’re using jQuery to manipulate DOM elements and try to replace it with Vue. Just keep SEO in mind, and you’ll be fine.