Elixir Mentor Andrew Stewart on JS in LiveView
Jul 20, 2024
Andrew Stewart, Elixir dev and front-end educator known for LiveView tutorials, breaks down JavaScript interoperability with LiveView. He outlines three integration approaches and practical techniques like exec, dispatch, hooks, and preserving element state. They also cover performance, critical vs non-critical JS, image optimization, TypeScript tips, and tooling for real-world apps.
AI Snips
Chapters
Transcript
Episode notes
Use Three Clear JS Interop Patterns
- Use the three interop patterns: client-to-server, server-to-client, and client-to-client when integrating JS with LiveView.
- Andrew frames client-to-client as JS commands, server-to-client as push events, and client-to-server as hooks/push from the browser for clarity.
Use js.dispatch To Emit Custom DOM Events
- Use js.dispatch to emit custom DOM events when you want multiple JS handlers or form change events to react to client-side updates.
- dispatch is useful to trigger native events like change so LiveView receives updated form data after JS manipulations.
Keep UI Toggles Client Side
- Avoid driving simple UI actions through full LiveView network trips; run modals, dropdowns and focus changes entirely client-side when possible.
- Use JS commands (add_class, focus, exec, dispatch) to keep interactions instant and avoid UX break on slow networks.