Tweet
Tweet

Slide 1

Slide 1 text

TurboModuleΛ༻͍ͨJSεϨουͷ ෛ୲ܰݮͱ FollyΛ༻͍ͨMainεϨουͷϚϧν εϨουԽ React Native Matsuri 2021 Taichi Akimoto 2021/10/02

Slide 2

Slide 2 text

ࣗݾ঺հ ໊લ: ѰݩଠҰ (͖͋΋ͱ͍ͨͪ) ৬ۀ: ϑϩϯτΤϯυΤϯδχΞ ※React Native͕ϝΠϯ ܦྺ: 2018೥4݄ʹגࣜձࣾBluAgeΛ૑ۀ ͓෦԰୳͠ΞϓϦͷʮΧφϦʔʯͷ։ൃɾӡ༻ @AkimotoTaichi

Slide 3

Slide 3 text

Ұؾ௨؏ͨ͠σδλϧϓϥοτϑΥʔϜΛߏங ΧφϦʔಠ઎෺݅ ΞϓϦʮΧφϦʔʯΛల։ ࣗࣾ஥հ/ૹ٬ SaaSఏڙʢސ٬؅ཧ[CRM]ʣ ௞ି؅ཧۀΛ࣮ࢪ SaaSఏڙ Ϣʔβʔ ஥հ ෺݅ݩ/؅ཧ ௞ିചങͷ྆ํͰෳ਺ϓϩμΫτΛఏڙ͠ɺ෇ՃՁ஋ΛੵΈॏͶΔ ͦΕΒΛ࿈ܞ͢Δ͜ͱʹΑͬͯɺߏ଄తͳ༏ҐੑʢMOATʣΛߏங

Slide 4

Slide 4 text

TurboModuleͱ͸

Slide 5

Slide 5 text

TurboModuleͱ͸

Slide 6

Slide 6 text

TurboModuleͱ͸

Slide 7

Slide 7 text

JSIʹΑΔ୅ସϥΠϒϥϦ Crypto DataBase Camera https://github.com/mrousavy/react-native-vision-camera

Slide 8

Slide 8 text

CodeGenʹΑΔTurboModuleͷੜ੒

Slide 9

Slide 9 text

݁ߏ஌ΒΕ͍ͯͳ͍͕TurboModuleͷ࡞੒͸؆୯

Slide 10

Slide 10 text

TurboModuleͷ࡞੒3εςοϓ Console࣮ߦ Schema NativeͷInterfaceੜ੒

Slide 11

Slide 11 text

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; updateDraft: (draft: KeyValue) => Promise; ... } export default TurboModuleRegistry.getEnforcing("Poc") as Spec;

Slide 12

Slide 12 text

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(&turboModule) ->getData(rt, args[0].getString(rt)); }

Slide 13

Slide 13 text

࣮૷ 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)); }); }; ...

Slide 14

Slide 14 text

TurboModuleʹΑͬͯJSϨΠϠʔͷෛ୲͕ܰݮ͞Εͨʂ

Slide 15

Slide 15 text

FollyʹΑΔMainεϨουͷϚϧνεϨουԽ Main thread Crypto thread DB thread Job 1 Job 2 Job 3 Job 4 Job 5 Job 6

Slide 16

Slide 16 text

NativeϨΠϠʔͷॏ͍ॲཧΛεϨουͰඇಉظʹॲཧ namespace poc { namespace jsi = facebook::jsi; class PocModule : public facebook::react::PocModuleSchemaCxxSpecJSI { std::unique_ptr databaseThread; std::unique_ptr cryptoThread;

Slide 17

Slide 17 text

ThreadSafeͳMPMCQueueͷར༻ WorkerThread::WorkerThread(const std::string name) : tasks(folly::MPMCQueue>(100)), name(name) { auto job = [this]() { while (true) { std::unique_ptr lastTask; this->tasks.blockingRead(lastTask); if (lastTask == nullptr) { break; } (*lastTask)(); } }; this->thread = std::make_unique(job); }

Slide 18

Slide 18 text

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ԽΛ࣮૷

Slide 19

Slide 19 text

React Native͸NativeΛ଎౓Ͱ্ճΕΔ!? MultiThreading TurboModule

Slide 20

Slide 20 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ෆಈ࢈ۀքςοΫʹ ڵຯ͕͋Δํ RNͷ࠷৽ಈ޲ʹ ڵຯ͕͋Δํ Meety: https://meety.net/matches/TtNbnknTpdPJ