React Native’s current architecture sends serialized messages between JavaScript and native code through an asynchronous bridge. When a fast scroll on a low-end device needs many new list rows, that back-and-forth can lag and leave blank space on screen.
React Native CodeGen
Speaker
At React Native EU 2019, Alexey Kureev of Facebook discusses React Native CodeGen and architecture with the Callstack conference audience.
Kureev points to browser APIs as examples of JavaScript calling native functionality through runtime extensions. React Native needs a shared interface for different platforms and JavaScript engines; he describes JSI, the JavaScript Interface, as that abstraction, with bindings that connect calls to native implementations.
Because JSI bindings are written in C++, Kureev proposes generating them from typed JavaScript definitions in Flow or TypeScript. CodeGen can also produce native artifacts such as Objective-C protocols and Java classes, giving implementations compile-time checks against the JavaScript API.
Generated types could help expose API differences across platforms and check whether over-the-air JavaScript updates remain backward compatible. CodeGen can produce a JSON schema for compatibility checks. Kureev also expects startup to improve because the app would no longer need to load every native module and build its JavaScript interface at launch.
Takeaways
- Use typed API definitions to catch mismatches between JavaScript and native implementations at build time.
- Treat cross-platform API parity as a design constraint; different parameter types can otherwise fail only at runtime.
- Generate schemas and check them before shipping over-the-air updates that change native API usage.
- Measure startup work that enumerates native modules; generating interfaces ahead of time may remove some launch-time overhead.
Mentioned in this talk
Search inside this talk
What was claimed 8
- works atAlexey Kureev works at
Meta“even though I work at Facebook”
YouTube Unverified1 source· Talk
- featureReact Native bridge: Asynchronous message queue and serialization between JavaScript and native code
“the message gets queued and serialized on the bridge”
YouTube Unverified1 source· Talk
- uses
“there’s another implementation that uses TypeScript”
3:03inWhen will the re-architecture (TurboModules, Fabric) rollout be available to the community?YouTube Verified2 sources· Talk
- usescode generation uses
flow“The official Codegen script is based on Flow”
3:03inWhen will the re-architecture (TurboModules, Fabric) rollout be available to the community?YouTube Verified2 sources· Talk
- featureJSI: Provides an abstraction for connecting JavaScript runtimes to native code across platforms and engines
“it gives us a contract”
YouTube Unverified1 source· Talk
- featurecode generation: Generates JSI bindings and native interface artifacts from typed declarations
“Codegen that takes these types, parses everything, and generates an output”
YouTube Unverified1 source· Talk
- featureCodePush: Can push JavaScript over the air to update an application's JavaScript bundle
“you can push JavaScript over the air and update your JavaScript bundle”
YouTube Unverified1 source· Talk
- featurecode generation: Generates a schema representing component and module types and APIs for backward compatibility checks
“it also generates a schema, which is basically a JSON representation of the types and APIs”
YouTube Unverified1 source· Talk
