Managing complex UI in Phoenix LiveView - lessons from XState?

Hi friends! I’m new to both Elixir and Phoenix, but have been really exited about what I’ve been learning here. I’ve run the gamut when it comes to web app architectures, from Rails CRUD to full client SPA and most everything in between, and Phoenix+LiveView is definitely the most interesting departure from the “norm” that I’ve seen.

One thing I’m trying to do is map some of my experience with other tools to Phoenix/LiveView. One tool that I was very fond of in TypeScript/JS was XState — a library for managing state transitions and effects using state charts, a generalization of finite state machines. Something that immediately struck me is that XState’s system for managing effects is essentially a implementation of what we get for free in Elixir — actors and processes communicating by message passing.

The beauty of state charts though isn’t necessarily in its effect handling, but in its ability to model complex UI/UX flow in a very declarative, understandable, and verifiable way.

While there are some older, largely unmaintained state chart/machine libraries for Elixir, none have a focus on UI in the way XState does. I’m wondering if there have been other efforts in the Elixir/Phoenix space to introduce such a thing, or if there are already techniques readily available using the tools available by default that would make such a thing unnecessary?

Thanks ahead of time for any thoughts or insight folks are willing to share!

5 Likes