Building mobile applications with native UI components using JavaScript and React is a widely adopted standard. You understand the components, define your application state, and let the framework handle the rendering on iOS and Android.
But there are some types of interactions that are complex to execute smoothly. These are the real-world scenarios requiring high-frequency, synchronous communication between your JavaScript business logic and the Native UI thread. When scaling complex applications, the traditional communication layer, the Asynchronous Bridge, starts to create noticeable performance bottlenecks.
Example scenarios:
How do you intercept and format a user's credit card input synchronously before the native UI renders the unformatted digit on the screen, avoiding UI "jumps" or lag?
How do you ensure smooth scrolling in a large, complex ListView without rendering blank, white screens while the Native side waits for layout instructions from the JavaScript thread?
How do you drastically reduce a multi-second app startup time bloated by loading, parsing, and initializing every single native module at launch?
Even though we can heavily optimize our JavaScript or Native implementations independently, we need a way to bypass the slow, serialized JSON traffic passing between these two realms to truly scale. Understanding and leveraging the framework's core architecture is critical to building performant apps.
In this session, I will dive deep into React Native's architecture, demonstrating the evolution from the legacy JSON Bridge to the new JSI (JavaScript Interface). I will also detail how these engine changes directly solve historic performance problems.
The new React Native architecture enables, and guides you to build highly performant apps while adhering to the principles of efficient memory access, like synchronous native executions without serialization, and lazy initialization of modules.
App performance and responsiveness are increased by replacing the Bridge with JSI, along with introducing Turbo Modules and the new Fabric UI renderer. In addition, this architecture takes away the pain of thread-jumping delays and massive startup bundles. All of this combined allows for a drastic improvement by allowing the JavaScript business logic to allow invocation of native methods without waiting.
PS: A primary reason for me wanting to do this talk is because resources explaining the new React Native architecture are heavily scattered and don't go in enough depth.
