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

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