HTMX took the developer community by surprise, and rightfully so. It offered an alternative to using JavaScript and bloated SPAs for web apps for those did not want to dive into the complexity of frontend frameworks and JavaScript.
Four years ago, when I first started building my Saas startup with Django, the recommendation was to build an API with DRF or FastAPI and use a frontend framework such as React or Vue.js. I tried them both, and while I really liked the latter, the disadvantages became more apparent as the project grew.
In this article, I will share what led me to revamp the front end over 6 months using HTMX, the pros and cons, and whether it was worth it.
Fighting the Framework with Vue.js/React
Django is one of the best frameworks I have worked with over the past 6 years. I like the ORM, the opinionated and easy-to-follow project architecture, the admin panel, which is a gift when managing customers and large amounts of data, and best of all, the top-notch templating and security features.
This is if you are using Django without an API and a frontend framework…
Django weaknesses in the frontend
Django excels at leveraging its Object-Relational Mapper (ORM), forms, routing and templating system to build robust web applications. However, when it comes to the frontend, Django falls short in handling dynamic interactions and state management.
Unlike Turbolinks for Ruby on Rails and Livewire for Laravel, Django does not offer a built-in solution for frontend interactivity.
This is where React, Vue.js, and other frontend frameworks come into play.
But such frameworks come with their own set of problems, let’s take Vue.js as an example and why I ditched it after 1 year:
Code Duplication
Significant code duplication existed between the backend and the frontend. Logic was duplicated in Django and Vue.js, leading to more inconsistencies and bugs.
Underutilized Django Features
By managing state and the DOM with Vue.js, we missed out on Django’s strengths:
- Django forms and built-in validation
- Powerful template tags and filters
- Streamlined class-based and function-based views
- URL routing and reverse URL resolution
Complexity
Managing state with Vue.js led to complex code, especially when handling form submissions, fetching data, and updating the DOM. It was also challenging to integrate with Django’s templating system.
Harder to Test and Maintain
With frontend logic split between Vue.js and Django, testing became more complex and often not possible since I had to test the frontend and backend separately. It’s worth mentioning that I was the only developer on the project and far from being a frontend expert.
Many of the same issues apply to React, even more so since React with Django needs deeper integration, whereas Vue.js can be added incrementally.
In my case, HTMX started to make sense. Let’s explore why.
Using HTMX and why it made sense
My web app is very content-focused. Hospitality professionals can use my web app to organize their day-to-day tasks in their hotels, revolving around:
- Writing notes for team members
- Creating tickets for maintenance
- Logging lost items by guests
- Creating daily checklists
- Creating and managing events
This is a perfect case for HTMX since it excels in handling hypermedia content with light interaction.
Using HTMX meant I could fully leverage Django’s templating system, forms, and validation, and focus on the backend logic. HTMX would handle the dynamic interactions, such as form submissions, fetching data, and updating the DOM.
This led to several benefits:
Reduced Code Volume
The codebase shrank significantly. Since I had all the state and logic in the Django backend, I was able to remove more than 3000 lines of JavaScript code.
Better Decoupling
The mobile apps and the web app are now completely decoupled. The mobile apps use the same API endpoints as before, but I can now change the web app without affecting the mobile apps. The APIs are tailored for the mobile apps, making them more efficient and simpler to write and use.
Faster Development
Before using HTMX, when creating a new page, I had to write the backend logic, the frontend logic, the API endpoints, create data representation in the frontend, handle validation, error messages, loading states, success states, etc. Now I just write the backend logic and add some HTMX attributes to the frontend, and I’m done.
Better Testing
Since everything is now pure Python with Django, I can improve and add more tests to my codebase. With JavaScript, I must confess I was not testing the frontend at all.
Better User Experience
The user experience is now better. Faster loading times, better error handling, validation, and loading states make the app feel more responsive and less clunky.
HTMX + Django ❤️
The benefits of using HTMX go beyond reduced code volume, while this alone is a significant win, let’s see what other benefits we get.
One of the biggest advantages of HTMX is its ability to seamlessly integrate with Django’s built-in features. Here’s how:
- Forms and Validation: HTMX works flawlessly with Django forms. Django handles the validation on the server-side, while HTMX updates the form and error messages dynamically without a single line of Javascript.
- Template Tags and Filters: Django’s rich set of template tags and filters becomes readily available for use within your HTMX responses. This empowers you to format data and use Django’s templating power to its full potential.
- Class-Based and Function-Based Views: HTMX integrates beautifully with Django’s view system. Whether you prefer class-based or function-based views, HTMX works perfectly, you can focus on core application logic without worrying about complex frontend interactions, you just need to add some HTMX attributes to your HTML and you’re good to go.
- URL Routing: HTMX does not interfere with Django’s URL routing system. You can continue to define your URLs in Django’s
urls.py
and use them as usual. This means that powerful features like reverse URL resolution, namespaced URLs, internationalization, and more remain available, which is something that can be challenging with SPAs.
Developers can leverage their existing Django knowledge and stay within the framework’s ecosystem.
You already know how to use HTMX
One of the best things about HTMX is that you already know how to use it. If you know how to write Django views, how to return HTML responses and write basic HTML, you have 95% of the knowledge you need.
Once you grasp the basics of HTMX, how the flow of data works, the concept of partials and how to use the various attributes, you’ll be able to build dynamic, interactive web applications in no time.
Developer Experience
Another often overlooked aspect of using a simpler frontend framework is the developer experience, and it makes a huge difference.
HTMX is not reinventing anything and is not trying to be the new shiny tech that everyone should use. On the contrary, it leverages existing technology and helps you work with existing backend code. This means any backend developer can focus on the logic, security, and performance without spending two months understanding state management, creating API endpoints, handling validation, error messages, loading states, and success states.
Conclusion
HTMX is not a silver bullet. It’s not a replacement for React or Vue.js. It’s a tool that can be used in the right context, and it’s worth considering if you are building a content-focused web app with Django.
6 months later I can confidently say HTMX not only saved me time and headaches but also made my web app more maintainable, testable, and less prone to bugs.
Again use the right tool for the job, but more importantly, use the tool you like and feel comfortable with. For me, Django and HTMX are my new best friends and I hope you give them a try too.
Ressources
The best ressource is obviously the HTMX documentation, it is well written and covers everything you need to know to get started, but here are some other ressources that can help you get started:
Hypermedia Systems - Written by the creator of HTMX, this free book covers the principles behind HTMX, the hypermedia concept, and how to build web applications with HTMX.
FULL Introduction To HTMX Using Golang - A 2hour tutorial by ThePrimeagen on how to use HTMX with Golang, while it is not Django, ThePrimeagen does a great job explaining the concepts behind HTMX with humor.
Django & HTMX Playlist (39 videos) - By the Youtuber BugBytes, this playlist covers a lot of use cases and how to use HTMX with Django.