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
260
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
280
create own CMS from scratch
sottar
2
9k
Let’s try to hack AST of JavaScript
sottar
1
1.7k
フロントエンドエンジニアが伝えたい最近の事情
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
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
PipeCDのプラグイン化で目指すところ
warashi
1
270
Goで作る、開発・CI環境
sin392
0
230
ニーリーにおけるプロダクトエンジニア
nealle
0
830
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
Is Xcode slowly dying out in 2025?
uetyo
1
270
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Automating Front-end Workflow
addyosmani
1370
200k
Building Adaptive Systems
keathley
43
2.7k
BBQ
matthewcrist
89
9.7k
Navigating Team Friction
lara
187
15k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
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.