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
350
TurboModuleを用いたJSスレッドの負担軽減と Follyを用いたMainスレッドのマルチスレッド化
株式会社BluAgeの業務内容とReact Nativeの最新技術への取り組みの紹介スライドです。
TaichiAkimoto
October 02, 2021
Tweet
Share
Other Decks in Programming
See All in Programming
PipeCDのプラグイン化で目指すところ
warashi
1
250
XP, Testing and ninja testing
m_seki
3
220
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.8k
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
5.3k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.9k
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
720
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
590
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
Rails Girls Zürich Keynote
gr2m
94
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Being A Developer After 40
akosma
90
590k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Side Projects
sachag
455
42k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Scaling GitHub
holman
459
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
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