Performance Limitations of React Native and How to Overcome Them

* Given in React Amsterdam on April 21, 2017

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?

After developing native mobile apps professionally for the past 7 years, I’ve seen many magical “cross-platform” solutions but eventually nothing beats pure-native in terms of app quality. Developers are skeptical of performance. React Native is unique in its ability to achieve amazing performance, but it requires developers to understand what goes on under the hood.

The aim of this talk is to ease concerns for newcomers and teach existing developers actionable guidelines on how to architect performant RN apps.

Transcript

1. Performance Limitations of React Native and How to Overcome Them TAL KOL Head of Mobile Engineering at Wix.com |
2. @koltal Passionate about React Native at Hi.
3. The Promise for Cross Platform 01
4. JavaScript THE HOLY GRAIL OF CROSS PLATFORM LANGUAGES This really isn’t a new concept.. Why didn’t it catch on?
5. Performance
6. React Native “LEARN ONCE, WRITE ANYWHERE” WITH REACT AND JAVASCRIPT Promising pedigree… But does it measure up to purely native apps?
7. UINavigationController UIImageView UISwitch UITabBarController UIBarButtonItem
8. Diving Into React Native 02
9. The JavaScript Realm The Native Realm The Bridge React Native Architecture JavaScript JSCore (VM) Single Thread ObjC+Swift / Java Main UI Thread Other BG Threads
10. The JavaScript Realm The Native Realm The Bridge Performance? ✔ ✔ ✖
11. Keep passes over the bridge to a minimum!
12. Obvious Pitfalls WHERE MOST COMPETITION LOSES THE BATTLE Synchronous updates between realms Don’t we need that for consistency?
13. 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!
14. Where Performance Breaks Down 03
16. Set state from JS on every scroll event 1 OnScroll
17. Initialize Opacity(y1) Scale(y1) Render Set onScroll Set onScroll ScrollEvent(y1) UpdateView Frame 1 Opacity(y2) Scale(y2) Render ScrollEvent(y2) Frame 2
18. Data crosses the bridge on every frame!
19. 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?
21. Wrap the image with a native view listening to scroll events in native 2 onScroll
22. Initialize Opacity(y1) Scale(y1) Render Set onScroll ScrollEvent(y1) UpdateView Frame 1 Opacity(y2) Scale(y2) ScrollEvent(y2) Frame 2
23. 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
24. React Native doesn’t mean the end of native
25. The Million Dollar Question FOR THE FRAMEWORK TO BE TRULY USEFUL Can we do the same from JavaScript? Resolve these issues without native code
26. Declare entire behavior in JS, and send it once over the bridge to a native driver 3 declare driver
27. Initialize Opacity(y1) Scale(y1) Declare Interaction Config Generic Driver ScrollEvent(y1) UpdateView Frame 1 Opacity(y2) Scale(y2) ScrollEvent(y2) Frame 2
28. for any (Scroll Event) take field (contentOffset) save as (_scrollY)
29. for any (Scroll Event) take field (contentOffset) save as (_scrollY) interpolate (_scrollY) (opacity) [0,250] ➔ [1,0]
30. for any (Scroll Event) take field (contentOffset) save as (_scrollY) interpolate (_scrollY) (opacity) [0,250] ➔ [1,0] (scale) [-200,0,1] ➔ [1.4,1,1]
31. 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
32. DEMO Get Full Code github.com/wix/ rn-perf-experiments2
33. Thanks. linkedin/talkol github.com/talkol @koltal talkol@wix.com medium.com/@talkol