Why are web forms so hard?

And how re-frame can help(?)

Easy, just set/get  .value of DOM element!

No, wait: This is react: where to store the value?

Re-frame: Store in the app-db at some location

Input w/ placeholder

Lots of extra state

Re-frame: err store *some* of it in app-db

Form Submission Time!

• Simple web forms: POST to an endpoint. Easy!
• The  "better(?)" way: Collect all form data, massage it and send it to endpoint as JSON/EDN
• Oops, we need extra data on top of the user provided one to make the submission
• Submission failed: Show error messages in various ways
• Prevent double submissions

Re-frame: Write event handler. Get data from app. Ask for http-xhrio effect to run.

If you really really really have to: inject subscription data into event handler. Now your view subscriptions are tied to form submission...

(inc difficulty) => Selects

• Context-menus, popup menus, drop-down boxes, select boxes, picklists etc.
• User selects from a static list. Easy!
• Now the list is dynamic and retrieved asynchronously
  • new state: List ready to use? (i.e. list of choices is available)
• Different conditions that trigger retrieval of new list
  • some other field changed
  • some time has passed
  • on form init
• De-bouncing: Prevent unnecessary retrievals

Re-frame: Err, event handlers and subscriptions. Smile and wave

(inc (inc difficulty)) => Interactive Search

• Search field with async results
• No simple HTML-only solution
• Minimal prefix, de-bouncing: Be nice to your endpoint
• Re-paint when new data is arriving without interrupting the user
• Send more results via pagination

Re-frame: err events and subscriptions