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
180
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
200
create own CMS from scratch
sottar
2
8.8k
Let’s try to hack AST of JavaScript
sottar
1
1.6k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.5k
new version of context in React 16.3
sottar
3
1.6k
2ヶ月半でサービスをリリースした話し
sottar
2
2k
Redux のディレクトリ構成を考える
sottar
2
14k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
4.9k
Other Decks in Programming
See All in Programming
What is Parser
yui_knk
9
4.1k
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
240
A New Era of Testing
mannodermaus
2
290
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
410
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
260
Ruby Parser progress report 2024
yui_knk
2
220
Go Code Generation at newmo / 2024-08-27 #newmo_layerx_go
genkey6
0
560
The Shape of a Service Object
inem
0
500
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
370
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
110
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
460
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Building Applications with DynamoDB
mza
90
6k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Typedesign – Prime Four
hannesfritz
39
2.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
The Invisible Customer
myddelton
119
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Being A Developer After 40
akosma
84
590k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
Writing Fast Ruby
sferik
623
60k
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.