I was trying to build a headless ui component library, because I really wish to have something like Radix UI for phoenix framework. You can check it out here: Sprout UI - unstyled and accessible components for Phoenix Framework (it’s still WIP though). The main problems I had when implementing those components are:
It’s not that easy to design a flexible and composible component API with heex template
I’d like UI interactions just happen on the client side without an extra request to the server. I’ve seen a few examples of using LiveView to implement something like an accordion. It’s unnecessary to request to the server for just toggling a panel, and the UI feels not responsive at all.
So a lot of user interactions and accessibility issues like aria attributes, focus management and keyboard navigation need to be addressed on the JS-side, but currently the LiveView JS command is still not enough for all of these, so it has to be achieved with JS, and involves client side DOM changes that does not play very well with LiveView DOM patch.
But the biggest problem to stop me from using LiveView is just as @sodapopcan mentioned:
I had a side project using LiveView deployed using Fly’s hobby tier. And I built a multi-step forms but users keeps complaining on connection lost and form state loss when switching apps on mobile, and it takes ages to reconnect.
The LiveView development experience is actually pretty good but the user experience is not that good especially when users are in a slow or unstable network condition. And finally I ended up rewriting it using React, and just use Phoenix for API server.
Currently, I’m quite interested in the concept of local first software and hope that it can be combined with LiveView to solve the offline usability issues and get a more responsive user experience.
