Live Components

A live component will perform a request to your backend whenever a user updates a particular component field.

This allows you to run your field level validation, & reactivity you defined server-side for your users as they work on a form to make the experience more dynamic.

This creates an experience for your users where validation & reactivity appears to happen client side, without introducing two validation or reactivity lifecycles for the developer.

Live

The Live method uses Iridum's attributes hooks to introduce HTMX attributes similar to the following:

<input hx-post="/form/live" hx-trigger="changed input delay:500ms"
    hx-target="form" hx-swap="outerHTML"/>

<!-- For inputs like a switch, there is no included delay -->

This will trigger the live endpoint apart of your form with your form's current state

Validation

During live requests, certain fields will have their attached validation rules run automatically to provide users feedback on whether they are filling out their form properly.

Field validation runs on a field when:

1. The field itself trigger a live request.
2. The field was a part of a reactivity chain. ?
   Say field A updates field B; This means field A was marked live, and it had an AfterStateUpdated hook that set the value of field B. Therefore the validation hooks for both field A and B will run
3. A field was marked as touched. ?
   A touched field means the user literally touched or interacted with a field on the form. Iridium keeps a reference for what fields the user has interacted with and will always validate them on each request

Downside of Live endpoints

• Live inherently posts your form to the backend and then waits for a network response. This means your form's validation and reactivity's performance is more often constraint by your network speed than the actual validation & reactivity performance costs. You should be aware of this tradeoff since field validation and reactivity takes at minimum as long as a network request to your server.
• Live fields with a debounce can sometimes mess up a user who is typing in a form box slow enough to trigger a serverside update that mutates the form field they are working on. We recommend increasing or removing the live debounce if this is an issue.
  • Additionally, you can use attributes to trigger live on a loss of focus, rather than a debounce! Attributes

Writing client-side reactivity

Client side reactivity and validation still has it place. Iridium natively supports some basic HTML input rules and will support better Alpine.js hook integration in the future.

If you need access to client-side logic today, you'll need to read through our attributes section.