Tweet
Tweet

Slide 1

Slide 1 text

Introduction to React Native Performance LIMITATIONS AND HOW TO OVERCOME THEM linkedin/talkol github.com/talkol @koltal [email protected]

Slide 2

Slide 2 text

TAL KOL Hi. Mobile Apps Lead Architect at Wix.com

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

The Wix App § Fully in React Native § Kicked-off 8 months ago § In production for iOS & Android § Recent world-wide release § ~20 developers (and rising) § All infrastructure is open-source

Slide 5

Slide 5 text

The Promise for Cross Platform 01

Slide 6

Slide 6 text

JavaScript THE HOLY GRAIL OF CROSS PLATFORM LANGUAGES This really isn’t a new concept.. Why didn’t it catch on?

Slide 7

Slide 7 text

Performance

Slide 8

Slide 8 text

React Native “LEARN ONCE, WRITE ANYWHERE” WITH REACT AND JAVASCRIPT Promising pedigree… But does it measure up to purely native apps?

Slide 9

Slide 9 text

UINavigationController UIImageView UISwitch UITabBarController UIBarButtonItem

Slide 10

Slide 10 text

Diving Into React Native 02

Slide 11

Slide 11 text

The JavaScript Realm The Native Realm The Bridge React Native Architecture JSCore (VM) Single Thread Main UI Thread Other BG Threads

Slide 12

Slide 12 text

The JavaScript Realm The Native Realm The Bridge Developer Experience Javascript One JS Bundle Business Logic ObjC+Swift / Java IPA / APK The Framework

Slide 13

Slide 13 text

The Native Realm The Bridge The JavaScript Realm Example

Slide 14

Slide 14 text

The JavaScript Realm The Native Realm The Bridge class Example extends Component { render() { return ( Hello World ); } }

Slide 15

Slide 15 text

The JavaScript Realm The Bridge { createView: { type: "RCTView", children: [{ type: "RCTText", text: "Hello World", style: { color: 255 } }] } } The Native Realm

Slide 16

Slide 16 text

The JavaScript Realm UIView *view = [UIView new]; view.frame = CGRectZero; UILabel *label = [UILabel new]; label.frame = CGRectZero; label.text = @"Hello World"; label.textColor = [UIColor blueColor]; [view addSubview:label]; The Native Realm The Bridge

Slide 17

Slide 17 text

The JavaScript Realm The Native Realm The Bridge Performance? ✔ ✔ ✖

Slide 18

Slide 18 text

Keep passes over the bridge to a minimum!

Slide 19

Slide 19 text

Obvious Pitfalls WHERE MOST COMPETITION LOSES THE BATTLE Synchronous updates between realms Don’t we need that for consistency?

Slide 20

Slide 20 text

React Native HANDLES THIS SURPRISINGLY WELL OUT-OF-THE-BOX, YAY! React.js solves a similar problem on the web Updates between realms are async!

Slide 21

Slide 21 text

Where Performance Breaks Down 03

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Set state from JS on every touch event 1 Swipeable

Slide 24

Slide 24 text

Initialize Translation(x1) Opacity(x1) Render Set PanResponder Set PanResponder TouchEvent(x1) UpdateView Frame 1 Translation(x2) Opacity(x2) Render TouchEvent(x2) Frame 2

Slide 25

Slide 25 text

Data crosses the bridge on every frame!

Slide 26

Slide 26 text

What Can We Do? LET’S PULL OUT THE BIG GUNS In RN we can move any component to native How can we reduce bridge traffic?

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Implement the Swipeable container handling touch events in native 2 Swipeable

Slide 29

Slide 29 text

Initialize Translation(x1) Opacity(x1) Render Set PanResponder TouchEvent(x1) UpdateView Frame 1 Translation(x2) Opacity(x2) TouchEvent(x2) Frame 2

Slide 30

Slide 30 text

Good But Not Ideal WE CAN PROBABLY DO BETTER Need native skillset to fix this (or open source) We keep 10% native engineers for this purpose

Slide 31

Slide 31 text

React Native doesn’t mean the end of native

Slide 32

Slide 32 text

Declare interaction in JS, and send it over the bridge to a native driver 3 declare driver

Slide 33

Slide 33 text

Initialize Translation(x1) Opacity(x1) Declare Interaction Config Generic Driver TouchEvent(x1) UpdateView Frame 1 Translation(x2) Opacity(x2) TouchEvent(x2) Frame 2

Slide 34

Slide 34 text

for any (Pan Event) take field (dx) save as (state.translateX)

Slide 35

Slide 35 text

for any (Pan Event) take field (dx) save as (state.translateX) interpolate (state.translateX) (opacity) [-max,0,max] ➔ [0,1,0]

Slide 36

Slide 36 text

for any (Pan Event) take field (dx) save as (state.translateX) interpolate (state.translateX) (opacity) [-max,0,max] ➔ [0,1,0] (translate) [-1,0,1] ➔ [-1,0,1]

Slide 37

Slide 37 text

{ forAny: { type: "?????" }, takeField: { byName: "?????", }, saveAs: "state.?????", interpolate: { source: "state.?????", dest: { field: "?????", input: [A,B,C], output: [D,E,F] } } } for any (?????) take field (?????) save as (state.?????) interpolate (state.?????) (?????) [A,B,C] ➔ [D,E,F]

Slide 38

Slide 38 text

The Future of RN SOLVING MORE AND MORE SCENARIOS WITHOUT NATIVE CODE JS API that reduces passes over the bridge Declarative nature of React is a big help

Slide 39

Slide 39 text

DEMO Get The Full Code github.com/wix/ rn-perf-experiments

Slide 40

Slide 40 text

@koltal Thanks.