Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Performance Limitations of React Native and How to Overcome Them

Fda8c6c2e77ab98f85e85f99656859a0?s=47 Tal Kol
April 21, 2017

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.

Fda8c6c2e77ab98f85e85f99656859a0?s=128

Tal Kol

April 21, 2017
Tweet

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

  15. None
  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?
  20. None
  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