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, by 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. Many 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

Summary