Summary: for "follow" and "unfollow" functionality, replaced custom Javascript + JSON endpoints with HTML-over-the-wire, using htmx.org, as part of ongoing work in #182 .
Changes:
we've removed about 35 lines of Javascript/Typescript, mostly simple jQuery-style code, effectively replacing them with 2 hx- attributes.
we've removed 2 JSON endpoints, replacing the 12 lines of Python code they contained with 5 inside an existing view plus a 1 line decorator.
we've pulled out some HTML into an include, with small changes (mostly simplifications)
overall 39 additions and 85 deletions according to git, which includes expanding the tests.
Results:
The follow/unfollow buttons now work without Javascript. This means the functionality becomes testable using fast WebTest tests (as well as using Selenium), with a single test thanks to django-functest. This is a big win for developer experience due to speed of iteration and reliability of tests.
We gain a "loading" indicator automatically, which was missing before, and helps give immediate feedback that something is happening.
If we had instead started from a case where the functionality used no Javascript at all, and were adding htmx, the changes would have been:
pull out a chunk of HTML as an include, with some tweaks (add an id and 2 hx- attributes to the <form>)
add a single additional line of Python: @htmx({"id-follow-form": "learnscripture/follow_form_inc.html"}), thanks to our generic @htmx decorator.
Merges htmx-for-follow-buttons -> master
Summary: for "follow" and "unfollow" functionality, replaced custom Javascript + JSON endpoints with HTML-over-the-wire, using htmx.org, as part of ongoing work in #182 .
Changes:
hx-
attributes.Results:
If we had instead started from a case where the functionality used no Javascript at all, and were adding htmx, the changes would have been:
id
and 2hx-
attributes to the<form>
)@htmx({"id-follow-form": "learnscripture/follow_form_inc.html"})
, thanks to our generic @htmx decorator.