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
Devoxx BE - Local Development in the AI Era
kdubois
0
130
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
150
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
4k
CSC305 Lecture 04
javiergs
PRO
0
270
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
株式会社 Sun terras カンパニーデック
sunterras
0
280
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.9k
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
980
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
400
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
210
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.3k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
680
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Designing for humans not robots
tammielis
254
26k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Building Adaptive Systems
keathley
43
2.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Optimizing for Happiness
mojombo
379
70k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
How to Think Like a Performance Engineer
csswizardry
27
2k
Designing for Performance
lara
610
69k
Scaling GitHub
holman
463
140k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
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.