Performance Limitations of React Native and How to Overcome Them

* Given in Reversim Conf on Sept 20, 2016

React Native holds great promise in terms of excellent developer experience with Javascript and code reuse between platforms. The big question is  —  do these benefits come at the price of performance? How well can React Native hold its own against purely native implementations?

Transcript

1. Introduction to React Native Performance LIMITATIONS AND HOW TO OVERCOME THEM linkedin/talkol github.com/talkol @koltal talkol@wix.com
2. TAL KOL Hi. Mobile Apps Lead Architect at Wix.com
4. 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
5. The Promise for Cross Platform 01
6. JavaScript THE HOLY GRAIL OF CROSS PLATFORM LANGUAGES This really isn’t a new concept.. Why didn’t it catch on?
7. Performance
8. React Native “LEARN ONCE, WRITE ANYWHERE” WITH REACT AND JAVASCRIPT Promising pedigree… But does it measure up to purely native apps?
9. UINavigationController UIImageView UISwitch UITabBarController UIBarButtonItem
10. Diving Into React Native 02
11. The JavaScript Realm The Native Realm The Bridge React Native Architecture JSCore (VM) Single Thread Main UI Thread Other BG Threads
12. The JavaScript Realm The Native Realm The Bridge Developer Experience Javascript One JS Bundle Business Logic ObjC+Swift / Java IPA / APK The Framework
13. The Native Realm The Bridge The JavaScript Realm Example
14. The JavaScript Realm The Native Realm The Bridge class Example extends Component { render() { return ( <View> <Text style={{color: "blue"}}> Hello World </Text> </View> ); } }
15. The JavaScript Realm The Bridge { createView: { type: "RCTView", children: [{ type: "RCTText", text: "Hello World", style: { color: 255 } }] } } The Native Realm
16. 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
17. The JavaScript Realm The Native Realm The Bridge Performance? ✔ ✔ ✖
18. Keep passes over the bridge to a minimum!
19. Obvious Pitfalls WHERE MOST COMPETITION LOSES THE BATTLE Synchronous updates between realms Don’t we need that for consistency?
20. 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!
21. Where Performance Breaks Down 03
23. Set state from JS on every touch event 1 Swipeable
24. Initialize Translation(x1) Opacity(x1) Render Set PanResponder Set PanResponder TouchEvent(x1) UpdateView Frame 1 Translation(x2) Opacity(x2) Render TouchEvent(x2) Frame 2
25. Data crosses the bridge on every frame!
26. 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?
28. Implement the Swipeable container handling touch events in native 2 Swipeable
29. Initialize Translation(x1) Opacity(x1) Render Set PanResponder TouchEvent(x1) UpdateView Frame 1 Translation(x2) Opacity(x2) TouchEvent(x2) Frame 2
30. 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
31. React Native doesn’t mean the end of native
32. Declare interaction in JS, and send it over the bridge to a native driver 3 declare driver
33. Initialize Translation(x1) Opacity(x1) Declare Interaction Config Generic Driver TouchEvent(x1) UpdateView Frame 1 Translation(x2) Opacity(x2) TouchEvent(x2) Frame 2
34. for any (Pan Event) take field (dx) save as (state.translateX)
35. for any (Pan Event) take field (dx) save as (state.translateX) interpolate (state.translateX) (opacity) [-max,0,max] ➔ [0,1,0]
36. 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]
37. { 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]
38. 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
39. DEMO Get The Full Code github.com/wix/ rn-perf-experiments
40. @koltal Thanks.