Back to the Future of Hypermedia in Django

That found Hello DjangoCon! My name is Mario and I am coming to you from the distant past. Well, maybe right around 1965. It's been about a year since JFK was assassinated and The war in Vietnam has been going on for about a decade. Now at home, people are looking for ways to kind of get their mind off of things Nice film has come out, The Sound of Music with Julie Andrews, Christopher Plummer. Great film. Audiences have started tuning in to a show called Bonanza. And People around the world are in awe of the first person to take a walk in space. That would be the Russian cosmonaut Alexei Leonov Now the price of gas in the US is at around

30 cents per gallon. And on the technology front, touchstone phones have just come out. Now computers. On the other hand, we have the first commercial 16-bit mini computer, the DDP116, which is being made available to um Well, mostly businesses, scientific community. The price tag on it is around $28,500. In 2023, that'll translate to around $275,000. Also around this time, an individual by the name of Ted Nelson , he has just published an idea he has on creating and using linked content. You use it in a nonlinear way.

You connect text, images, video, sound, and all of this system is called hypermedia. Now fast forward to 1990. And now we have Tim Berners Lee. He takes all these ideas and this technology that has already been around for the last couple decades and he creates the very first web page. Using all this all this knowledge, all this technology, he comes up with the hypertext transfer protocol, of course, with help, and the World Wide Web is born. Now one of the architects, one of the people that were involved in the design of HTTP is Roy Fielding. If we move forward to the year 2000.

He released a dissertation on design and architecture of web applications. He comes up with this thing called representational state transfer. She becomes an architectural design that continues to be influential for the next few decades. The rest architecture. Now within this rest architecture there is an idea of constraint. This idea Also has another name, HADEOS, which stands for Hypermedia as the engine of application state. What this means is that the operational controls of that content All of that is contained within a server. And on the client side, it needs

not to know how all of that is handled. That can be served up to a client directly. So that becomes the idea of Hadios. Now, if we fast forward to today, we have a system where content is actually separate from the hypermedia controls the engine state has been moved entirely to the front end. Now with this type of architectural design you can build pretty powerful applications. But it's mostly unnecessary for the vast majority of applications on the web today. Now, I do feel like I want to mention What kinds of applications would benefit from these front-end systems? Now, I would say primarily

these are applications that have complex and dynamic interdependencies Maybe they require some offline functionality. So you can take all of that content on the front end and do complex things with it. Things like let's say very complex spreadsheet like applications, games, maps, those kinds of things. But on the other hand, for the vast majority of CRUD applications out there, and CRUD is for create, read, update, delete. That is way too much complexity. If you're taking into account accessibility and first time to rendering content,

Hypermedia or hypermedia-driven design is both more sustainable and more efficient, which means it'll save you time and money So let me introduce one of the more popular hypermedia uh libraries out there. It's called HTMX HCMS gives you access to all the different kinds of AJAX requests, WebSockets, server-side events. And it's all directly controlled from your HTML. Now your requests can be sent by more than just an anchor tag, which typically only sends a GET response. request or a form tag that typically only sends a post request to the server. Now you have the full array of Ajax requests which include put, patch, delete.

And you can also utilize different triggers other than just click, whether it's mouse over or hover, mouse wheel, those kinds of things. And you can selectively refresh content on your web page. You don't have to refresh the whole page, just the elements you target. And you can use any backend that you choose, including of course Python. And it's crazy to me that no one is talking about how cool this is. Well, I mean, technically. If you look at DjangoCon US 2021. There were two talks that had HTMX in the title. One of those was even presented at DjangoCon Europe. So oh oh and also back in 2021, Carson Gross, who's the creator of HTMX, he also gave a talk.

that you know mentioned all of this stuff at length. So okay. But of course there was also Django Con US 2022 where there was an online talk specifically about using Django and HTMX to build an application. Alright, alright. That's it, right? Oh, and of course there's DjangoCon Europe 2022 or David Guijo of Context turned talked about how he and his company turned their entire SaaS application from a React frontend to HCMX all in two months. And alright, 2023, there was a talk also comparing HTMX to WebAssembly, and Carlton Gibson's talk summed it up with this point.

Use HTMX. Fine, okay. I guess I guess people are talking about it. So that brings us to DjangoCon US 2023. Earlier in the week, you may have uh heard Chris May's talk on using HTMX, Alpine. js, and even streaming HTTP. to create modern web applications as well. So yes, now we're back to the future and here I am talking about HTMX. So I guess it is a little bit more ubiquitous. Initially I thought I was gonna come here and show you how to use HTMX But as you can see, these references that I just mentioned, unless you're living under a rock or you don't have access to the internet

