React Native JSI

이 글은 올룰로 Confluence에 작성했던 글을 보관용으로 재포스팅 하는 것이다.

React Native Bridge

React-Native에서 Native Module을 사용하기 위해서는 데이터를 JSON으로 변환해야 한다.

Camera 사용 Flow 예

JSI

JSI(Framework?)를 통해 형변환 없이 Native로 바로 데이터를 보낼 수 있다.
그래서 겁나 빠르다고 한다…

AsyncStorage와 MMKV(JSI) 성능 비교

변수 선언 예

Javascript

• const number = 42

JSI(C++)

• jsi::Value number = jsi::Value(42);

문자열 변수 선언 예

Javascript

• const name = "Marc"

JSI(C++)

• jsi::Value name = jsi::String::createFromUtf8(runtime, "Marc")

함수 선언 예

Javascript

const add = (first, second) => {
  return first + second
}

JSI(C++)

auto add = jsi::Function::createFromHostFunction(
    runtime,
    jsi::PropNameID::forAscii(runtime, "add"), // add function name
    2, // first, second variables (2 variables) 
    [](
        jsi::Runtime& runtime, 
        const jsi::Value& thisValue,
        const jsi::Value* arguments, // function arguments
        size_t count
    ) -> jsi::Value {
        double result = arguments[0].asNumber() + arguments[1].asNumber();
        return jsi::Value(result);
    }
);

Bridge와 JSI의 차이점

요약하자면 Bridge를 JSI로 다 교체할 수 있으며, 앞으로 모든 Bridge가 JSI로 대체될 것이다.

Bridge 방식은 비동기로 처리되지만 JSI는 기본으로 동기로 처리된다.

단점은 Google Chrome을 이용한 원격 디버깅이 불가능하다는 것이다.
대신에 Flipper Desktop 앱을 디버깅할 때 사용할 수 있다.

JSI는 Native 구현에 포함될 것이기 때문에 JSI와 C++를 직접적으로 다룰일은 없다(?)
기존의 모듈을 재작성하지 않고 마이그레이션 할 수 있다(?)

기타

구글링 해보면 2019년 초부터 JSI관련 글이 등장한다.

원문

https://engineering.teknasyon.com/deep-dive-into-react-native-jsi-5fbad4ea8f06