Hypermedia foundations

Think in hypermedia

Model an interaction as a server route that returns the next useful HTML representation.

8 minute lesson

~~~

A hypermedia response contains both information and the controls for possible next actions. A task row can show its current state and include the form that completes it:

<li id="task-42">
  <span>Send invoice</span>
  <form action="/tasks/42/complete" method="post">
    <button>Complete</button>
  </form>
</li>

After the form runs, the server returns the next representation of that row. If the task is complete, the new HTML may remove the button entirely. The client does not need a separate rule saying when that action is valid.

When designing an interaction, write down four parts:

  1. the element and event that express the user’s intent
  2. the HTTP route that performs or reads the operation
  3. the HTML representation returned after the operation
  4. the page region that representation replaces

This keeps application state and rendering decisions on the server. It also makes responses easy to inspect: the Network panel shows the exact HTML the browser was asked to use.

The tradeoff is more server round trips. Choose hypermedia when the server is the natural source of truth, not when every keystroke must update a complex offline model.

Lesson completed