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
TurboModuleを用いたJSスレッドの負担軽減と Follyを用いたMainスレッドのマ...
Search
TaichiAkimoto
October 02, 2021
Programming
2
300
TurboModuleを用いたJSスレッドの負担軽減と Follyを用いたMainスレッドのマルチスレッド化
株式会社BluAgeの業務内容とReact Nativeの最新技術への取り組みの紹介スライドです。
TaichiAkimoto
October 02, 2021
Tweet
Share
Other Decks in Programming
See All in Programming
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.3k
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
53
34k
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
4
570
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.3k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
780
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
300
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.7k
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
420
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
440
C++でシェーダを書く
fadis
6
3.9k
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
420
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
450
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
RailsConf 2023
tenderlove
29
890
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Docker and Python
trallard
40
3.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
390
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A Philosophy of Restraint
colly
203
16k
Building Adaptive Systems
keathley
38
2.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Rails Girls Zürich Keynote
gr2m
93
13k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Transcript
TurboModuleΛ༻͍ͨJSεϨουͷ ෛ୲ܰݮͱ FollyΛ༻͍ͨMainεϨουͷϚϧν εϨουԽ React Native Matsuri 2021 Taichi Akimoto
2021/10/02
ࣗݾհ ໊લ: ѰݩଠҰ (͖͋ͱ͍ͨͪ) ৬ۀ: ϑϩϯτΤϯυΤϯδχΞ ※React Native͕ϝΠϯ ܦྺ: 20184݄ʹגࣜձࣾBluAgeΛۀ
͓෦୳͠ΞϓϦͷʮΧφϦʔʯͷ։ൃɾӡ༻ @AkimotoTaichi
Ұؾ௨؏ͨ͠σδλϧϓϥοτϑΥʔϜΛߏங ΧφϦʔಠ݅ ΞϓϦʮΧφϦʔʯΛల։ ࣗࣾհ/ૹ٬ SaaSఏڙʢސ٬ཧ[CRM]ʣ ିཧۀΛ࣮ࢪ SaaSఏڙ Ϣʔβʔ հ ݅ݩ/ཧ
ିചങͷ྆ํͰෳϓϩμΫτΛఏڙ͠ɺՃՁΛੵΈॏͶΔ ͦΕΒΛ࿈ܞ͢Δ͜ͱʹΑͬͯɺߏతͳ༏ҐੑʢMOATʣΛߏங
TurboModuleͱ
TurboModuleͱ
TurboModuleͱ
JSIʹΑΔସϥΠϒϥϦ Crypto DataBase Camera https://github.com/mrousavy/react-native-vision-camera
CodeGenʹΑΔTurboModuleͷੜ
݁ߏΒΕ͍ͯͳ͍͕TurboModuleͷ࡞؆୯
TurboModuleͷ࡞3εςοϓ Console࣮ߦ Schema NativeͷInterfaceੜ
Schema࡞ e.g. Sqlite import { TurboModule, TurboModuleRegistry } from "react-native-tscodegen-types";
type KeyValue = { key: string; text: string; }; export interface Spec extends TurboModule { getDraft: (key: string) => Promise<string>; updateDraft: (draft: KeyValue) => Promise<boolean>; ... } export default TurboModuleRegistry.getEnforcing<Spec>("Poc") as Spec;
TurboModuleग़ྗ e.g. Sqlite namespace facebook { namespace react { static
jsi::Value __hostFunction_PocModuleSchemaCxxSpecJSI_getDraft( jsi::Runtime &rt, TurboModule &turboModule, const jsi::Vaue *args, size_t count) { return static_cast<PocModuleSchemaCxxSpecJSI *>(&turboModule) ->getData(rt, args[0].getString(rt)); }
࣮ e.g. Sqlite namespace poc { using namespace facebook::react; jsi::Value
PocModule::getDraft(jsi::Runtime &rt, const jsi::String &key) { std::string keyStr = key.utf8(rt); … draftStr = DatabaseManager::getQueryExecutor().getDraft(keyStr); … this->jsInvoker_->invokeAsync([=, &innerRt]() { if (error.size()) { promise->reject(error); return; } jsi::String draft = jsi::String::createFromUtf8(innerRt, draftStr); promise->resolve(std::move(draft)); }); }; ...
TurboModuleʹΑͬͯJSϨΠϠʔͷෛ୲͕ܰݮ͞Εͨʂ
FollyʹΑΔMainεϨουͷϚϧνεϨουԽ Main thread Crypto thread DB thread Job 1 Job
2 Job 3 Job 4 Job 5 Job 6
NativeϨΠϠʔͷॏ͍ॲཧΛεϨουͰඇಉظʹॲཧ namespace poc { namespace jsi = facebook::jsi; class PocModule
: public facebook::react::PocModuleSchemaCxxSpecJSI { std::unique_ptr<WorkerThread> databaseThread; std::unique_ptr<WorkerThread> cryptoThread;
ThreadSafeͳMPMCQueueͷར༻ WorkerThread::WorkerThread(const std::string name) : tasks(folly::MPMCQueue<std::unique_ptr<taskType>>(100)), name(name) { auto job
= [this]() { while (true) { std::unique_ptr<taskType> lastTask; this->tasks.blockingRead(lastTask); if (lastTask == nullptr) { break; } (*lastTask)(); } }; this->thread = std::make_unique<std::thread>(job); }
MultiThreadingΛར༻͍ͯ͠ΔϥΠϒϥϦ ɾreact-native-multithreading https://github.com/mrousavy/react-native-multithreading reanimatedͷworkletΛར༻ͯ͠multithreadԽΛ࣮ ɾcomm https://github.com/CommE2E/comm/tree/master/native follyΛར༻ͯ͠multithreadԽΛ࣮
React NativeNativeΛͰ্ճΕΔ!? MultiThreading TurboModule
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ෆಈ࢈ۀքςοΫʹ ڵຯ͕͋Δํ RNͷ࠷৽ಈʹ ڵຯ͕͋Δํ Meety: https://meety.net/matches/TtNbnknTpdPJ