Re-Architecture of ReactNative

2023/09/06 Nihonbashi.js #7

Transcript

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