JSI
JSI, or JavaScript Interface, is a lightweight framework that allows JavaScript code to directly hold references to and invoke methods on native C++ objects, replacing the traditional asynchronous bridge for improved performance.
What Problem Does JSI Solve?
The traditional bridge required serializing every piece of data into JSON before passing it between JavaScript and native code, introducing latency and overhead, especially for frequent, high-speed communication.
How JSI Works
JSI provides a C++ interface that JavaScript engines like Hermes can use to directly call native functions and access native objects, eliminating the need for JSON serialization entirely.
Synchronous Communication
Unlike the asynchronous bridge, JSI enables synchronous method calls between JavaScript and native code when needed, which is particularly valuable for performance-critical operations like animations.
JSI and TurboModules
TurboModules are built on top of JSI, allowing native modules to be lazily loaded and accessed with significantly less overhead compared to the traditional bridge-based native modules system.
JSI and Fabric
Fabric, React Native’s new rendering system, also leverages JSI to enable faster, more direct communication for UI updates between JavaScript and native rendering code.
Benefits of JSI
- Eliminates JSON serialization overhead
- Enables synchronous native method calls when appropriate
- Improves overall app startup and runtime performance
- Forms the foundation for TurboModules and Fabric
Conclusion
JSI represents a fundamental architectural improvement in React Native, enabling faster and more efficient communication between JavaScript and native code, forming the backbone of the framework’s modern architecture.
