Designing Hypermedia-Driven Applications - Start with HTML

Aug. 17, 2024

• How to start an HDA?- Personal preference when starting an HDA: Start with plain old HTMLKeep the amount of JS to a minimum, ideally none- Keep this as a design constraint as much as possibleYou should need a good reason to deviate- Push back on any designs that would require non-trivial amounts of JS to implement
• Means: Put as much logic as possible on the server Form validation (needs to be there anyways)- Filtering or sorting stuff (don’t use client side solutions)
• How far can you get with this approach? Perfectly viable for many websites and simple CRUD apps (i.e. most of them…)

A worked example

• django + neapolitan for simple CRUD view- add search- add hx-boost to get rid of full page reload- add hx-trigger, etc. for active searchadd hx-select, hx-target to keep input focus- if you don’t want to return full template, add django-template-partials and hx-partial plugin (or use query parameters)
• Don’t stop at the happy path. Make on a par with at least these modern practices Show loading indicators (hx-indicator)Easy way: choose one place in the template where indicator is shown
• Give feedback on errors Show error toast when server is unreachable- Show error toast when server returns codes > 400 (server is reachable, but could not process request) Perfectly viable good UX for many applications.