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

Introduction to React Native Performance

Introduction to React Native Performance

* Given in ReactNative TLV Meetup on July 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?

https://medium.com/@talkol/performance-limitations-of-react-native-and-how-to-overcome-them-947630d7f440#.x4l4xr32i

Fda8c6c2e77ab98f85e85f99656859a0?s=128

Tal Kol

July 20, 2016
Tweet

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

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

    Javascript One JS Bundle Business Logic ObjC+Swift / Java IPA / APK The Framework
  11. The JavaScript Realm The Native Realm The Bridge Performance? ✔

    ✔ ✖
  12. Keep passes over the bridge to a minimum!

  13. Obvious Pitfalls WHERE MOST OF THE COMPETITION LOST THE BATTLE

    Synchronous updates between realms Don’t we need that for consistency?
  14. 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!
  15. Where Performance Breaks Down 03

  16. None
  17. Set state from JS on every touch event 1 Swipeable

  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. Implement the Swipeable container handling touch events in native 2

    Swipeable
  22. Good but not ideal WE CAN PROBABLY DO BETTER Need

    native skillset to fix this (or open source) We keep 10% native devs for this purpose
  23. React Native doesn’t mean the end of native

  24. Declare interaction in JS, and send it over the bridge

    to a native driver 3 declare driver
  25. 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
  26. DEMO Get The Full Code github.com/wix/ rn-perf-experiments