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

Performance Limitations of React Native and How...

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.

Tal Kol

April 21, 2017
Tweet

More Decks by Tal Kol

Other Decks in Technology

Transcript

  1. Performance Limitations of React Native and How to Overcome Them

    TAL KOL Head of Mobile Engineering at Wix.com |
  2. JavaScript THE HOLY GRAIL OF CROSS PLATFORM LANGUAGES This really

    isn’t a new concept.. Why didn’t it catch on?
  3. React Native “LEARN ONCE, WRITE ANYWHERE” WITH REACT AND JAVASCRIPT

    Promising pedigree… But does it measure up to purely native apps?
  4. 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
  5. Obvious Pitfalls WHERE MOST COMPETITION LOSES THE BATTLE Synchronous updates

    between realms Don’t we need that for consistency?
  6. 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!
  7. Initialize Opacity(y1) Scale(y1) Render Set onScroll Set onScroll ScrollEvent(y1) UpdateView

    Frame 1 Opacity(y2) Scale(y2) Render ScrollEvent(y2) Frame 2
  8. 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?
  9. 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
  10. The Million Dollar Question FOR THE FRAMEWORK TO BE TRULY

    USEFUL Can we do the same from JavaScript? Resolve these issues without native code
  11. Declare entire behavior in JS, and send it once over

    the bridge to a native driver 3 declare driver
  12. for any (Scroll Event) take field (contentOffset) save as (_scrollY)

    interpolate (_scrollY) (opacity) [0,250] ➔ [1,0]
  13. 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]
  14. 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