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

Performance Limitations of React Native and How to Overcome Them

Tal Kol
September 20, 2016

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?

Tal Kol

September 20, 2016
Tweet

More Decks by Tal Kol

Other Decks in Programming

Transcript

  1. 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
  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 JSCore (VM) Single Thread Main UI Thread Other BG Threads
  5. The JavaScript Realm The Native Realm The Bridge Developer Experience

    Javascript One JS Bundle Business Logic ObjC+Swift / Java IPA / APK The Framework
  6. The JavaScript Realm The Native Realm The Bridge class Example

    extends Component { render() { return ( <View> <Text style={{color: "blue"}}> Hello World </Text> </View> ); } }
  7. The JavaScript Realm The Bridge { createView: { type: "RCTView",

    children: [{ type: "RCTText", text: "Hello World", style: { color: 255 } }] } } The Native Realm
  8. 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
  9. Obvious Pitfalls WHERE MOST COMPETITION LOSES THE BATTLE Synchronous updates

    between realms Don’t we need that for consistency?
  10. 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!
  11. 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?
  12. 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
  13. Declare interaction in JS, and send it over the bridge

    to a native driver 3 declare driver
  14. for any (Pan Event) take field (dx) save as (state.translateX)

    interpolate (state.translateX) (opacity) [-max,0,max] ➔ [0,1,0]
  15. 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]
  16. { 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]
  17. 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