ElixirConf 2023 - Chris Nelson - LiveView: The javascript you need while keeping the Elixir you love

Discover how to integrate JavaScript into LiveView using custom HTML elements, Live Elements library, and Live State abstraction. Explore the benefits of custom elements, including encapsulation, styling control, and event handling.

Key takeaways
  • Custom HTML elements allow for extending HTML and making it better, providing a path to integrate JavaScript into LiveView.
  • Live Elements is a library that simplifies working with custom elements in LiveView, making it easier to create functional components that wrap custom elements.
  • Live State is a thin abstraction over Phoenix channels that enables communication between the front end and back end, allowing for state management and event handling.
  • Custom events can be declared in custom elements, enabling LiveView to handle those events and respond accordingly.
  • The shadow DOM in custom elements provides encapsulation, allowing for styling and control over the UI to the desired extent.
  • Slots in custom elements allow for defining the content that appears in the middle of the element and how it renders.
  • Using a library to help author custom elements is recommended, as it provides a more productive and LiveView-ish experience.
  • Custom elements can be used to extend the reach of Elixir and integrate with JavaScript solutions without being tied to a specific framework.
  • Live State handles custom events out of the box, making it easy to send events over and receive data from the back end.
  • Custom elements can be used to create interactive e-commerce experiences on statically generated websites.
  • The rules for custom elements require the tag name to have a dash, ensuring uniqueness and compliance with the specification.