Bridges to react native

Crossing the gap by writing native modules

hello, I'm Florian 👋

Software engineer @

Developer of

and

@florianrival

4ian

you've said

Bridges?

Let's see how they do

Node.js?

Java?

emscripten?

react native?

xamarin?

✅ node-gyp

✅ Embind/WebIDL

✅ JNI

✅ C# bindings generators

✅ The bridge

COCOS2d-JS

✅ Bindings with SpiderMonkey

react native

Bridge

in a nutshell

Quick recap

$ ls

android
ios
package.json
index.js

Your app is built in JavaScript using React

Components (or API) provided by React Native are creating native components on screen

exchanging over the bridge

Native app

JS engine

thread

Bridge

Asynchronous messages or events (sent on a batched queue)*

Main thread

Native module thread

* Will likely change soon to be synchronous :)

When calling a native method from JS

messages and arguments

from native to js

Arguments sent internally as JSON

Module id, method id and arguments queued

All useful types are supported 💪

Number, String, Function, Array, Object, even Promises

write a

how to

native module

start by coding in your app

Go read facebook.github.io/react-native/docs/native-modules-ios.html

Open XCode

Add an Objective-C file

Write your methods

Expose them with RCT_EXPORT_METHOD and RCT_EXPORT_MODULE

import { NativeModules } from 'react-native';
var MyModule = NativeModules.CalendarManager;
CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey');

Relaunch to recompile your app 🚀

iOS

Expose methods with @ReactMethod

Go read https://facebook.github.io/react-native/docs/native-modules-android.html

Open Android Studio

Add a ReactPackage

Add a ReactContextBaseJavaModule

import { NativeModules } from 'react-native';
var MyModule = NativeModules.CalendarManager;
CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey');

Relaunch to recompile your app 🚀

Android

create a module

Bootstrap an empty native module

Set up a blank React Native app

Use `file:../` in your example app to have your test bed app use the module that is in the parent directory.

npm publish

PROTIP

bootstrapping a module

https://github.com/bamlab/generator-module-react-native

https://github.com/frostney/react-native-create-library

https://github.com/peggyrayzis/react-native-create-bridge

Kotlin & Swift support!

doing native? use native tooling too!

Console output

NSLog(@"Yup, I'm working");
System.out.printLn("Howdy");

Good way to warn about missing/bad configurations:

native debuggers

View inspectors

View inspectors

Bridge profiler

https://github.com/jondot/rn-snoopy

MessageQueue.spy

Memory profiler

things that

hurt

💔

handling exceptions

😅

too much data over the bridge

rn-snoopy is a good way to check if that's the case or why

"congestion" on the bridge

data too big over the bridge

Don't send files over the bridge 😜

Keep working with filepaths

Write large chunks of data (processed images, large computation results...) in cache if needed

breaking changes

Follow semver

Changes in the native code of React Native (headers, interfaces...) may force you to only support latest versions

Upgrade the major version when a breaking change in the interface is done

Tools like commitizen can help

stay up-to-date with rn

quick look

FUTURE

in the

of React native

and the bridge

Reworking the Architecture

We're working on a large-scale rearchitecture of React Native to make the framework more flexible and integrate better with native infrastructure in hybrid JavaScript/native apps

(emphasis mine)

https://facebook.github.io/react-native/blog/2018/06/14/state-of-react-native-2018

updating the threading model

it will be possible to call synchronously into JavaScript on any thread for high-priority updates while still keeping low-priority work off the main thread to maintain responsiveness

(emphasis mine)

https://facebook.github.io/react-native/blog/2018/06/14/state-of-react-native-2018

incorporating async rendering

allow multiple rendering priorities and to simplify asynchronous data handling

https://facebook.github.io/react-native/blog/2018/06/14/state-of-react-native-2018

https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html

Time slicing and React "Suspense":

a leaner bridge

[...] simplifying our bridge to make it faster and more lightweight; direct calls between native and JavaScript are more efficient

https://facebook.github.io/react-native/blog/2018/06/14/state-of-react-native-2018

thank you!

:   

)   

@florianrival

4ian

Bridges to React Native (2018)

By Florian Rival

Made with Slides.com

Bridges to React Native (2018)

Talk at React Native London meetup

  • 1,956

More from Florian Rival