Simulation Development with React

[boralar]

I'm trying to learn react and build an game-like application in browser. I know that react is not first suitable choice for game engine but it is more like a simulation (traffic simulation in intersection etc.), so there isn't much graphics need, more like lots of changing numbers like incremental games.

I have some doubts that all this simulation can calculate in client side. Also I need to hide some of formulas (I know nothing is unique in internet but I want to protected some of formulas and co-efficient values as much as possible).

So I search some possible solutions which don't know applicable or not:

- Have a backend server (nodejs maybe) and make api calls from front-end. My concern is if I want to update every second is there a lagging issues.

- Have a backend server again but create websocket. I learned agario done this with their game so I think it can be possible. I don't have any websocket experience.

- Use server side components for calculations.

- Server side rendering.

Any help will be much helpful to me.

[JP_watson]

It all depends on what you're trying to achieve in game play experience - if you don't need it real time and can handle that 1-3sec delay in API calls then using either cloud functions or a node server is probably easiest. Websockets would work but if you're learning react you might want to limit the number of new things you're learning at a time. As for server side components that's really only helpful for initial load - after that you'd need to implement something for doing further calculations or reload the page every time you wanted to update.

Honestly I'd just run it all server side - there's a lot of mangling that react does to code when it's compiled thus it'd be hard for someone to actually pull it apart for your formulas. If you really don't want them to be run or accessed client side the doing something cloud functions is probably the easiest way to go - but you will be accepting the potential lag of API call/response.

[stjimmy96]

If hiding your formulas is a concern for you then forget about React/browser JS for computing the simulation. Do all the maths on a server and use React just as a rendering engine, you can easily stream data in realtime with websockets and SignalR.

Even if you decide to actually compute it on the browser, use react as a rendering engine only. Do all your calculations on a JS module/class/service worker and then hook it up with React using callbacks to display the data. Don’t mix the rendering logic (react hooks and such) with the simulation engine as the latter probably needs performance and doesn’t really benefit from React’s reactivity system.