Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use HTMX for general UI navigation #14736

Closed
jeremystretch opened this issue Jan 8, 2024 · 3 comments
Closed

Use HTMX for general UI navigation #14736

jeremystretch opened this issue Jan 8, 2024 · 3 comments
Assignees
@jeremystretch
Labels
status: accepted This issue has been accepted for implementation type: feature Introduction of new functionality to the application
Milestone
v4.0

Comments

@jeremystretch
Copy link
Member

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 jeremystretch added status: accepted This issue has been accepted for implementation type: feature Introduction of new functionality to the application labels Jan 8, 2024
@jeremystretch jeremystretch added this to the v4.0 milestone Jan 8, 2024
@jeremystretch jeremystretch added status: blocked Another issue or external requirement is preventing implementation and removed status: accepted This issue has been accepted for implementation labels Jan 8, 2024
@jeremystretch
Copy link
Member Author

Marking this as blocked by #14735 for now.

@jeremystretch jeremystretch mentioned this issue Jan 25, 2024
Closed
@jeremystretch
Copy link
Member Author

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 jeremystretch added status: accepted This issue has been accepted for implementation and removed status: blocked Another issue or external requirement is preventing implementation labels Feb 13, 2024
@jeremystretch jeremystretch self-assigned this Feb 13, 2024
@jeremystretch jeremystretch mentioned this issue Feb 14, 2024
Merged
@jeremystretch
Copy link
Member Author

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

jeremystretch added a commit that referenced this issue Mar 28, 2024
@jeremystretch
Closes #14736: Enable HTMX navigation globally (#15158)
744be59 
* Enable HTMX boosting

* Refactor HTMX properties for tables

* Fix dashboard object list widget

* Disable scrolling to page content

* Fix initialization of TomSelect dropdowns after HTMX loading

* Replace formaction properties with hx-post

* Fix quick search field on object list view

* Reinitialize copy-to-clipboard buttons upon HTMX load

* Disable scrolling effect for intra-page navigation

* Introduce user preference for toggling HTMX navigation

* Enable HTMX navigation only when selected by user

* Pass htmx_navigation context

* Fix display of confirmation form when deleting an object

* Disable HTMX boosting for rack elevation SVG downloads

* Fix dyanmic form rendering

* Introduce htmx_boost template tag; enable HTMX for user menu

* Use out-of-band sap to update footer stamp

* Fix display of toasts after form submission

* Fix user preference selection

* Misc cleanup

* Rename render_partial() to htmx_partial()

* Add docstring to htmx_boost template tag

* Disable HTMX for user preferences form to force a full page refresh on changes
@jeremystretch jeremystretch mentioned this issue May 6, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jeremystretch jeremystretch

Labels
status: accepted This issue has been accepted for implementation type: feature Introduction of new functionality to the application
Projects
None yet
Milestone
v4.0
Development

No branches or pull requests
1 participant
@jeremystretch