Unconventional Tech Stack for Games — React

“The game prototype I’ve been working on uses React.” “Oh, what?”

This is a typical reaction I get after describing the projects I’ve worked on. React is not a game engine, but I have learned that it can be a very powerful library that works well for applicable games and prototypes.

React is a Javascript library that focuses on user interfaces. Its purpose is to allow web applications to change data without having to reload the whole page. To achieve this, React has asynchronous rendering, which means that components will not re-render unless data has been changed. In addition, there is React Native which uses React for mobile platforms, but under the hood, it renders to the native platform UI. In this post, I’ll be referring to my experiences using both React and React Native, but I’ll only mention React for sake of brevity.

Now, I know what you’re thinking…this sounds like the exact opposite of what should be used for a game engine. What about a physics engine? And the update and render loop? While most games need these core components, the projects I worked on don’t have the same technical requirements that a 3D platformer game may have. For most prototypes within the Episode studio, we remain in the interactive fiction and storytelling space and typically have simpler gameplay mechanics. As a result, we can consider different tech stacks that are unusual to the gaming industry and may be better suited for our needs.

Game Feature Set

We chose React as a game engine for some prototypes because their feature sets consisted of lightweight game mechanics and focused on UI. Most of the player interaction was tapping on buttons and other similar elements, which means that most of the game logic lived in callbacks. Therefore, we didn’t need game objects to be updated like they would in a traditional game loop. In addition, the asynchronous rendering was beneficial in our use case, because not reloading the whole screen for data changes means quick re-renders.

Fast Iteration Speed

React has hot reloading, which allows developers to change code without having to reload the app. The amount of time saved from not having to reload the app (plus compile times) and click through a few screens to return to your previous state really adds up. In the prototyping phase, games frequently change to address playtest feedback — especially UI for usability reasons. React’s focus on UI and reusable components allows sharing components across multiple places and quick iteration. Both of the React projects I worked on were able to launch fairly quickly — roughly within a few months. This is important to validate a game’s design and mechanics, so we can continue to improve and iterate further.

Developer support and 3rd party libraries/tools

React Native is cross-platform, which makes mobile development for iOS and Android simpler with a unified code base. React Native handles most differences between the mobile platforms, meaning there are few places in the code where we had to explicitly handle iOS versus Android.

React is open source and has a huge community of contributors, meaning bugs can be quickly uncovered or you can typically get workarounds or fixes in the next release. There are also tons of third party libraries available for React, including productivity tools and features that are needed in game (like a countdown or an in-game pop-up notification) that I would have otherwise had to write myself. Here are some libraries that I found most useful that are compatible with React:

• Storybook: Allows building components in isolation and very useful for testing edge cases in properties
• @emotion/styled: More readable and cleaner code by combining React components and CSS styles
• Typescript: Javascript + type checking! Saved me lots of time by catching typos and silly mistakes
• Zeplin: Our UI/UX designer used this for all our in-game screens and then we can reuse the available CSS markup to build components
• react-native-debugger: Remote debugger + React Inspector + Redux DevTools!
• Firebase/React Native Firebase: Development platform that supports databases, analytics, hosting, crash reporting, and more

Code Deployment

The biggest advantage of React over other game engines is code deployment. In other game engines, any change means a new binary needs to be built, resubmitted, and redistributed on the app stores. For React Native, CodePush allows developers to deploy Javascript changes without the need of a new binary, which is extremely useful for critical bug fixes.

For the games built in React, we can access the game in an iOS or Android app using a webview. In this case, code changes can be deployed to the site versus changes in the app binaries. This also means consistency across all players, because they will have the same deployed version of the game, meaning there is no need to manage multiple versions. In contrast, other mobile apps often have a percentage of users who can’t upgrade their app versions and may be on a buggy version that doesn’t give them the full player experience.

Hybrid Apps

If you want the ease of creating UI in React but still have game mechanics that require a more performant programming language, then there’s always the opportunity to have a hybrid app. React Native hooks into the native platform through a bridge between Javascript and the native language. We have built and tested prototypes with a React Native/C++ hybrid architecture. This enabled us to keep fast UI iteration speed but at the cost of creating the Javascript to C++ bridges. From our limited testing, we saw some promising results in addition to the developer benefits I’ve mentioned. We saw improvements in various performance metrics (such as battery usage, CPU usage, etc) compared to our native based apps. While there are some remaining technical challenges and potential performance bottlenecks with the Javascript/C++ bridges, it seems like a viable solution for having a complex game while still using React for its cross platform UI.

Conclusion

Overall, my experience using React for games has been positive, mostly due to developer support, rapid iteration, and its code deployment process. How applicable React is to you and your game may vary, especially since the use cases are limited. However, if you find that React alone isn’t a good fit for your complex game mechanics but you still want a powerful UI, a hybrid app could be a good cross platform solution.

Join our team! Pocket Gems is hiring!