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
140
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
180
create own CMS from scratch
sottar
2
8.7k
Let’s try to hack AST of JavaScript
sottar
1
1.5k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.4k
new version of context in React 16.3
sottar
3
1.5k
2ヶ月半でサービスをリリースした話し
sottar
2
2k
Redux のディレクトリ構成を考える
sottar
2
14k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
4.9k
Other Decks in Programming
See All in Programming
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
420
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
Deep Dive into React Stream/Serialize
mugi_uno
3
550
禅の心を手に入れよ
eltociear
1
280
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
350
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.1k
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
220
Polars入門
daikikatsuragawa
1
160
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
410
Fast JSX: Don't clone props object #28768
yossydev
1
160
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
490
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
74
5.2k
Infographics Made Easy
chrislema
238
18k
4 Signs Your Business is Dying
shpigford
176
21k
A designer walks into a library…
pauljervisheath
201
23k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Testing 201, or: Great Expectations
jmmastey
29
6.4k
Navigating Team Friction
lara
179
13k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
Writing Fast Ruby
sferik
622
60k
Music & Morning Musume
bryan
41
5.6k
The Invisible Side of Design
smashingmag
294
49k
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.