PJUllrich

PJUllrich

Author of Building Table Views with Phoenix LiveView

Recently, I completed a first product with Phoenix LiveView and ran into the classical problem that it became unclear how, when and from where the State of the UI was changing. Facebook tackled this problem by developing the Flux pattern, which was adopted by every major SPA Framework out there (e.g. Redux, Vuex, Ng-Redux). I took the time to write an example Framework/Module that tries to replicate the Flux pattern inspired by how Vuex was implemented. I created an Example repository here. The core logic can be found here. Your opinion on the usefulness of such a library and comments/improvement suggestions on the implementation are most appreciated :slight_smile:

First 10 of 28 Posts Switch mode

wolfiton

wolfiton

Hello,

I think that MUTATIONS mutate, shouldn’t be used in your code because they are terms associated with graphql(absinthe) ecosystem and a lot of people will get confused.

It may even have conflicts.

I hope you found this info useful.

Good luck with your project..

PJUllrich

PJUllrich OP

Author of Building Table Views with Phoenix LiveView

Thanks @wolfiton, however the naming convention is given by the Vuex flux flow. Unless somebody uses these 2 libraries side-to-side, I don’t expect the naming will be confusing though since the application contexts are quite different.

PJUllrich

PJUllrich OP

Author of Building Table Views with Phoenix LiveView

So, 2 major things happened since I started this thread:

  1. I finished a first implementation of LiveEx - a state management library for Phoenix LiveView. Please check it out and comment, recommend, contribute to it :slight_smile:

  2. I wrote on Medium about how to use the library. Hopefully, this article clears up what the flux pattern is, why it might be important for LiveView, and how to use the LiveEx dependency.


Also, some other cool things happened:

  1. Chris McCord pointed out the assign_new/3 function to share parent state with child LiveViews. I will look further into this function and will check out how to use it in LiveEx.

  2. Guido Tripaliresponded to my Medium article and suggested to bring the discussion about how to manage state to this forum.


I would like to pick up Guidos suggestion and start a discussion about what you think about how state can be managed best between nested LiveViews. A couple of questions to start with:

  1. Have you run into issues already where state changes became unclear? If yes, how did you solve this?
  2. Do you think that a flux based state management like implemented in LiveEx will be useful?
  3. Do you think state management should be baked into the Phoenix LiveView library or should third-party libraries offer that functionality instead?

I’m curious about your answers :slight_smile:

AndyL

AndyL

IMO state management should (eventually) be baked into LiveView itself. With React, navigating the many flavors of 3rd party Flux libraries has been a productivity killer.

gts

gts

just to give out a sign of life! After commenting your article on Medium I’ve start writing my thoughts about the status handling, but I realised that it will take me much more time to elaborate a satisfactory analysis to share with all of you here, because the matter have complex structure and maybe can be useful to have a sort of ontology of which are the actions, the events and the states involved in a typical full Phoenix app.

egze

egze

Very cool library. I’ll be following the development.

PJUllrich

PJUllrich OP

Author of Building Table Views with Phoenix LiveView

I agree with you. At least a certain combination like React/Redux should become a standard so that the decision making effort is mitigated.

PJUllrich

PJUllrich OP

Author of Building Table Views with Phoenix LiveView

Looking forward to your findings :slight_smile:

PJUllrich

PJUllrich OP

Author of Building Table Views with Phoenix LiveView

Thanks! Feel free to test it and potentially contribute :slight_smile:

aarkhipov

aarkhipov

Does current implementation assume that there is a single root LiveView for the whole app, and all routes are implemented via child live views? :thinking: I mean, if I want a global state shared between all live views.

For now there is a one-to-one mapping between a store and a root LiveView, and if I have something like live "/one", OneLiveView; live "/two", TwoLiveView, live views One* & Two* will get different stores and state will not be shared between them, right?

Also, in the readme I found a notion of feature/integrate-genserver branch, which seems capable to share state between live views, but I haven’t found the branch itself, has it been removed for some reason?

Where Next? Top

Trending in Discussions Top

AstonJ
As the title says, please share what you’ve been up to with Elixir. Whether that’s been learning it, looking into it, making stuff with i...
2977 91898 914
New
AstonJ
The obligatory hello world thread! Who are you and where are you from? :stuck_out_tongue:
4616 55835 594
New
byu
@chrismccord : I just saw the Extract AGENTS.md from Phoenix.new into phx.new generator commit to the phoenix project. My initial shotgu...
New
arcanemachine
I was working on an Ecto migration and I needed a timestamp. So, for the nth time, I looked up the different data types for timestamps, a...
New
alexslade
Fly’s CEO posted this recently - Turn And Face The Strange · The Fly Blog It says that Fly is going all-in on sprites, which is a worry ...
New
Herve37
We’re evaluating API mocking tools for OpenAPI-based projects and would love to hear what other teams are using. We’re particularly inte...
New
matt-savvy
Is there a word for the ~> symbol used in Version strings? Do you also just call it a Squiggle Arrow™ ?!
New

Other Trending Topics Top

JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve. They are GUI (Emerge) and State management (S...
New
netoum
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
ausimian
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New
wintermeyer
There are three potential reasons for members of this forum to have a look at https://vutuv.de You are tired or annoyed of LinkedIn. Yo...
New

We're in Beta

About us Mission Statement