, You probably already have very specific ways of or examples on how to build an HTMX application, not just with Python, but specifically with Django. So instead, what I'm going to do is I'm just going to highlight a few conventions that are evolving around HTMX and the Django space. So I want to talk about a couple of patterns that I've noticed and mention a few tools that are a result of broader use. Lastly, I would love for the Django community and even the Python community at large to pool together their resources, their creativity, their excitement around hypermedia. To bring together a more cohesive acceptance of

having a hypermedia-driven design. Before I get to those patterns, though, I do want to talk very briefly about what HTMX looks like Here's an example from HTMX. org. This example here tells you how to use HTMX. Notice the attributes here. Hx -post, hx-target. What this is doing, and again, this is from the documentation on htmx. org This is tells HTMX when a user clicks on this button, issue an HTTP post request to the slash clicked endpoint, and use the content from the response to replace the element with the ID

parent div, and that is a CSS selector, into the DOM. So just think of the possibilities, everything you can do there. Take content, put it before, instead of, or after any element in your HTML page without a full page refresh. This is exciting. So let's talk about some patterns. I'm going to start with a package written by Luke Plant. This one is called Django HTMX Patterns. Pretty straightforward there. And these are patterns that he's observed when developing Django projects that use HTMX. They talk about some of the control flow and also some enhancements that you can make with a small bit of utilities.

But overall, it's a great introduction to how you can use HTMX within Python and more specifically Django. Now I'm just going to focus on two items mentioned here in this repo. There's a lot more. I encourage you to check it out. I will have references at the end of this talk, so don't worry. The first of these is HTMX headers HTMX has important information that it sends through headers whenever HTMX is issuing a request to the server. For example, every HTMX request has a header element of hx-request which is always set to true. This allows your server application to know what kind of request is being generated from your web page.

And number two, this first one leads to number two is rendering partial content. It's a huge benefit here because what you can do is You if you know that the request is being generated from uh HTMX, then you don't have to send the full content of your page to refresh on the client side. You only need to send the relevant part that needs to be updated in the DOM. The DOM is a document object model. That's what the browser uses to understand what to render for. For a client. Okay, so those are two patterns that emerge. You can read more about it on the repo, but this leads me to a couple of tools that help with this

with these patterns The first of these is uh called Django HCMX, written by Adam Johnson. Adam Johnson, as many of you know, co-invented the web with Tim Berners-Lee. He has seven fingers on each hand. And he has a fabulous set of buffant hair. I asked ChatGPT about that, so I know I'm not wrong. Actually, it's on his GitHub profile, so it's definitely not wrong. Anyway, back to the package here. What Django dash HTMX does is it uses middleware. To provide some convenience to those who are using HTMX. Middleware for those who are not as familiar. I wasn't until fairly recently. It

what it does is it captures a request object from the client and sometimes modifies it before that being accessed by your application on the server. So in this case, Django HTMX is adding an HTMX details class to that request. Now, this provides shortcuts for specific headers which you can use throughout your code. You can see more information on that on the repo. Now The second set of tools deals with rendering partial content. Again, this is a very powerful feature of HTMX. Carson Gross goes into this concept of using template fragments because what ends up happening is because you're rendering

small pieces of information back to the client, ordinarily what you would do is you would maybe keep a directory of all these all this partial content that you will serve back to the client in the event of an HTMX request However, what ends up happening is if you have a lot of these snippets, it can really blow your directory. Now However, if you were to contain those snippets of code within your main template file and then maybe use conditionals to determine when they are rendered, Then you have better control and you have locality of behavior. And all that really means is you're able to see one snippet of code and understand what needs to happen

Now one of the packages that helps with this is called Django Render Block. Now initially this package was not created for HTMX usage. Instead it was created as a way to render a block from a template into a string and then you could potentially use that string say in an email or something to that effect. render different blocks from different templates to string and kind of concatenate that in one message. However, you can use this same pattern with HTMX you choose which block of your template you want to render and then you can send that as an HTTP response.

Now, uh it's very powerful. Also, earlier this year at DjangoCon Europe, Carlton Gibson unveiled his Django Template Partials package. It's very similar. It does a similar thing where it renders a only a partial part of the template to the to the client. But it has some interesting features that distinguish it from render block. It inter it integrates with the template loader. So instead of having to use an HTTP response, changing your view logic and all that stuff You can keep your view logic, render a template response with the name of the template, the and the context

