From the early days of the Web, servers would render the entire page, including CSS, images, and forms. A user would click a link or submit a form, and the server would generate another full page in response.
Then AJAX requests were introduced, making it possible to update a part of the page without regenerating the entire page. You can have search suggestions, forms that perform specific field backend validation on the fly, infinite scrolling, and more.
Generating full pages on the backend is crucial for sites that need to be indexed by search engines for SEO purposes.
With the help of the fantastic Django forms library, it is very fast to build projects that don't require complex and highly interactive interfaces.
Add a simple CSS framework like Bootstrap to ship projects quickly.
Best frontend framework for server-rendered Django pages¶
Back then, we used jQuery everywhere, which was pretty much the only choice. Also, it was incorporated into Bootstrap and had an enormous ecosystem of plugins and add-ons. jQuery played a crucial role in the early days as it took care of the differences in browser behavior.
Unfortunately, a website's frontend code with jQuery grew quickly and became an unmaintainable mess.
While there is nothing that prevents you from using jQuery today but given its drawbacks and the fact that popular modern browsers, for the most part, learned to respect standards – we don't need an abstraction layer which is jQuery.
No javascript framework¶
Some say that modern JavaScript allows enough not to use any additional JS frameworks.
It is valid for projects requiring a relatively small amount of frontend features and interactivity.
Django with Alpinejs¶
AlpineJS is a powerful tool and small tool.
It allows you to add interactivity to the page with a minimum of JavaScript code.
AlpineJS is lightweight and simple to learn. It is perfectly suited for creating small, decoupled components that can be reused in other projects.
When I say small, I really mean that. AlpineJS has only 15 attributes, 6 properties, and two methods.
In my day-to-day work, I often use maybe 3 of them all.
The best part is that AlpineJS doesn't require any additional configuration, and the JS file can be loaded from the CDN or as a static file served by Django.
React within Django¶
React is a great front-end framework.
I like it a lot because it doesn't introduce syntax or template tags like VueJS (e.g., v-if) or Angular does (*ngIf) – these are all pure JS in React.
That doesn't mean that React is simple to learn, but that's outside of the scope of this article.
I want to point out here that putting React within the Django project skyrockets the project's complexity. You'll need to add build steps for your used-to-be-simple Python/Django project, include NodeJS, and learn how to serve React pages and resources within Django.
Build and deployment times will become very long, it is more challenging to track errors, and generally, less fun to work with.
Best frontend framework deployed separately from Django¶
Where Django shines is in APIs.
Using Django REST Framework and DRF-Spectacular, you can ship clean API.
I prefer NextJS, a framework on top of React Framework for the frontend part.
It has fantastic file-based routing that makes it easy to manage routes by just putting code in files, and it will be available on the URL.
You can also generate client code call endpoints, so you don't have to manually keep client code in sync with API changes.
Benefits of having separate frontend and backend code: - independent deployments - can work on multiple versions of frontends if needed - when the time comes to scale the team, you can hire a person for frontend and a person for backend, not a superstar that knows both.
In addition to the front end, you can have other API clients, like command line tools or mobile apps.