Re-Architecture of ReactNative

2023/09/06 Nihonbashi.js #7

Transcript

1. Re-Architecture of
   ReactNative
   Sota Ohara
   Nihonbashi.js #7 2023/09/06
   

   View Slide

2. Profile
   Sota Ohara
   @sottar_
   CureApp, inc.
   EM / SWE
   RENDEZ-VOUS inc.
   CTO
   @sottar
   

   View Slide

3. OR
   

   View Slide

4. Performance
   

   View Slide

5. Performance
   ● ReactNative は Bridge を通して Platform にアクセスする
   ● 独自で Widget を持っていないので Bridge を通して Platform の Widget を取得する必要がある
   

   View Slide

6. NativeBridge
   JavaScript
   (JavaScriptCore)
   Native
   Android - Java
   iOS - Obj C / Swift
   RN Bridge
   (C++)
   ● 引数, 返り値などは JSON を使ってやりとり
   ● 実行時には非同期に処理される
   ● アプリ起動時に Module が登録される
   JSON
   JSON
   

   View Slide

7. JSI (JavaScript Interface)
   

   View Slide

8. JSI
   JavaScript が C++ のオブジェクトへのリファレンスを持つことで、直接 C++ の
   コードを実行できる仕組み
   • JSON を serialize/deserialize する必要がなくなる
   • Native のコードを同期的に呼び出すことができる
   • 起動時に Module を登録する必要がなくなる
   ReactNative 内部で使用する JavaScript の engine を選べるようになった
   

   View Slide

9. Turbo Modules
   Fabric Native Components
   

   View Slide

10. Turbo Modules
    JSI の仕組みを使った新しい Native Module システム
    Location や Bluetooth など Native の機能を同期的に実行することができる
    JS Thread JSI
    Native
    Android - Java
    iOS - Obj C / Swift
    

    View Slide

11. Fabric Native Components
    • Fabric Renderer を使用して画面上に Native Component をレンダリング
    するもの
    • JSI を使用することで View の更新を同期的に行う仕組み
    • React Concurrent Mode を前提に書かれていて、ユーザーのインタラクショ
    ンに優先順位をつけて最適な描画を行えるようになる
    

    View Slide

12. Performance Benchmarks
    https://github.com/reactwg/react-native-new-architecture/discussions/123
    

    View Slide

13. Thank you.
    

    View Slide