all within that response, and And all you need to do is reference the name of the fragment that you want to send through. Also, since you're defining this fragment within your template. . with a with a particular namespace, you can then reuse this fragment anywhere in your template without having to call it again. So it's pretty powerful. So those are a couple of tools that deal with the patterns. I talked about there's a couple more here that I wanted to highlight real quick, some additional tools. There's one called HX Requests. It's meant to simplify your HTMX usage within Django and it enables asynchronous requests without clogging up your views and your URLs with extra code. Check out the documentation.

There's also forge packages. Now if you're not familiar with four packages, forge packages, they are an an opinionated set of packages for Django that deal with uh pretty much All sorts of specific areas of web app development. Now, one of these packages is Forge dash HTMX, and I must stress you can use these individually, you don't have to use them all. The Forge HTMX package, it has its own implementation of template fragments and it also has this thing called view actions which allows you to define multiple actions within a class-based view It's an alternative to defining different endpoints to handle these actions.

So for example, you'll note in this bit of code here taken from their documentation, but there is an HTMX fragment that is defined as pull request. It's in that namespace. Then a conditional is applied that checks to see if the pull request is open, in which case the view action will render a close and a merge button. Otherwise, it will only render an open button. if if it doesn't meet that, if it doesn't, if it's closed basically. Alright, so those are just a few tools. There's more out there. I don't have time to go through all of them. These are some of the bigger ones I've noticed or the most active ones, but there's a lot more. So I know many of you might be wondering, wait a minute, wait a minute.

Is this thing ready for prime time? Can I actually use HTMX in production? Now look, I'm just a lowly time traveler. without any real-world experience out there. But what I would do is I would encourage you to check out that Django Europe 2022 talk by David Guillot and in how his company context was able to port their SaaS application from React to HTMX. Now here's just a few bullet points on what they were able to accomplish First of all, there was no compromise in the UI for user experience, which is pretty fantastic. Their code size went down from 21,500 lines of code to just over 7,000. lines of code and they increased their usage of Python, which is a great thing for anyone that loves Python.

And their JavaScript dependencies went down from 255 to just nine. And another pretty great thing is their web build time went from 40 seconds to just five. And their time to uh their first load time to interactive was pretty much halved. Now these are great statistics and maybe they wouldn't apply to all the different kinds of SaaS applications that exist out there. But if If you're dealing with mostly, like I mentioned at the top, CRUD operations and you're using utilizing a lot of text and images, these are the kinds of improvements you can see Now, in the greater Python space, the community is experimenting with hypermedia-driven designs.

But it's a little bit more scattered than the Django space. There is a newer framework I'd like to mention called LightStar. They just released their version 2. I think a week or two ago, and it integrates HTMX directly into their code base, so there's definitely interest growing. But what I would love to see is the Python community at large just uh embracing hypermedia driven design, which is funny to say about a technology that's about half a century old, but that would be great if in the Python space we had a set of best practices. We had a common parlance around how to s uh how to talk about hypermedia. Now Uh at PyCon

US, I met another engineer. His name is Benjamin Kirkbride. We both shared this vision of what hypermedia driven design could look like in the Python space, but we had a lot of questions So we started researching and we created a repo to gather the resources available in Python land. and to see what what kind of cohesiveness we could pull together. So the name of that repo is Pihat, Awesome Python HTMX Now, what is Pi Hat? You may wonder, it's not a Pi that you wear on your head. Loosely, it is Python, HTMX, ASGI, and Tailwind. Now, this is a powerful web

stack that uses Python, HTMX, Tailwind. Pretty straightforward, I know. Listen, you can build really powerful and performant accessible web applications all from the comfort of Python and HTML without the need for a complicated front-end framework. If you haven't tried it yet, go ahead and start a new project. Build that blog you should have all you always wanted to build. And it's simple to get started. Just include that HTMX file in your static files and then include it in a script tag in your base HTML template, and that's it. How you have access to all these awesome controls within any element in your HTML. Now if you've tried it and you have opinions, that's great!

Let's join the conversation on the Pi Hat repo and maybe you have something to contribute or you want to help with our documentation open up a pull request Alright, I want to wrap up. I was I am thrilled that I was invited to give this presentation by the DjangoCon organizers. I hope that you learned a thing or two and hopefully some of you will be encouraged to try HTMX or to try it again or to try new things and to get involved in the conversation. I'd love to hear your comments, your questions. You can reach out to me on GitHub or Mastodon. And lastly, here are the links. Here are some links to the resources I talked about. I know I I gave a lot You can find

some of this information on my website, pythonbynight. com. And of course, there is the Pi Hat repo. The links are up here on the screen Thank you so much. Thank you for watching and enjoy what's left of the conference