Use HTMX for general UI navigation

[jeremystretch]

NetBox version

v3.7.0

Feature type

New functionality

Proposed functionality

NetBox has employed HTMX in several areas of the UI for a while now, to improve responsiveness. These areas include:

• Sorting/filtering lists of objects
• Re-rendering object edit forms
• Providing deletion confirmation dialogs

This proposal seeks to extend the use of HTMX across the entire application, leveraging it for nearly all views. For instance, clicking a navigation menu link would replace only the main portion of the page with new content, avoiding a full page refresh.

Use case

HTMX strikes a very natural balance between traditional full-page rendering and reactive SPA frameworks, returning only the portion of HTML content necessary to update the page. This provides a much more seamless user experience, and can significantly reduce page load times. These gains can be achieved with relatively little backend work, leveraging existing HTML templates.

Database changes

None

External dependencies

We'll use the django-htmx package per #14735.

[jeremystretch]

Marking this as blocked by #14735 for now.

[jeremystretch]

I'm planning a phased approach to implementing HTMX.

Phase 1 (v4.0)

• Minimally extend existing template structure to add HTMX-specific containers (e.g. for page content)
• "Boost" links in nav menu & page (exclude footer)
• Employ hx-select to swap in only the relevant HTML content from an HTTP response
• Protect embedded tables from replacing the entire page content on load

Phase 2 (v4.1+)

• Rearchitect views & templates to support true partial rendering

This approach should allow us to implement HTMX application-wide with a relatively light touch, while retaining full HTML rendering by default for backward compatibility.

[jeremystretch]

Here's a great, quick intro to HTMX for the uninitiated: https://youtu.be/r-GSGH2RxJs