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

Going Over The Speed Limit - Synchronous Render...

Tal Kol
September 06, 2017

Going Over The Speed Limit - Synchronous Rendering in React Native

* Given in React Native EU (Poland) on Sept 6, 2017

Asynchronous rendering is one of the core principles of React. On the web, the ability to batch updates and work on a virtual DOM proved to be key factors in improving rendering performance. The same architecture seems to do miracles in React Native and gives JavaScript the performance boost needed to render native views effectively.

This benefit of React Native is also its greatest drawback. For certain types of problems in native mobile, asynchronous rendering introduces an overhead that is almost impossible to bridge. List views are a good example, as even the best implementation to date, FlatList, struggles to keep up with the fill rate of the most naive list implementation in pure native.

Is it possible to introduce synchronous rendering to React Native and tackle this category of problems from a different direction?

Tal Kol

September 06, 2017
Tweet

More Decks by Tal Kol

Other Decks in Technology

Transcript

  1. Synchronous Rendering in React Native GOING OVER THE SPEED LIMIT

    TAL KOL Head of Mobile Engineering at Wix.com |
  2. Eliminating the gaps § Animations Declarative animations with Animated +

    native driver § Navigation Wix react-native-navigation + Airbnb native-navigation § Gestures Krzysztof Magiera’s new native gesture system § Interactions My react-native-interactable library from React Conf
  3. Easy to Fix? APPARENTLY IT’S NOT SO SIMPLE The declarative

    trick doesn’t work here… An inherent issue with how React works
  4. The JavaScript Realm The Native Realm The Bridge React Native

    Architecture JavaScript Thread Main UI Thread
  5. React for Web THE CHOICE HAS ALREADY BEEN MADE THEN

    Similar problem, DOM == native realm Performance gains by non-blocking (shadow DOM)
  6. User scrolls N pixels down the list Prepare New Row

    Scroll Event Create View Redraw Content New uninitialized row drawn as white space New row drawn with correct content React Render
  7. User pushes a new screen React Root Init Create Event

    Create Views Create RCTRootView New uninitialized screen drawn as white space New screen drawn with correct content React Render
  8. User pushes a new screen Create Views Create RCTSyncRootView New

    screen drawn with correct content React Render JavaScript initialization (load) Magic Store Recipe Magic Use Recipe
  9. User scrolls N pixels down the list Prepare New Row

    Scroll Event Create View Redraw Content New uninitialized row drawn as white space New row drawn with correct content React Render
  10. User scrolls N pixels down the list Create View Recycle

    Old Row New row drawn with correct content React Render JavaScript initialization (load) Magic Store Recipe Magic Use Recipe
  11. Hacking the Reconciler TIME TO LOOK UNDER THE HOOD How

    does React render native views? We’ll use this process to create our recipe!
  12. Storing the Recipe ON JAVASCRIPT INITIALIZATION Manually call RN.render from

    SyncRegistry Swizzle UIManager funcs with store stubs
  13. Using the Recipe WHEN RCTSyncRootView IS CREATED OR UPDATED On

    demand, execute commands from native Instantiate native views without the bridge!
  14. Limitations § Only “declarative” components § No JavaScript code in

    render func § Prop updates can’t change the tree