2023/09/06 Nihonbashi.js #7
Re-Architecture ofReactNativeSota OharaNihonbashi.js #7 2023/09/06
View Slide
ProfileSota Ohara@sottar_CureApp, inc.EM / SWERENDEZ-VOUS inc.CTO@sottar
OR
Performance
Performance● ReactNative は Bridge を通して Platform にアクセスする● 独自で Widget を持っていないので Bridge を通して Platform の Widget を取得する必要がある
NativeBridgeJavaScript(JavaScriptCore)NativeAndroid - JavaiOS - Obj C / SwiftRN Bridge(C++)● 引数, 返り値などは JSON を使ってやりとり● 実行時には非同期に処理される● アプリ起動時に Module が登録されるJSONJSON
JSI (JavaScript Interface)
JSIJavaScript が C++ のオブジェクトへのリファレンスを持つことで、直接 C++ のコードを実行できる仕組み• JSON を serialize/deserialize する必要がなくなる• Native のコードを同期的に呼び出すことができる• 起動時に Module を登録する必要がなくなるReactNative 内部で使用する JavaScript の engine を選べるようになった
Turbo ModulesFabric Native Components
Turbo ModulesJSI の仕組みを使った新しい Native Module システムLocation や Bluetooth など Native の機能を同期的に実行することができるJS Thread JSINativeAndroid - JavaiOS - Obj C / Swift
Fabric Native Components• Fabric Renderer を使用して画面上に Native Component をレンダリングするもの• JSI を使用することで View の更新を同期的に行う仕組み• React Concurrent Mode を前提に書かれていて、ユーザーのインタラクションに優先順位をつけて最適な描画を行えるようになる
Performance Benchmarkshttps://github.com/reactwg/react-native-new-architecture/discussions/123
Thank you.