Phoenix liveview alpine js how to#
Phoenix liveview alpine js code#

“controlled inputs” such as autoformatted dates, phone numbers, where a user’s input is translated as they are typing.

Phoenix liveview alpine js code#

If the user interaction demands zero-latency, client-side code is the only solution, for example: The toggled content itself requires stateful changes to the backend, such as data subscriptions.The toggled content is dynamically loaded to save either network or application load.If the user interaction is only about toggling content (show/hide, CSS classes, etc), prefer client-side, unless: Follow these guidelines to answer where a client or server responsibility exists in your LiveView projects: For example, while loading dynamic content sometimes requires a trip to the server, formatting a user’s phone number as they type necessitates zero latency or the interaction is a clunky, frustrating experience. Let’s get started! Client vs Serverįrom a UX perspective, it’s vital to identify which interactions are expected to remain latency-free.

Phoenix liveview alpine js how to#

LiveView is a perfect fit for real-time applications like dashboards and feeds, as well as applications with client interactions that necessarily require a round-trip to the server, ie chats, interactive forms, shopping carts, image uploads, etc.īut what about those interactions that don’t require round trips like toggling page content or interactions that demand zero-latency such as formatted inputs? In this post, we’ll see how to identify whether a round trip to the server is necessary and solutions that make purely client-side interactions a breeze to work with inside LiveView. Input editing while an event to the server is in flight.The Phoenix LiveView programming model allows developers to deliver applications more quickly, with feature sets previously only obtainable by single page application frameworks. This works wellįor updates where major side effects are not expected, such as form validationĮrrors, or additive UX around the user's input values as they fill out a form.įor these use cases, the phx-change input does not concern itself with disabling Value, even if it deviates from the server's rendered updates. The JavaScript client is always the source of truth for current input values.įor any given input with focus, LiveView will never overwrite the input's current

def mount ( _params, _session, socket ) do = params, socket ) do # handle form reset end def handle_event ( 'changed', params, socket ) do # handle regular form change end JavaScript client specifics With the form rendered, your LiveView picks up the events in handle_eventĬallbacks, to validate and attempt to save the parameter accordingly: def render ( assigns ).

input component with built-in features and styles. If your application was generated with Phoenix v1.7, then mix phx.newĪutomatically imports many ready-to-use function components, such as Here is a simple version to get started with: attr :field, attr :rest, :global, include : ~w(type) def input ( assigns ) do ~H''' Input/1 is a function component for rendering inputs, most oftenĭefined in your own application, often encapsulating labelling,Įrror handling, and more. We recommend reading its documentation for more details on how it worksĪnd all supported options.form expects a assign, which canīe created from a changeset or user parameters via _form/1. form is the function component defined in /1, Saving, your form would use both phx-change and phx-submit bindings. For example, to handle real-time form validation and Where all form fields are passed to the LiveView's callback given any In general, it is preferred to handle input changes at the form level, To handle form changes and submissions, use the phx-change and phx-submitĮvents. Settings View Source Form bindings Form Events