Sharing code between React and React Native at Eaze

1. Sharing code between React and React Native
March 2018

2. What is Eaze?
Eaze is a technology platform helps our cannabis industry partners
build sustainable cannabis businesses. The platform connects
consumers with cannabis brands through dispensaries and their
drivers to order marijuana on demand. Our platform helps cannabis
businesses comply with regulations, manage inventory, and safely
deliver products to customers.

3. React Native

4. Driver app

7. • Can Eaze even get into the app store?
• Iterate quickly
• Share resources (people!) with front
end
• Share code with web
Decision to use React Native

8. Before I joined
• No employed app developers
• One iOS contractor
• One very part-time Android contractor
• Sizable front-end team on React JS
Decision to use React Native

9. I joined Eaze
• No employed app developers
• One iOS contractor
• One very part-time Android contractor
• Sizable front-end team on React JS
• One full time Android developer - ME!
Decision to use React Native

10. I joined Eaze
• No employed app developers
• One iOS contractor
• One very part-time Android contractor
• Sizable front-end team on React JS
• One full time Android developer - ME!
Decision to use React Native
• Consumer app V1
• Driver app legacy code

11. I joined Eaze
• No employed app developers
• One iOS contractor
• One very part-time Android contractor
• Sizable front-end team on React JS
• One full time Android developer - ME!
Decision to use React Native
• Consumer app V1
• Driver app legacy code
• Driver app V2!

12. I joined Eaze
• No employed app developers
• One iOS contractor
• One very part-time Android contractor
• Sizable front-end team on React JS
• One full time Android developer - ME!
• One full time iOS developer
Decision to use React Native
• Consumer app V1
• Driver app legacy code
• Driver app V2!
• Consumer app V2 (native navigator,
code rearchitecture)

13. Two full-time Android developers
Two full-time iOS developers

14. Moved to native Kotlin app for Android
• Now have the resources to support it
(not just me)
• Better performance
• Native design patterns
• Material UI and transitions
• Better support and more standard
libraries
• Fully native navigation
• Better velocity of development
• Improved performance

15. Why share code?
• Velocity
• Parity

16. Velocity: write code once
• Often fewer short-term gains due to
overhead in writing glue code
• Have to rearchitect existing JS code
• Possibly long-term gains
• Tooling is difficult (CI, unit tests, etc)

17. Parity
• Holy grail: Repo shared among
web, iOS, and Android
• Will always have velocity tradeoffs
(i.e. writing calculation code in
selectors that is redux-agnostic)

18. Real world example: Order ETA
calculation

19. App
Well, this is embarrassing.
Mobile web

20. • Poll endpoint for timestamp
• Add range padding for order position
in queue
• Determine status:
Selector logic

21. React JS to React Native is
straightforward: just create an NPM
module.

22. Sharing code
with native
Android app
• Modularize shared code
• Set up Android app for RN
• Android to JS communication
• JS to Android communication

23. “React Native bridge is
asynchronous, so the only way to
pass a result to JavaScript is by
using callbacks or emitting events”
https://facebook.github.io/react-native/docs/native-modules-android.html

24. Implementation: pub/sub model

25. 1. Serialize data
2. Emit event
Android to JS

26. Serializing data
Native object
(Java/Kotlin)JSON
WritableMap???

27. BundleJSONConverter

28. Less-than-ideal Android to JS
serialization 😬
Perfect world: POJO to WriteableMap
serialization

29. Putting the “pub” in pub/sub

30. Receiving the event in the Javascript
layer

31. Standard boilerplate for arranging
JS files in Android project:
https://facebook.github.io/react-
native/docs/integration-with-
existing-apps.html

32. Summary:
• index.js and package.json at root
• /android subdirectory
• Add React Native host to Android
Activity

33. Does not allow communication
between the two!
• Refer to “Native Modules”
documentation
• Add code to treat main application
as a native module

34. Calling native method from JS:
@ReactMethod method annotation in
module file

35. Communicating from module file to rest
of the Android app
• BroadcastReceiver
• Message bus
• RxJava/RxAndroid

36. React Native at Eaze
• Lots of React JS resources
• Few mobile resources
Fail fast
Why share code with native?
• Velocity
• Parity
Native to JS
• Serializing objects
• Emitting event
• Subscribing in JS layer
JS to Native
• Native app also needs module
bindings
• @ReactMethod annotation
Conclusion

37. Erica Cooksey
erica@eaze.com
EricaCooksey