Project architecture (design)

[alec1o]

Hello! I'm trying to understand how this framework works but I can't understand it, basically I know that I have "a task" that executes and exposes "html" and this "html" is used to recreate the UI using (Unity UI or *UIElement). Can provide macro (simple) details about how project execution works (*if possible), how react running in "background", etc.

[KurtGokhan]

Hi. Thanks for the question. Let me explain it as best as I can.

ReactUnity works similarly to how a regular React Web application built with Webpack works. Therefore, it is best if I explain it by making an analogy between React Web application and React Unity application.

In a React Web application, you have a React project, which has a package.json in its root. You use Node.js to run a development server, or build your application. You also have a package manager (npm, yarn etc.) that installs the dependencies in your package.json. This is all true for ReactUnity projects as well.

Web applications often use a framework (Angular, Next.js etc.) or a bundler (Webpack, Vite, Rollup etc.). ReactUnity uses Webpack. In fact, it uses a Webpack config very similar to Create React App.

Anyway, Webpack has something called a dev-server. When you run it, it serves your Html and Javascript files so that you can preview your application by going to a URL (for example http://localhost:8080) in your browser. Dev server also provides other benefits like hot-reload and compile errors. This is also possible in ReactUnity. When you run your dev-server, a component inside Unity (ReactUnityRenderer) can connect to this server and run the Javascript code that is served, to generate the UI inside Unity.

Note though, ReactUnity doesn't have HTML files. It works with Javascript and CSS.

You can also build your project with Webpack, which generates static Html/Javascript/Css files. These files can then be served with any web server you want (Nginx, IIS, Apache, Express, etc. there are too many). When you serve them, someone on internet can go to the URL of your server and see your website. We don't need that in ReactUnity. In ReactUnity, when you build your static Javascript/Css files, you build them into your Unity project. ReactUnityRenderer can then read those files and generate your UI inside Unity.

In short, a ReactUnity UI is similar to a React Website. React Websites are rendered in a browser, but ReactUnity UI is rendered using the ReactUnityRenderer component that is in the ReactUnity's Core package.

The renderer boots up a Javascript Runtime inside unity and executes the Javascript built by your project. This is similar to a browser's Javascript engine. In ReactUnity, you can select one of the three JS runtimes you want to run your UI in, QuickJS (recommended), Clearscript, and Jint. Each has advantages and disadvantages. I won't go into details.

Let me know if there is a gap.

[KurtGokhan]

While some parts of what you said are correct, I think you didn't get the general idea. Perhaps you are thinking there is an inter-process communication, or a browser running in background which syncs DOM with Unity, but that is not the case. The React code runs on the same thread as Unity code. It is just written in a different language. But it is still the part of the same runtime. So anything you can do in a C# code, you can do in Javascript. And that is what ReactUnity does. It creates UI elements in runtime based on what the React algorithm tells it to.

There is no server, proxy, or request. Most of the time, you want to load assets used by ReactUnity locally. So we handle things by file system, not servers. Webpack Dev Server is used in development, but don't let that confuse you because you don't need a server in builded app.

Also there is no ReactDOM. ReactUnity is a replacement for ReactDOM, and it is a React plugin just like ReactDOM. So there is no DOM either. There is Virtual DOM (which is created and managed by React) but it is an implementation detail.

[alec1o]

I know how to use react at a high level but I don't understand much about its implementation, but I'm just speculating, react unity uses ReactUnity/renderer to create the bridge between virtual dom and unity-side, and I think that's why ReactUnity/render re-implement react-reconciler, until then if I understand (if it's correct), so it's in ReactUnity/renderer that the calls happen, through the call (ReactUnity.UnityBridge), I thought I understood until I saw facebook/yoga included, (then I asked myself: What is the role of yoga here? :😭😭😭)

[KurtGokhan]

Yep, what you said is correct. Basically ReactUnity/renderer is the React reconciler implementation, same as react-dom.

What is the role of yoga here?

ReactUnity isn't only about the React reconciler. ReactUnity is a complete framework, so we also implement CSS. Yoga is used to calculate flexbox in CSS. But that happens in the C# side. It isn't related to the architecture of the reconciler, because CSS engine is a separate component and it is part of the ReactUnity/core.

[alec1o]

Ohh, I understood I'll learn about react-reconciler, any question 🙋 I'll back to ask you, I hope I don't demand too much of your knowledge 🙏 . I don't want to be disturbing you🥺

[KurtGokhan]

Nope, it's all good. I enjoy talking about this stuff.