Translated from: https://juejin.cn/post/7000628820814331918
In this context, “cross app” refers to the ability to share code and software modules across different executables on different platforms. It’s an advanced version of cross-platform development.
** Author: Bytedance Front End Platform Team - 熊文源**
Cross-app engineering has been evolving for several years. Popular frameworks such as mini-app, Flutter, and React Native, are all successful and mature frameworks. They are well-suited for different developers and are widely used in large-scale apps. The author has been fortunate to have been involved in the research and practice of these frameworks from an early stage and has designed and implemented a cross-app architecture that supports tens of millions of daily active users. The experiences and knowledge that have successfully increased development and product iteration efficiency are now being applied to the game industry.
React Native has become popular in recent times. It supports Android, iOS, and Windows, and it addresses the problem of cross-app development and hot reloading. One of its key features is its ability to release updates anytime, also known as OTA updates. When discussing React Native, it is often compared to Flutter, another popular solution. Both have their own advantages and disadvantages and there are many debates about which is better. However, it is important to keep in mind that the right tool should be selected based on the specific use case. In the following text, we will delve into how we use React Native for ads in games in more detail.
React Native is typically used for building apps and is adopted by big companies such as Facebook (Meta) and others. Weex, a similar framework, is also based on the principles of React Native. However, it is relatively rare to see React Native being used in game development. The main reason for this is that the mechanisms used in games and React Native are not well-suited to one another. Modern games are typically developed using frameworks such as Unity, Cocos, and UE4, which already support both Android and iOS and allow for OTA updates.
In native app development, fast iteration features are often achieved through the use of H5 (WebView) due to its ease of integration and development. Similarly, in the game industry, H5 pages are used for their multi-platform support, however they fall short in terms of responsive performance, fast loading times, and efficient memory usage - which are crucial factors in providing an immersive experience in games. To meet these requirements for fast iteration, quick releases, high performance, and immersion, the team conducted extensive A/B testing, and ultimately found React Native to be the optimal foundational infrastructure solution.
Rendering engine: In games, rendering engines are designed and implemented using the graphics library OpenGL. The native system UI is distinct from the UI in games, and is therefore not applicable. Additionally, the native system UI is not compatible with games because 1) the entire game runs as a single Activity on Android, and 2) the rendering engine provides customized animation attributes to enhance the immersive experience.
Programming language: In game development, C# and Lua are commonly used languages. Unlike native Android and iOS development, games make use of native resources by using a bridge. The developer pool for games is relatively smaller compared to front-end and mobile developers. The UI of games is not directly shared with native, although there are solutions to enable UI sharing, e.g., sharing texture, it’s not widely used in practice.
Performance critical: Games have higher performance requirements for graphics and rendering compared to apps and demand more memory and CPU resources. This leads to stricter requirements for memory management and stability in hybrid pages.
OTA: Games also commonly support OTA, such as Unity which supports JavaScript and Lua development. Often, activities and game logic are implemented with OTA for reduced package size and enhanced flexibility.
Supported devices: Games, once developed, can run on different platforms, such as Android, iOS, PC and Android emulators, and these require higher compatibility than regular apps. For example, Android emulators support both x86 (32-bit and 64-bit) and arm (v7 and v8). However, for v7 and v8 which are commonly used on mobile phones, it requires instruction translation, which makes it more difficult for support.
Games commonly adopt H5 pages for its large amount of APIs and data analytics. However, H5 has inherent issues with memory and performance. Native UI cannot be used directly in games for the reasons mentioned before. In selecting a solution, compatibility with various native and game runtime environments is our primary concern.
Games development often involves multiple platforms and inconsistent programming languages, requiring specific solutions like xLua and PureTS which adds maintenance burden.
Front-end/mobile solutions like H5 can address cross-app problems, but have poor performance and experience in game activities. React Native, open-sourced by Facebook, improves the cross-app experience, enhances performance and is leading the trend towards “greater front-end.” Similar frameworks, like Flutter with its embedded graphic engine and consistent UI, are being adopted by industry leaders. Another comparable framework, Week, also shares similar mechanism with React Native.
Flutter or Weex are not selected as a solution, because Flutter is comparatively heavier than React Native and harder to integrate into existing projects CI/CD and IDE. It can also be challenging to separate game development and that of activity pages. Additionally, Weex’s weak ecosystem is not suitable for this use case. Other solutions like xLua+Unity and pureTS(open-sourced by Tencent), are also widely used. A comparison of these solutions can be found in the table below.
xLua and PureTS are great frameworks. We ultimately chose React Native as the best fit. However, React Native has limitations, such as not being able to layout the UI with the game as in xLua and PureTS which enlist in-game UI rendering. So we are also iterating on PureTS, but on a smaller scale:
I understand you may have doubts about React Native’s limitations in rendering performance. However, we’ve chosen React Native and remain optimistic about its future despite some developers moving to Flutter or native development. We will further address your doubts by discussing the optimizations of the new architecture in future posts.