Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Re-Architecture of ReactNative
Search
sota ohara
September 06, 2023
Programming
0
270
Re-Architecture of ReactNative
2023/09/06 Nihonbashi.js #7
sota ohara
September 06, 2023
Tweet
Share
More Decks by sota ohara
See All by sota ohara
Implement prerendering w/ puppeteer
sottar
1
290
create own CMS from scratch
sottar
2
9k
Let’s try to hack AST of JavaScript
sottar
1
1.8k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.6k
new version of context in React 16.3
sottar
3
1.7k
2ヶ月半でサービスをリリースした話し
sottar
2
2.2k
Redux のディレクトリ構成を考える
sottar
2
15k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
5k
Other Decks in Programming
See All in Programming
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
2
470
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
580
開発生産性を上げるための生成AI活用術
starfish719
3
1k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
160
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
170
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
110
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
110
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
240
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
How GitHub (no longer) Works
holman
315
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Speed Design
sergeychernyshev
32
1.2k
How to Ace a Technical Interview
jacobian
280
24k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Documentation Writing (for coders)
carmenintech
75
5.1k
Transcript
Re-Architecture of ReactNative Sota Ohara Nihonbashi.js #7 2023/09/06
Profile Sota Ohara @sottar_ CureApp, inc. EM / SWE RENDEZ-VOUS
inc. CTO @sottar
OR
Performance
Performance • ReactNative は Bridge を通して Platform にアクセスする • 独自で
Widget を持っていないので Bridge を通して Platform の Widget を取得する必要がある
NativeBridge JavaScript (JavaScriptCore) Native Android - Java iOS - Obj
C / Swift RN Bridge (C++) • 引数, 返り値などは JSON を使ってやりとり • 実行時には非同期に処理される • アプリ起動時に Module が登録される JSON JSON
JSI (JavaScript Interface)
JSI JavaScript が C++ のオブジェクトへのリファレンスを持つことで、直接 C++ の コードを実行できる仕組み • JSON
を serialize/deserialize する必要がなくなる • Native のコードを同期的に呼び出すことができる • 起動時に Module を登録する必要がなくなる ReactNative 内部で使用する JavaScript の engine を選べるようになった
Turbo Modules Fabric Native Components
Turbo Modules JSI の仕組みを使った新しい Native Module システム Location や Bluetooth
など Native の機能を同期的に実行することができる JS Thread JSI Native Android - Java iOS - Obj C / Swift
Fabric Native Components • Fabric Renderer を使用して画面上に Native Component をレンダリング
するもの • JSI を使用することで View の更新を同期的に行う仕組み • React Concurrent Mode を前提に書かれていて、ユーザーのインタラクショ ンに優先順位をつけて最適な描画を行えるようになる
Performance Benchmarks https://github.com/reactwg/react-native-new-architecture/discussions/123
Thank you.