serialization 된것을 deserialization ( decode ) 작업을 하여 Native Thread로 보내준다.
해당 과정에서 Time Consuming이 발생하며, 느린 퍼포먼스를 보여주게 된다.
이 모든 작업은 비동기 작업으로 이루어지며, 이로써 FlatList로 많은 데이터를 다루게 될때 이슈가 발생하게 된다. 일반적인 상황에서 대부분 비동기가 장점으로 작용하나 가끔씩 동기적으로 처리될 필요가 있을때가 있다.
새로운 아키텍쳐
기존 브릿지를 제거하고, 직접적으로 Native UI method를 컨트롤이 가능
중간 데이터 전달을 위한 Time Consuming이 없기때문에 훨씬 빨라졌다
JSI ( Javascript Interface )
C++로 만들어졌다
브릿지가 대체된 새로운 모듈이다
native 영역에서 곧바로 메서드를 실행시킬 수 있다.
브릿지는 Javascript Core 엔진에서만 양립할 수 있지만 JSI는 Javascript Core 엔진과 디커플링이 될 수 있다. 즉, V8 엔진과 같은 최고의 자바스크립트 엔진을 사용 할 수 있다.
Javascript가 Native Method에 대한 reference를 계속 가지고 있게 해준다. 이것은 웹과 비슷한 방식으로 작동하는 것이다.
const container =document.createElement(‘div’);
예를들어 container 라는 변수에 createElement를 한 value를 할당했을때 container를 입력하고 “.” 을 누를 시 관련 method들이 바로 나오게 되는데, 이것 또한 C++로 초기화된 DOM 요소의 참조값을 가지고 있기때문이다.
즉 JSI는 다른 자바스크립트 엔진을 사용 할 수 있도록 해주며, JS Thread에서 곧바로 Native 영역의 Thread와 커뮤니케이션을 할 수 있도록 해준다. 때문에 브릿지의 serialization/deserialization 의 작업이 사라졌기때문에, 훨씬 더 빠른 속도를 보여준다. 뿐만아니라 C++로 작성되었기때문에, 스마트 티비 및 시계에서도 동작이 가능하게 되면서 타겟층도 더 넓힐 수가 있다.
Fabric
기존 비동기적으로 렌더링되어 발생했던 ( 많은 데이터를 가지고 FlatList에서 스크롤시 발생하는 이슈 ) 를 해결한 새로운 렌더링 시스템
JSI 를 사용하여 native method 에 대한 reference를 가지고 있어, 곧바로 사용이 가능한것 처럼 UI method에 대한 reference를 지니고 있다. 그렇기 때문에 UI에 대해 동기적으로 처리가 가능하다. 때문에 더 빠른 렌더링을 보여주며, 더 안정적인 gesture handling이 가능하다.
즉, 즉각적으로 반응이 와야하는 UI 관련된 event들에는 동기적으로 처리를 하게해주어 빠른 동작이 가능하게 바뀌었으며, API 요청과 같은 case들은 비동기적으로 처리가 되어 마치 웹처럼 작동하게 바뀌었다.
Turbo Modules
현재 아키텍쳐에서는 모든 native module ( bluetooth, geolocation 등 )들을 앱이 열리기전에 초기화를 시킨다.
새로운 아키텍쳐에서는 JSI 덕에 native module에 대한 reference를 가지고 있고, 필요할때 load를 하는 lazy 방식을 사용하여 더욱 더 최적화된 방식이 사용된다. 그덕분에 첫 앱 실행에 대한 퍼포먼스가 훨씬 더 향상된다.
요약
데이터를 운반하는 버스같은 역할을 하는 브릿지가 사라지고 JSI 라는 모듈이 도입되어 Native 영역에 대한 reference를 직접적으로 가지고 있어 빠른 커뮤니케이션이 가능하다
JavaScriptCore 엔진만을 사용이 가능한 것이아니라, V8과 같은 다양한 엔진을 사용할 수 있다.
