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
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
540
みんなでプロポーザルを書いてみた
yuriko1211
0
190
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.3k
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.9k
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
2.4k
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
8
5.1k
JavaでLチカしたい! / JJUG CCC 2024 Fall LT
nhayato
0
110
僕がつくった48個のWebサービス達
yusukebe
20
17k
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
120
Outline View in SwiftUI
1024jp
1
290
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
300
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
100
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Documentation Writing (for coders)
carmenintech
65
4.4k
Building an army of robots
kneath
302
42k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
The World Runs on Bad Software
bkeepers
PRO
65
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
560
Statistics for Hackers
jakevdp
796
220k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
YesSQL, Process and Tooling at Scale
rocio
168
14k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
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