Introduction to Native Modules
Native modules in React Native are essential components that allow developers to execute code on a device that isn’t written in JavaScript. These modules act as containers for related native code, and they must be discoverable by an app during both the build and runtime phases. Utilizing native modules can enable tighter platform integration, such as accessing device peripherals and building performance-oriented code that is platform-independent.
Developers can write native module code in various languages including Kotlin, Java, Swift, Objective-C, C++, and Rust. Each of these languages offers unique benefits, with C++ and Rust being particularly notable for their ability to create platform-independent, high-performance code.
Challenges and Trade-offs of Using C++
While C++ can offer increased performance, it is not without its challenges. It can lead to increased build times and lacks the hot reloading capabilities of JavaScript, resulting in a slower development cycle. Additionally, C++ can cause more complex failures and crashes, which are harder to debug due to the lack of clear stack traces.
Managing package dependencies between your JavaScript and C++ code can also be cumbersome, and there’s a steeper learning curve associated with C++. This combination of factors can lower developer productivity. However, like many aspects of software development, these challenges are a trade-off that may be worthwhile depending on the project’s needs.
Understanding React Native Architectures
The evolution of React Native architectures plays a crucial role in how native modules are developed. The old architecture relied heavily on a bridge for message parsing, which led to increased memory usage and inefficient handling of binary data. This architecture has influenced the design of early native modules.
The new architecture introduces the JavaScript Interface (JSI), which abstracts over JavaScript engines like JavaScriptCore and Hermes. JSI allows native modules to interact more directly with the JavaScript runtime, offering a more efficient and streamlined process. The public API of the runtime is straightforward, providing functionalities to evaluate JavaScript, manage microtasks, and access global objects.
Criteria for Choosing Native Module Alternatives
When deciding on the best alternative for building native modules, two main criteria should be considered. First, decide whether to support the old, new, or both architectures. Supporting the old architecture may require additional testing and bug fixes, while focusing on the new architecture simplifies maintenance but may limit user availability.
Second, assess the need for strong typing between JavaScript and native code. Strong typing can reduce catastrophic failures and ease maintenance by keeping both sides in sync. Various approaches exist for code generation, ranging from generating TypeScript declarations from C++ code to creating stubs in TypeScript or Flow for native implementation.
Exploring Native Module Alternatives
The primary alternatives for native modules include TurboNativeModules, LegacyNativeModules, and NitroModules. TurboNativeModules require the new architecture and achieve type safety through code generation from TypeScript or Flow declarations. However, pure C++ modules aren't yet supported on iOS.
LegacyNativeModules do not provide type safety and predate JSI, making it challenging to access the JSI runtime pointer. A hybrid approach combines Legacy and Turbo modules, easing the transition to the new architecture by allowing for implementation switching at build time.
NitroModules: The New Contender
NitroModules are a recent addition, offering significant performance improvements in benchmarks. They support multiple languages and architectures, providing more expressive code generation capabilities. While they require a peer dependency for app developers, this drawback is expected to be resolved in the future.
Practical Considerations for Building with C++
Developers should consider pre-building portions of their native code to reduce build times and complexity for library users. Pre-building allows for earlier detection of type failures and simplifies the build process. However, caution is advised when accessing React Native APIs from pre-builds due to unstable ABI boundaries across versions.
Compiler caches can also be employed to speed up subsequent compilations. On Android, this involves modifying the CMakeList file, while on iOS, a pull request has simplified the process through the use of C cache.
Final Thoughts
NitroModules represent a promising direction for developers looking to leverage C++ in their React Native projects. For complex projects, pre-building can be a valuable strategy, provided developers are mindful of the associated limitations. Utilizing compiler caches can further enhance efficiency, making the development process smoother and more productive.
Comments