If you work currently on a toy project my advice is to not use JS at all, do everything server-side.

The trend I see currently being pushed in liveview ecosystem is interaction with JS from liveview, in order to avoid server latency, which is not exactly what liveview was built for. The idea of liveview is to simplify web development by keeping the frontend interaction on the elixir side, instead of having both JS and backend code like in your classical 2 stack web app. There is obviously a price to pay for this abstraction and that is your UI becomes janky if your connection is unstable.

The JS interlop is an important hack to overcome liveview limitations (for example interaction with JS libraries like maplibre.js), however IMO it should be used only when all other options are exhausted, as the more JS you use, the exponentially less benefit you get from using liveview.

The best way to learn is to hack on the coolest project you can think of. With frameworks like React you can footgun and spend months or even years studying how to do everything the right way without ever writing a real line of code, let alone actually taking a project from start to finish. You always learn so much more by making something real.

Let your experience guide you! For example, I needed to play an MP3 in a LiveView when a user clicks an icon yesterday. My first approach that I imagined used a React-style solution where I’d conditionally render audio tags based on if a certain file existed on another host … totally wrong. I read some docs, did some rubber ducking with an LLM, and found out you can solve this super easy with 2 HTML attributes and a few lines of JavaScript to interop with the Audio WebAPI.

~H"""
<div>
  <%= if @audio_url do %>
    <!-- Don't forget to include a unique `id` attribute or the hook will have undefined behavior! -->
    <div
      id="audio-button"
      data-audio-url={@audio_url}
      phx-hook="PlayAudio"
    >
      🎵 Play Audio
    </div>
  <% end %>
</div>
"""

let Hooks = {}

Hooks.PlayAudio = {
  mounted() {
    this.el.addEventListener("click", () => {
      const audioUrl = this.el.getAttribute("data-audio-url")
      if (audioUrl) {
        const audio = new Audio(audioUrl);
        audio.play().catch((error) => console.error("Audio playback failed:", error))
      }
    })
  }
}

let liveSocket = new LiveSocket("/live", Socket, { hooks: Hooks })
liveSocket.connect()

I probably never would have learned how to put all these little pieces together if I had stuck with book learning and watching lectures. Just jump right in to it. It’s more fun this way in my opinion. The Elixir community is very kind and helpful in my experience. It’s a great place to “learn in public.” You can always ask questions on this forum and post your projects when you’ve got a cool demo.

You couldn’t do better than starting with: