Talk describing if you should integrate React Native into an existing native application. The talk includes a sample app with an example of architecture. https://github.com/hgale/BrownFieldExample

1. Harry Tormey + 7.13.2018 + Chain React
Strategies for Using React
Native in a Brownfield App

2. Agenda
1.0 Background
2.0 Should I do this?
3.0 How do I do this?

3. Background
1.0

4. What is a Greenfield App?
1.1

5. A Greenfield app is an app created
from scratch using React Native.
1.2

6. What is a Brownfield App?
1.3

7. A Brownfield app uses React Native
to power one or more views or user
flows within an existing native
application.
1.4

8. Should I do this?
2.0

9. What is the point of React Native?
2.1

10. Do more with less.
2.2

11. React Native Pros:
+ One Engineer for Web & Mobile
+ Allows you to make cross platform apps
+ Faster development cycle, no waiting to
compile
2.3

12. In theory, React Native allows your frontend
engineers to be ~2-3x as productive.
2.4

13. Why is Brownfield harder than Greenfield?
2.5

14. Things to know Greenfield:
+ Javascript
+ How React works
+ How to use React Native
2.6

15. Things to know Brownfield:
+ Javascript
+ How React works
+ How to use React Native
2.7

16. Things to know Brownfield:
+ At least one native language
+ How that native platform’s APIs work
+ The platform’s ecosystem / toolchain
+ How the existing native codebase is architected
2.8

17. Why is Brownfield harder
than Greenfield?
+ Takes 1-3 months to learn a new platform
+ You potentially have 2 new platforms to learn
+ Any existing code base takes time to learn
+ You potentially have 2 new code bases to learn
2.9

18. Initially, a Brownfield integration is probably going
to be at least 2-3x as hard as a Greenfield app.
2.10

19. In other words, a Brownfield integration potentially
nullifies many of the advantages of React Native.
2.11

20. So why do a Brownfield integration?
2.12

21. One way to look at tools like React Native is via
Return on Investment (ROI).
2.13

22. To a software engineer, the investment is the time it
takes to learn the tool you plan on using.
2.14

23. The return: what the tool enables you to
do.
2.15

24. A positive ROI should—in the long run—either save time or
increase the pace of development.
2.16

25. For an individual, using React Native in an existing native
app is probably a bad investment.
2.17

26. So who would a Brownfield
integration be a good investment for?
2.18

27. Organizations
2.19

28. As the number of engineers working on any app grows, an investment
in infrastructure is usually required to maintain the pace of development.
2.20

29. Examples of infrastructure
investments:
+ Optimizing build times
+ Continuous integration
+ Linters
+ Using GraphQL or a different data store
2.21

30. React Native is just another piece of infrastructure.
2.22

31. Which Organizations should try a
Brownfield integration?
2.23

32. Using React Native in a Brownfield app is probably best
suited for larger organizations.
2.24

33. Ideally, organizations that have multiple teams
working on the same app for multiple platforms.
2.25

34. Ideally, an organization that already has a web team
that uses React.
2.26

35. React Native—in theory—can help the organizations I just
described be more efficient.
2.27

36. The cost of learning can be parallelized by having
multiple people work on the project at once.
2.28

37. Adopting any new piece of infrastructure can result in failure
if you chose the wrong project.
2.29

38. It’s important to choose the right project
2.30

39. So, how do you pick the right
project for a Brownfield integration?
2.31

40. Expo Blog: Should we use React Native?
2.33
https://blog.expo.io/should-we-use-react-native-1465d8b607ac

41. “If you’re thinking of using React
Native for a few things like a
settings screen, an FAQ, or
something like an About page —
the kind of things where you would
often just stick in a WebView —
you’re likely to have good luck”
2.34
Charlie Cheever,
Co-Founder, Expo

42. “There are people who identify themselves
strongly as iOS or Android programmers &
have a really hard time being happy with
React Native. iOS programmers in
particular are very unhappy with it and
generally regard JS as an infestation of
the company’s codebase”
2.35
Charlie Cheever,
Co-Founder, Expo

43. UIKonf 2017 An iOS Developer’s take on React Native:
2.36
https://www.youtube.com/watch?v=cZ4zQWgajBg&t=232s

44. “Even if you’re using React
Native for things that it’s good at
and having success, it can still be
hard for large-scale native and
React Native development to
coexist in the same organization
for non-technical reasons.”
2.37
Charlie Cheever,
Co-Founder, Expo

