@react-facet is meant to support the particular use case of UIs meant to run inside a computer game. In recent years, game developers have felt the need for a greater standarization, simplification and improvement in accessibility of in-game UIs, including the main menu, setting screens, and HUDs shown during live gameplay.
In this context, games have started integrating web engines into their platform, to be able to make use of the talent pool and tooling already available for UI development. In particular, Coherent Lab's Gameface provides a web browser environment that can be directly integrated into a C++ codebase, with plugins to Unreal Engine and Unity. The Chromium Embedded Framework provides a very similar option for game developers in many popular environments.
This new environment for web development presents however a unique challenge; the question that has historically given pause to game developers is, "will web technologies be performant enough to operate under the stringent frame budgets of real time games?"
The answer is now a qualified yes.
Optimal performance is always obtained by doing as little as possible; so direct DOM manipulation without any library or framework will naturally be the approach to web development that will lead to the most performant applications. This, however, defeats the purpose of using web technologies, which is to take advantage of the tools available uniquely to the web. Say, for example, that React is one of those coveted tools; can we still use React within a game UI without running over our performance budget?
@react-facet, which is the solution we built to address this issue after years of working within these exact constraints in the Minecraft Bedrock edition.
To find a way to be able to get all the design, developer experience, organizational and code sustainability benefits of React, we worked on identifying the particular performance concerns that would raise out of using it. Our exploration yields a clear result:
- Reconciliation is the most expensive feature of React, by a long margin. Mounting and unmounting components is to be avoided, and re renders caused by prop changes are to be avoided as well.