Django + Htmx = True

The world of web development is changing all the time. There are so many tech stacks to choose between, so many cool new things to try and similar. I have tried almost everything. At least it feels this way. But for a little while now, I have felt that the frontend part of web development has grown into something too complex.

I know you can do really cool things with Next.js, Nuxt.js, and similar. But is it really necessary with complex frameworks like this for building a simple website?

Do you even need to write JavaScript to add interactivity to your website? The answer is NO

This is where HTMX comes into the building.

What is HTMX?

HTMX is a lightweight JavaScript library that enables you to make your web applications more interactive by using HTML attributes. It allows you to perform AJAX requests, CSS transitions, and more, all without writing extensive JavaScript code. With HTMX, you can enhance your HTML elements with attributes that dictate how they should behave, making it easier to create dynamic content and interactions.

Benefits of Using Django with HTMX

• 1. Simplicity
  One of the most significant advantages of using HTMX with Django is the simplicity it brings to your development process. By leveraging HTMX, you can enhance your Django templates with interactivity without the need for complex JavaScript. This means you can focus on writing clean, maintainable code while still delivering a rich user experience.
• 2. Reduced Complexity
  Django encourages a clean separation of concerns, and HTMX complements this philosophy perfectly. With HTMX, you can keep your Django views and templates focused on server-side logic while using HTML attributes to handle client-side interactions. This reduces the complexity of your application and makes it easier to manage.
• 3. Improved User Experience
  HTMX allows you to load parts of your page dynamically, which significantly improves the user experience. Instead of reloading the entire page for every interaction, you can update specific sections of your application seamlessly. This not only reduces load times but also provides a more fluid and engaging experience for users.
• 4. Less JavaScript
  In a world where JavaScript frameworks dominate, HTMX offers a refreshing alternative. By using HTML attributes to define interactions, you can achieve a lot with minimal JavaScript. This not only simplifies your code but also makes it easier for developers who may not be as familiar with JavaScript to contribute to the project.

Example use case

Let's set up a simple example just to illustrate how this works in real life. We can begin with the views.

# views.py
from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

def load_more_data(request):
    # Get data from database, and add to the context
    return render(request, 'partials/data.html', context)

Next, we'll set up the templates:

<!-- index.html -->
<div id="data-container">
    {% include 'partials/data.html' %}
</div>
<button hx-get="{% url 'load_more_data' %}" hx-target="#data-container">Load More</button>


<div>
    {% for x in y %}
        <p>{{ x.title }}</p>
    {% endfor %}
</div>

In this simple example, we show you how you can utilize HTMX to do a get-request to the server without writing JavaScript. HTMX will of course use JavaScript, but you don't have to write it.

Summary

I hope that this article inspired you to learn more about HTMX. What do you think about this frontend library? Feel free to leave a comment below to discuss this :-)