Tweet
Tweet

Slide 1

Slide 1 text

이현우, Viva Republica (Toss) React Native Under The Hood

Slide 2

Slide 2 text

HyunWoo Lee • Android(React Native) Developer, Toss • Organizer, Kotlin User Groups • Organizer, GDG Songdo Github: https://github.com/l 2 hyunwoo LinkedIn: https://www.linkedin.com/in/hyunwoo-lee- 0412 / Medium: https://medium.com/@l 2 hyunwoo Velog: https://velog.io/@l 2 hyunwoo

Slide 3

Slide 3 text

From code to application 목차 Motivation React Native에 대한 간략한 소개

Slide 4

Slide 4 text

Motivation 이번 세션을 준비한 동기 누가 들으면 좋을까요?

Slide 5

Slide 5 text

Motivation

Slide 6

Slide 6 text

Motivation

Slide 7

Slide 7 text

Motivation 그래서 어떻게 돌아가죠?

Slide 8

Slide 8 text

Introduction to React Native Learn Once, Write Anywhere

Slide 9

Slide 9 text

React Native

Slide 10

Slide 10 text

React Native • 플랫폼별로 android/ios 폴더가 존재 • 플랫폼 빌드를 위한 여러가지 파일들이 포함되어 있음 • 이외의 Javascript 관련파일 구성 사항들은 React 프로젝트와 거의 동일

Slide 11

Slide 11 text

Fron code to application JavaScript에서 하나의 모바일 앱으로

Slide 12

Slide 12 text

// A.tsx Hello A! // B.tsx Hello B!

Slide 13

Slide 13 text

JavaScript의 언어특성 • JavaScript는 모듈화된 자바스크립트 파일들을 읽어내지 못함 • 여러 파일들을 하나의 파일로 만들어주는 도구가 필요함 // A.tsx Hello A! // B.tsx Hello B!

Slide 14

Slide 14 text

Bundler 여러 모듈/파일을 하나의 파일로 묶는다

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

React Native - Metro • 번들링 • 유틸성 코드 주입(Polyfill) • console.log를 네이티브에서 기록하기 위한 기능 • 리액트 네이티브 초기화(InitializeCore)

Slide 17

Slide 17 text

React Native - Metro • 번들링 • 유틸성 코드 주입(Polyfill) • console.log를 네이티브에서 기록하기 위한 기능 • 리액트 네이티브 초기화(InitializeCore)

Slide 18

Slide 18 text

코드 변환 - Babel 메트로에 의해 번들링된 코드를 React Native 실행환경에 맞게 변환하는 과정 Babel이라는 라이브러리 활용 중

Slide 19

Slide 19 text

Runtime 코드가 실행되는 환경

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

First Choice - JSC(JavaScript Core) • Apple에서 제공하는 JavaScript Runtime • JSC를 활용해서 리액트 네이티브를 돌아가게 만들 수 있었지만 • C 기반 API • 브릿지가 가져가야하는 너무 많은 책임들 • JSC와 리액트 네이티브의 강결합 • 이와 같은 문제점들이 대두됨

Slide 24

Slide 24 text

엔진을 추상화해볼까? - JSI

Slide 25

Slide 25 text

JSI의 Data Flow (Native to JS) • Android/iOS에서는 C++로 명령을 보내면서 JSI(shared memory layer 에서) 호출 • 메모리 업데이트 되면 JS에 반영이 되어서 표시됨

Slide 26

Slide 26 text

JSI의 Data Flow (JS to Native Module) 1 . 네이티브 모듈을 호출하면 JS엔진에 자바스크립트 값을 전달한다.

Slide 27

Slide 27 text

JSI의 Data Flow (JS to Native Module) 2 . HostFunction로 이 값이 전달되고. 함수는 이를 C++ dynamic으로 변환 한다.

Slide 28

Slide 28 text

JSI의 Data Flow (JS to Native Module) 3 . 이 값은 네이티브 모듈 인프라로 전달 된다. 4 . 플랫폼에서는 이를 플랫폼 타입으로 변환하고 메서드 호출하는 것을 확인

Slide 29

Slide 29 text

JSI를 활용한 Rendering 전략

Slide 30

Slide 30 text

And Next React Native is evolving right now.

Slide 31

Slide 31 text

New Architecture - Three Pillars • Turbo Module • Fabric • Codegen

Slide 32

Slide 32 text

New Architecture - Three Pillars • Turbo Module • 특정 모듈을 지연 초기화시켜 앱 시작 속도 개선 • Fabric • 새로운 UI 렌더링 아키텍처. • 유저 인터랙션(스크롤, 제스처)을 메인스레드/네이티브 스레드에서 동기적으로 처리 • Codegen • 플랫폼 코드의 타입을 JS에서도 활용할 수 있게 정적 타이핑 지원 • TypeScript 활용시 이득

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content