4. Ways to integrate a React Native app
into an existing mobile application
5. › Does not modify react-native
No forking necessary
› Written in JavaScript (ES6)
Runs on Node 4.5+
› Composed of 8 standalone modules
All conveniently orchestrated and accessible through a CLI
› Versioned
2 weeks release lifecycle
ELECTRODE NATIVERandom facts
6. Can range from being a minimal UI
component to a small feature application.
ELECTRODE NATIVE
Is nothing more than a
JavaScript react-native app.
Can be headless, and can be updated
through OTA updates.
A MiniApp …
A mobile application
can contain multiple MiniApps
7. Some baseline integration problems to
solve
react-native init
scaffolds an application, not a library
react-native link (formerly rnpm)
only works with the scaffolded application
Mobile developers
npm … no thanks
node_modules based structure … no thanks
9. › Just another lib
› AAR (Android) / Framework (iOS)
› Fully generated
› Versioned
› Each native app get its own container
THE
CONTAINER
Mobile developer friendly
14. IOS
CONFIG
ANDROID
CONFIG
PLATFORM AGNOSTIC
CONFIG
THE
CONTAINER
Native Dependencies Mini Apps
Version
react-native@0.42.0 MiniAppOne@1.0.0 1.0.0
react-native-code-push@1.17.1 MiniAppTwo@1.1.1
react-native-vector-icons@4.0.0 MiniAppThree@1.2.3
react-native-maps@0.14.0
Maven repository URL
http://your-maven-repo-url
GitHub repository URL
http://your-github-repo-url
Android AAR published to Maven iOS project (Framework) published to GitHub
Is generated, based on a configuration
15. Now comes the versioning hell
Only one version of any native library
can be used on the native side
MiniAppOn
e
react-native@0.42.0
react-native-code-push@.17.1
react-native-maps@0.14.0
MiniAppTw
o
react-native@0.43.0
react-native-code-push@.17.1
react-native-maps@0.14.0
16. Now comes the versioning hell
Only one version of any native library
can be used on the native side
MiniAppOn
e
react-native@0.42.0
react-native-code-push@.17.1
react-native-maps@0.14.0
MiniAppTw
o
react-native@0.43.0
react-native-code-push@.17.1
react-native-maps@0.14.0
18. › Master manifest stored in a GitHub public repository
› Can be overridden for advanced use cases
› One manifest per platform version
› MiniApps on same platform version are ”binary
compatible”
PLATFORM MANIFEST
19. But versioning hell ain’t over yet
For OTA updates we have to ensure
that we push binary compatible
bundles
20. OTA publication versioning gotchas
Mobile App V1
react-native@0.42.0
react-native-maps@0.14.0
MiniAppOne@1.0.
1
react-native@0.42.0
react-native-maps@0.14.0
MiniAppOne@1.0.
0
27. › One Cauldron per mobile application
› Easy setup – It’s just a git repo
› Store a single JSON document
THE
CAULDRON
Version management database (mostly)
29. Version
Platform
Application Walmart
Android
1.0.0 2.0.0
iOS
1.2.3
THE
CAULDRON
Most of the data is stored in the leaves
Native Dependencies Mini Apps
Version
react-native@0.42.0 MiniAppOne@1.0.0 1.0.0
react-native-code-push@1.17.1 MiniAppOne@1.1.0
react-native-vector-icons@4.0.0 MiniAppThree@1.2.3
react-native-maps@0.14.0
isReleased platformVersion
true 1
30. THE
CAULDRON
To make their way inside a native app
version, all MiniApps versions have to
be first added in the Cauldron (given
that they pass compatibility checks)
32. We need a way to easily transmit
messages, in a consistent way
between the native host application
and the mini-apps, but also between
the
mini-apps themselves
33. › Not meant to be consumed from the
native side
› Not really a uniform API
› Require quite some native plumbing
› Lack strong non primitive type support
Messaging
Anyone said Native Module ?
35. › Is a native module (Java / ObjectiveC / JS)
› Can be added to any react-native project
› Expose a cohesive cross-platform API
› Offers strong non primitive type support
› Have additional features (timeouts, UI thread
dispatching, queuing ...)
Inter app messaging
THE BRIDGE
36. THE BRIDGE
Request
Ask for something, get a response back
Event
Notify about something, no response
Response
Just a by-product of the Request message
The three fundamentals message types
37. THE BRIDGETwo fundamental message properties
EVERY MESSAGE CONTAINS
A NAME
getMovieById, getAllMovies, movieListUpdated
A PAYLOAD
primitive type, array, object
AND OPTIONALY
38. THE BRIDGE
sendRequest(Request request,
ResponseListener<Response> responseListener)
sendRequest(requestName, { data, timeout }) : Promise<*>
sendRequest:(Request*) request
withResponseListener:(id<ResponseListener>) responseListener
A uniform API - Sending requests
