React Native Bridges Architectures

React Native Bridges Architectures

This talk present the current React Native Bridge architecture, explaining its characteristics, how it works and its drawbacks.
It also talk about how the new future bridge architecture will look like

4f821cc50056b266277a2156593eb96c?s=128

Sibelius Seraphini

August 31, 2018
Tweet

Transcript

  1. React Native Bridges Sibelius Seraphini

  2. Sibelius Seraphini @sibelius @sseraphini 2

  3. Libraries or components that allow you to write native code

    (Objective C/Swift or Java) and integrate them with your React Native app. Also called Bridge Modules. What is a native module? 3
  4. - For when you need access to platform API -

    When you want to reuse code written in a native language - Using a third party library only available in native language - High performance, multi-threaded code (image processing, for example) Why use them? 4
  5. Use RN bridge library for ObjC/Java to export your module

    and expose it to JavaScript Import the native module as a library to your app and use methods, views and receive events Main Idea of a Bridge 5
  6. - asynchronous - serializable - batched Bridge Architecture 6

  7. - React Native returns a single JSON that lists mutations

    to perform. - [["createView", attrs], ["manageChildren", ...]] How does it works? 7
  8. - shadow queue - where the layout happens - main

    thread - where UIKit/Android does it thing - Javascript thread - where your JS code is actually running - GCD queue - for each Native Module How it works? 8
  9. Bridge initialization dependency graph 9

  10. Bridge call cycle 10

  11. - Native Modules - expose native API without a UI

    - e.g.: package that read calendar events - Native UI Modules - expose a UI widget - e.g.: RNCamera component Types of Native Modules 11
  12. Why Bridge is hard - Need to implement in native

    language (know Java and Objective C) - You need to implement the same logic twice - Bridge can be slow to pass big amounts of data (like images as base64 strings) - Need to be familiar with other IDEs like XCode and Android Studio
  13. - asynchronous - hard to make sync APIs - serializable

    - unnecessary copying instead of directly sharing memory - batched - harder to call functions natively React Native Bridge Drawbacks 13
  14. - Change threading model: enable synchronously on JavaScript - Async

    Rendering - rendering priorities - Simplifying - Faster and more lightweight React Native Bridge Future 14
  15. - Shared memory owner: share between native and JavaScript -

    JSI - interop layer between JavaScript and native - Opt-in synchronous execution - UI responsiveness React Native Bridge Future 15
  16. Resources 16 https://github.com/prscX/awesome-react-native -native-modules https://setemasters.imasters.com.br/conversas /is-react-native-native/

  17. Resources 17 - https://facebook.github.io/react-native/docs/nati ve-modules-ios - http://facebook.github.io/react-native/blog/2018 /06/14/state-of-react-native-2018 - https://github.com/react-native-community/disc

    ussions-and-proposals/issues/4
  18. I didn't mention 18 - How to really implement them

    (check this https://speakerdeck.com/jgfidelis/react-native-n ative-modules) - Deep dive on new native modules bridge structures