I’m currently working on two projects with Phoenix and LiveView, and I’m looking for tips or suggestions on improving the frontend side. I’ve managed to implement basic functionality using core_components and LiveView.JS, but I get stuck when I need something more advanced. For example, I’m unsure how to dynamically update select options based on previous selections (e.g., select country → select state → select city), handle actions involving multiple checkboxes, or implement table sorting.
I’m still new to this, and I know it might just be a skill gap, which is why I’m reaching out. I’d love to hear how Saint Jose disciples approach and solve these kinds of challenges.
For context, I have a background in Ember.js with EmberPaper and React with Ant Design.
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.
If you like a choose your own adventure approach, run and play around with open source sample apps like TodoTrek and LiveBeats to find the dynamic interactions that interest you. Then poke around their respective repos and use those interactions as a treasure map to direct your spelunking.
You can use the phx-change binding on the first input to send an event back to the socket that updates an assign used to populate the second input that depends on the first.
Here’s an example I made a while back that shows how to select organization → select user belonging to selected organization:
