🐕
New Architectureを整理
はじめに
LT で React Native のことを話そうと思って勉強しており、せっかくなので Zenn にも残しておきます！以下のスクラップに勉強のメモ書きがあります。 (もう少し更新続けます！)
間違ってるところがあればスクラップかコメントからご指摘頂けるととても助かります 🙇
分かりづらいこと、分からないことがある場合も一生懸命調べて回答するのでコメントお願いします 🙇
New Architecture 概要
- React Native の基盤となるシステムが C++で書き直された
- 2018 年から取り組まれていた
- React Native 0.68 から試験的にオプトイン可
- React Native 0.76 からデフォルトに変更 (2024/10 月後半)
- パフォーマンス向上,UX 改善(ズレなど),制限のあった React 機能のサポートなどが期待できる
- ブリッジレスとも呼ばれている
ブリッジレスとは
- React Native にはスレッドが 3 種類ある
- JavaScript Thread: JavaScript を担当
- Native UI Thread: Native を担当
- Shadow Thread: レイアウト計算を担当
- Old Architecture での JavaScript と Native 間での唯一の通信方法はブリッジを経由すること
- ブリッジは JSON でのやり取りで、通信するたびにシリアル化が必要 かつ非同期での通信しか出来ない
- このブリッジが大きな制約になっていた
- New Architecture では、JSI を利用して、JavaScript と Native 間の直接通信が可能になった
- New Architecture では、JSI を採用したためブリッジが不要になった
- このため New Architecture ではブリッジレスと呼ばれている
構成
| Old Architecture | New Architecture | |
|---|---|---|
| Native との通信 | 非同期ブリッジ | JSI |
| レインダリングシステム | (名前見つかったら書きます 🙏) | Fabric |
| ネイティブモジュールシステム | (名前見つかったら書きます 🙏) | TurboModules |
| JS エンジン | 主に JSC | Hermes |
| JS バンドラー | Metro | Metro |
| レイアウトエンジン | Yoga | Yoga |
| その他 | Codegen |
役割
| 要素 | 役割 |
|---|---|
| JSI | JavaScript とネイティブ間のブリッジ無しでの直接通信を可能にするインターフェース。C++で書かれている。ブリッジから JSI になったことで同期的にも通信が可能になった。 |
| Fabric | 新しいレンダラー。複数のスレッドが有効になり、UI 更新の優先度を表現できるようになったことでパフォーマンス向上。React18 の Suspence, Transitions などが利用できるようになった。JSI を利用する。C++で書かれている。 |
| TurboModules | 新しいネイティブモジュール。JSI を活用してブリッジ無しで通信ができる。古いネイティブモジュールでは JavaScript で使用されるすべてのネイティブモジュールをアプリを開く時に読み込む必要があったが、TurboModules では必要な時に読み込める(遅延読み込み)のでアプリの起動時間が改善。JSI を利用する。C++で書かれている。 |
| Hermes | React Native 向けに最適化された JavaScript エンジン。Old Architecture でよく使われていた JSC(JavaScriptCore)は実行時にバイトコードを生成するのに対して、Hermes ではビルド時にバイトコードを生成する。JSC と比較して、起動時間、メモリ使用量、アプリサイズが改善している。 |
| Metro | React Native のための JavaScript バンドラー。Old Architecture の時から使われてる。 |
| Yoga | 位置、サイズ、配置などのレイアウト計算をするクロスプラットフォームレイアウトエンジン。Flexbox に重点を置いて CSS のサブセットをサポートしている。Old Architecture の時から使われてる。C++で書かれている。 |
| Codegen | JavaScript と C++の通信をするための仕組み。静的型チェックと JSI 用のネイティブコード生成をする(TypeScript は強い型付けがなく C++は強い型付けがされているので必要)。実行時ではなくビルド時に実行される。TurboModules や Fabric は、Codegen で生成されたコードを利用して JavaScript と通信する。 |
構成図
Old Architecture
ここから持ってきました 👇
New Architecture
ここから持ってきました 👇
参考
おまけ
Hermes の次の進化先として、Static Hermes (ビルド時に Native コードを生成)が開発されており、既にベンチマークを取って導入についての提案をしている Issue なども見つかりました！
更にパフォーマンスが進化するはずなのでこちらも期待です 🥳
Discussion