Currently, we have a react app running with babylonjs, managed state, and all is good… but, once a lot of nodes are involved, that reflects back on the state (changes, reactivity, memory, fps…) then it all becomes a lesser desirable experience.
That being said, would love to hear your thoughts about 3 things:
1. Optimizing babylonjs for react
How would you go about it ? I see that the inspector is written in react, any best practices in mind ?
2. React 19 seems great? does Babylon compile?
React 19 seems to be promising a lot of cool optimizations to many problems we have, just by virtue of using a compiler. seems like a stretch, but did anyone investigate how that might have bad side effects ?
3. Changing the framework
yeah I know… react is not a framework…
Jokes aside, what do you think of Svelte or Solidjs? has anyone tried it? does it… work (with the compilation model)?
thanks a lot for your thoughts folks! happy coding!
If your app is not heavily UI focused then using Babylonjs GUI may be satisfactory. The use of “frameworks” may bog-down the JS thread if state and updates are unmanaged.
In terms of state and managing your variables effectively: If using React, I like to keep Babylon refs right at the top of the app and the canvas outside of state updates and avoid binding React props/render updates. Create a top-level actions class/function that Babylonjs code can subscribe to, and execute when the scene is ready. What worked really well for me is using setInterval which executes React updates in a busy Babylonjs scene. This custom ActionsManager was a lazy but effective way to manage React updates. It can be useful if you want to display lots of information on the screen, from your scene. You can decide when React evaluates the render update.
If you have a lot of scripting you can consider putting Babylonjs and your game code on a Web Worker and keep React at the front. Not yet don’t this myself though, just an idea.
I use React and React Native with Babylon.js and Babylon Native in my day job. I’ve never been a huge fan of React if I’m honest and we do have to jump through a lot of hoops to eke the best performance out of it. Ideally you want your UI framework to get out of the way, leaving more cycles for 3D rendering. React, in my experience, gets in the way more often than it should.
I’ve never used Solid but Svelte is great - small, fast, compile away, no virtual DOM, surgical updates, less boilerplate, simply more fun. Svelte is my go to these days for personal projects, is a joy to use, and works a treat with Babylon.js.
well, for one, it is indeed UI-heavy so GUI is not gonna cut it, second, I like the “reactivity” react provides tbh (and all of its ecosystem is really hard to let go, unless for something close to it)
useEffect? wish Unity had that! state management is much cleaner in TS than what used to do back in my C# days with those static classes…
(slight tangent, let’s all sit and agree that the web stack frankenstein’s monster isn’t helping)
That said, the performance hit is extremely noticeable…
Great to hear that Svelte is working for you! that breathes a sigh of relief for me tbh! do you have maybe a boiler plate on git to look at? you kinda got me more excited for it haha
The quickest, smallest package, no dependencies, no licence issues (including optional dependencies like icons and fonts). This is important for Babylonjs ofc.
the smallest package indeed, after all the goal is to get out of the way of BJS.
MUI is such a pain to customize. I did some research on the best way UI libs for svelte… and I am realizing that there is no escaping tailwind in modern day frontend dev …
Personally I don’t love any of the most popular UI packages. I’m sure there may be a minimum library that purely focuses on accessibility, with no animations or effects. I like the idea of using Web Components! My latest projects I’ve avoided UI libraries and built my own components. Maybe start with this for your template which I’m sure can be styled by a single css file.
Sometimes while typing you just think why don’t I do a Google!
I had a look at the link you posted and while it does seem to be good there is some “design dogma” in there. eg stating when not to use a checkbox… for binary decisions , use a toggle instead.
I personally have no problem using a single checkbox for a binary decision
“expand scorecards” - could a toggle work , yes. did I want to use a toggle - no. I like the minimal look of the checkbox. I have not had a single user not know what to do with it … or complain about it.
React is the natural, safe choice for many projects - there’s a lot of experienced React developers who know how to get the most out of it, and it’s not going away anytime soon. I think it’s a classic case of “no one ever got fired for buying IBM”. As much as Svelte and Solid are great, they are relative newcomers compared to React, Angular and Vue, and corporate decision makers are less inclined to take a risk on new tech unless there’s a compelling business case for it.
During new project development I use lil-gui (a maintained fork of dat.gui). It’s great for rapid development iteration, but not suitable for the final polished UI.
)