chapter twelve

12 Making your pages more dynamic with HTMX

 

This chapter covers

  • Using HTMX to add on-page interactivity to your Django project
  • Lazy loading
  • Search-as-you-type
  • Infinite scroll
  • Click-to-edit

On its own, Django is structured for older style web interactions, with each action causing a new page to be loaded. Modern web frameworks like React and Angular can be used on top of an API, but the HTMX library allows for a high degree of interactivity without a lot of additional JavaScript code.

12.1 Dynamic web pages

Django was created in a time when there was a one-to-one relationship between a URL and a web page. Web pages were relatively static, with JavaScript mostly used to snazz the page up a little: highlighting the current page in the nav, or doing a bit of calculation in a form. This time period now gets referred to as web 1.0. As computers got faster and browsers added features, new degrees of interactivity got added to web pages. A lot of tools grew out of this time period, and web pages evolved into fully contained applications. Meanwhile, Django kept chugging along in its rather old-school way.

12.2 HTMX attributes

12.3 Lazy loading

12.4 Search as you type with infinite scroll

12.5 Click to edit

12.6 Exercises

12.7 Summary