JSI Architecture

JSI Architecture

🔥 1. 기존 아키텍처 (Bridge Architecture)

1. UI thread

메인 애플리케이션으로 안드로이드와 IOS에서 View를 렌더링

2. Shadow thread

Background Thread로 랜더링 전에 Yoga 패키지로 각 요소의 레이아웃을 계산

3. JS thread

React Native 로직을 담당 , 번들링 된 자바스크립트 코드 실행

세개의 Thread 간 통신은 직접적으로 이루어지지 않고 Bridge를 통해 이루어짐

데이터는 JSON 형태로 이동되고 직렬화(Serialisation) 역직렬화 (Deserialisation)로 무거운 작업을 통해 이루어짐

Bridge를 이용한 JSON 데이터 전송은 불필요한 카피가 발생
비동기식 작업으로 이루어져서 Bridge가 혼잡해짐
자바스크립트와 네이티브 쪽이 서로 직접 연결될 수 없고, 또 비동기식 JSON 메시지에 의존함
모듈이 앱 첫 실행에 모두 로드되는데 이건 앱의 초기 구동 성능에 악영향을 끼침
유저의 터치에 대한 반응이 우선순위를 두고 처리되지 않고 진행되어 느림
Bridge가 Serialisation로 인해 느림
UI 요소에 디렉트로 JS thread 가 접근 불가

bridge

🔥 2. JSI Architecture

1. JS와 Native의 직접적인 상호작용

JS와 C++ 간 인터페이스로 상호 간 직접 커뮤니케이션이 가능함
정리하자면 자바스크립트 컨텍스트 안에서 네이티브 객체를 사용 할 수 있음

2. Turbo Modules의 Lazy Load

기존 아키텍처에선 모듈을 첫 실행에 모두 로드 했다면 Turbo Modules는 필요할 때만 로드가 가능

JSI

🔥 3. JSI 아키텍처로 가져올 수 있는 변화

1. 기존 아키텍처의 병목 지점 해결

자바스크립트에서 네이티브 객체 등 직접 메소드 호출 가능해져서 직접 커뮤티케이션이 가능해짐

2. Fabric

Facebook이 C++로 만든 렌더링 시스템
UI Manager가 직접 shadow Tree를 C++안에서 생성 할 수 있 음 (속도 개선)
동기식 작업 / 쓰레드 세이프 방식으로 Javascript renderer (C++)를 실행 할 수 있음
자바스크립트의 변수를 직접 호출을 할 수 있어서 데이터 직렬화가 훨씬 줄어듬

3. Turbo Modules

유저의 행동을 우선순위를 두어 대응 가능해짐
전체적인 앱 반응 속도 개선

🔥 4. Codegen

Facebook의 Codegen

자바스크립트와 네이티브 사이드 쪽의 타입 체커로 기존 느슨한 타이핑을 강력한 타이핑을 통해 정확한 타입이 전달됌
새 아키텍처에서는 자바스크립트 코드에서 any 타입을 쓸 수 없음

🔥 5. 정리

자바스크립트 코드가 네이티브 UI 요소의 레퍼런스를 가질 수 있고 메소드도 직접 호출할 수 있음.
네이티브 코드에 직접 바인딩 되어 속도가 향상됨.
JavaScript Core 엔진 말고 다른 엔진도 사용 가능, 실제 Hermes 엔진을 사용하고 있음.
네이티브 모듈을 처음에 모두 다 로드하지 않고 필요할 때 로드하는 방식.
정적 타입 체킹으로 자바스크립트와 네이티브 코드 간 호환성 강화.