Abstract:

This video is a comprehensive tutorial on Phoenix LiveView's JS module, demonstrating how to create polished, interactive user experiences entirely from Elixir code, without relying on external front-end frameworks. The presenter systematically explores every available JS command, grouping them into six functional families: CSS manipulation, visibility, focus management, navigation, attribute control, and general actions. Key concepts like command chaining, optimistic UI updates, creating animations with transitions, and building accessible components are explained with practical examples. The tutorial emphasizes that these client-side commands provide instant feedback to the user, while more complex logic is still handled by the server, showcasing the power and flexibility of the LiveView model.

A Complete Guide to Phoenix LiveView JS Commands

• 0:00:01 Introduction to LiveView JS: Phoenix LiveView includes a JS module that allows developers to execute client-side interactions without writing custom JavaScript. These Elixir functions are serialized into PHX attributes, which the front-end library interprets to create dynamic user experiences.
• 0:01:39 CSS Class Commands: This family of commands provides instant visual feedback by manipulating CSS classes.
  • Includes toggle_class, add_class, and remove_class for basic class management.
  • The transition command is highlighted for creating animations, such as applying a class temporarily (for a bounce effect) or managing multi-stage transitions (fade-in/out).
• 0:04:39 Chaining Commands & Optimistic UI: JS commands can be piped together. For example, you can use JS.transition to fade out a shopping cart item before a JS.push command sends the removal event to the server, creating a smooth, optimistic UI.
• 0:06:18 Visibility Commands: The show, hide, and toggle commands control an element's visibility by manipulating its display style attribute.
  • They support in and out transitions for smooth animations.
  • It's important to use the display: "inline" option for non-block elements to prevent breaking the page layout.
• 0:07:45 Abstracting into Functions: To keep templates clean and create reusable behaviors, complex command chains can be extracted into Elixir functions. An example shows a single function that toggles a description's visibility and simultaneously rotates a chevron icon.
• 0:10:38 Focus Management Commands: To improve UX and keyboard accessibility, you can control the focused element on the page.
  • focus targets a specific element, while focus_first targets the first focusable element in a container.
  • push_focus and pop_focus create a "focus stack," allowing you to save an element's focus (e.g., the button that opened a modal) and return to it after the modal is closed.
• 0:14:50 Navigation Commands: The JS.navigate and JS.patch commands handle client-side page changes over the websocket.
  • Key Takeaway: The presenter strongly advises using standard anchor tags (<a phx-navigate="...">) instead of these JS commands for navigation. This preserves native browser functionality like "open in new tab" and URL previews, leading to a better and more accessible user experience.
• 0:18:21 Attribute Commands: The set_attribute, remove_attribute, and toggle_attribute commands are used to manage HTML attributes, which is crucial for accessibility. They allow you to dynamically update ARIA attributes like aria-expanded to keep them in sync with the UI state.
• 0:20:34 Miscellaneous Action Commands: This final group includes powerful commands for orchestration and extensibility.
  • push: Sends an event and data to the server. It includes a loading option to apply temporary styles to elements while waiting for the server response.
  • exec: Executes a JS command stored in another element's attribute, enabling complex, reusable component behaviors (e.g., a modal's close logic).
  • dispatch: An "escape hatch" that sends a custom browser event. This allows LiveView to interoperate with custom JavaScript or Phoenix Hooks for functionality not built-in, such as a "copy to clipboard" feature.