$30 off During Our Annual Pro Sale. View Details »

Re-Architecture of ReactNative

sota ohara
September 06, 2023

Re-Architecture of ReactNative

2023/09/06 Nihonbashi.js #7

sota ohara

September 06, 2023
Tweet

More Decks by sota ohara

Other Decks in Programming

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