45. If you want infrastructure to be widely adopted
its important to build trust in both you and the
infrastructure.
2.38

46. Start small and build momentum on your
successes.
2.39

47. Ideally, your first Brownfield project should be something
simple and quantifiable.
2.39

48. How Do I Do This?
3.0

49. Case Study
+ Example based on integration done for one
of my clients, KeepSafe
+ Use React Native to power A/B tested
subscription up-sell screen
+ Use code push to ship new experiments
without submitting a new app to the app
store 3.1

50. 3.2
Brownfield Example
https://github.com/hgale/BrownFieldExample
Source code:

51. + Display a particular up-sell experiment when a
user does something in the native app
+ Get a list of available experiment screens at
runtime
3.3
What does the example need to do?

52. What parts of this demo are
React Native?
3.4

53. 3.5

54. + Need a way to Send and Receive events
between React Native and Native
+ Need a way to pass data in and out of React
Native
3.6
What does the integration need to do?

55. How do we do this?
3.7

56. Built with: react-native-event-bridge
3.8
https://github.com/maicki/react-native-event-bridge

57. react-native-event-bridge developed by:
3.9
Michael Scheider,
@maicki
Thorbin Primke,
@tprimke
Pinterest
@PinterestEng

58. What happens when I click
purchase?
3.10

59. + React Native emits an event in Javascript with
an SKU
+ Events are strings defined in both Javascript and
Native
+ Native code has event handlers that hook into
the existing payment system (ApplePay, etc) 3.11
What happens when I click purchase?

60. 3.12
Example

61. + ListScreens, sends all screens from React
Native when app starts
+ DismissScreen, tells the native nav screen to
dismiss the React Native screen
+ PurchaseItem, tells native purchase system to
make a purchase with SKU 3.11
What events are being emitted?

62. 3.13

63. What does a purchase event
look like in Javascript?
3.14

64. 3.15
const.js

65. 3.16
UpsellScreenOne.js

66. JavaScript code that emits the event:
3.17

67. What does a purchase event
look like in Native?
3.18

68. 3.19
ReactNativeConstants.swift

69. 3.20
ReactNativeViewController.swift

70. Native code that handles the event:
3.21

71. What does all of this look like in
Javascript?
3.22

72. 3.23
React Native

73. 3.24
index.js

74. 3.25
const.js

75. 3.26
Const.js

76. 3.27
UpsellScreen.js

77. 3.28
Every screen has a config.js

78. + ReactNativeViewController.swift hosts React Native in
native code, starts with props based on config.js
+ index.js calls getScreen with passed in props, which
contain screen to display
+ Native code has event handlers that hook into the
existing native systems that handle ApplePay, nav, etc)3.29
What happens when React Native
displays a screen?

79. What does this all look like in
Native Code?
3.30

80. 3.31
Native

81. 3.32
AppDelegateSwift

82. 3.33
ReactNativeViewController.swift

83. 3.34
HTReactNative.h

84. 3.35
HTReactNativeHostController

85. 3.36
ReactNativeConstants.swift

86. 3.37
ReactNativeScreenManager.swift

87. How do I apply this process?
3.38

93. Further Reading
3.44

94. Artsy have an excellent series of posts on Brownfield
integration:
3.45
http://artsy.github.io/series/react-native-at-artsy/
https://github.com/artsy/emission
Artsy open sourced a collection of React Native
Components which they use in their app:

95. 3.46
@orta
Orta Therox,
Artsy

96. Supporting React Native at Pinterest by Vivian Qu:
3.47
https://medium.com/@Pinterest_Engineering/supporting-react-native-at-
pinterest-f8c2233f90e6
Leverage Your Android Knowledge To Boost Your Team’s Velocity With React
Native.
Presentation by Thorben Primke (Pinterest) at Droidcon
Berlin:

97. 3.48
@tprimke
Michael Scheider,
Pinterest
Thorben Primke,
Pinterest
@maicki

98. @htormey
React Native & Native mobile
consultant
Harry Tormey
harry.n.gale@gmail.com
launchdrawer.com

99. Thorben Primke,
Pinterest
Rob Phillips,
Consultant
Michael Scheider,
Pinterest
Keepsafe Infinite Red
Thank you!