I have an increasingly complex application and the imperative code monolith / labyrinth I’m building is making me nervous. I want to introduce some good patterns. With most html apps I would use something like Preact with Redux and leverage the react-redux library with its Provider, and connected components via the connect(map_state, map_dispatch) or hooks to handle updating the UI when the state changes. What are good patterns / libraries to use in BabylonJS?
I may also include a pubsub where performance was important (as redux can get a bit slow if you are intermittently releasing 100s/1000s of actions a second) and or a state machine for complicated parts of the application.
I was wondering if there is any tutorial page on state management, or any other demos, for example using a pub sub or a state container like redux that hooks into a system where you can declare the components / UI that should render when the state is in certain conditions?
First - thanks for the PR on xmachina - it’s merged! I think state machines and general state management (ie: Redux, zustand) are designed to meet different needs.
I have found that Redux (in combination with redux-saga) can work well in turn based games and configurators and is really testable, but becomes more problematic in higher frequency updates to state that flows through the react renderer. I don’t really like all the boiler-plate or providers and it won’t cross renderer boundaries with a bridge since it uses the context. Keep in mind that you can update outside of the React renderer, much like react-spring does animations and it performs well.
^^ You can see the subscribe mechanism pushes to the useState hook and magically things just work.
I’ve been using Zustand state management lately instead of redux - it has also slices (like redux selectors).
Lastly - I can’t speak of the VSM, but I’m sure Raanan can. I did look at building a 3D implementation of an xmachina State Machine visualizer using a Force Directed physics engine I wrote (wammo) that works in Babylon.js and solves in iterations and can build the visualizations of State Machines on the fly - I did an experiment a couple of years ago using Dagre (2D force directed graph) there is a demo here (only 2D directed graph layout and does not solve iteratively with render loop): brianzinn/babylonjs-directed-graph: Directed Graph testing in BabylonJS (github.com)
Certainly an area of interest for me these topics - mostly I haven’t been able to make much time recently to work on these fun side projects xstate has an excellent ecosystem for state management and visualizers.
Thanks! The demo code you linked to showing the xmachina <-> redux/react syncing mechanism is interesting.
I am currently planning to use BabylonJS for all the UI and not using React for any of it.
I am also planning on using xmachina for particularly complicated parts of the logic. For general “which UI window is showing” I am currently planning to use redux and use a lightweight “connector” I have written because I think there will be many possible transitions available and I don’t want to put them all into xmachina… although I also have in the back of my mind that I might write some code that allows me a higher level way to define all the transitions needed and that produces the object to instantiate the xmachina state machine.
sounds like a fun project - let me know if anything can be added to xmachina to support your scenario. it’s definitely designed with game design/flow in mind and not React specific.
I think the Babylon.js GUI goes really well with state management together with React - it’s hard for me to write that imperatively anymore. ie:
I tried running the demo typescript app you’ve also kindly provided but I hit an error with that. I will definintely bear your project in mind though… looks really useful!
As an aside do you know if react-babylonjs plays well with preact? I like to keep my build sizes as small as possible as they can already get pretty heavy with the models that are loaded. Thanks!
Unfortunately tree-shaking isn’t working right now on react-babylonjs (the declarative react renderer), but it does on babylonjs-hook NPM. I haven’t managed to find the time to make a permanent solution (dynamic loading or dynamic registration) - I think the build size will be disappointing, but on the other hand babylon.js is small compared to even some single textures.
Separately, I have not seen that issue with JSX.Intrinsic elements. Maybe if you reload vs code it will bring in the ones added by the library. You should get intellisense on all of the camera props.
Thanks @brianzinn ! I tried a couple of times to get it working with preact but it was just spinning and never finished rendering so I am just going to use react instead now
xstate has an excellent ecosystem for state management and visualizers.
