React Native Brownfield: Lessons from the Trenches
summary
Practical account of embedding React Native into an existing app used by millions: a brownfield integration that powers subscription upsell screens for KeepSafe, uses react native event bridge to send dismissScreen and purchaseItem (SKU) events to native code, integrates with the app’s Apple Pay/native purchase system, and loads screen configs from a build-time JSON. Example is open sourced on GitHub, supports CodePush for JS-only updates, and proves the pattern works when native changes are avoided.
AI-written summary · about
chapters (25)
- 0:00Start
- 1:23What is a Greenfield App?
- 1:34What is a Brownfield App?
- 1:54Should I do this?
- 3:03In theory, React Native allows your frontend engineers to be -2-3x as productive
- 6:14In other words, a Brownfield integration potentially nullifies many of the advantages of React Native.
- 6:24One way to look at tools like React Native is via Return on Investment (ROI).
- 6:36To a software engineer, the investment is the time it takes to learn the tool you plan on using
- 6:47A positive ROI should in the long run-either save time of increase the pace of development.
- 7:05So who would a Brownfield integration be a good investment for?
- 7:38Which Organizations should try a Brownfield integration?
- 7:58Ideally, an organization that already has a web team that uses React
- 9:32It's important to choose the right project
- 9:42So, how do you pick the right project for a Brownfield integration?
- 11:52UlKont 2017 An iOS Developer's take on React Native
- 13:10If you want intrastructure to be widely adopted its important to build trust in both you and the
- 13:24Ideally, your first Brownfield project should be something simple and qualable
- 16:10What parts of this demo are React Native?
- 17:01How do we do this?
- 17:54React Native emits an event in Javascript with an SKU
- 20:08What does a purchase event look like in Javascript?
- 20:47What does a purchase event look like in Native?
- 21:37What does all of this look like in Javascript?
- 23:56What does this all look like in Native Code?
- 25:11How do I apply this process?
related talks
30mStrategies For Using React Native In A Brownfield App
28mReact Native in the "Brown Field"
17mBrownfield integration - exploring the limits
15mReact Native fundamentals for brownfield iOS apps
28mShould I use React Native too?
51mRapid App Development With React Native: Lessons Learned at NSB
45mReact Native: Things we learned the Hard Way
11mTrailing React Native in a Legacy Mobile App