Recommended
More Related Content
Similar to Strategies for Using React Native in a Brownfield App
Similar to Strategies for Using React Native in a Brownfield App (20)
Recently uploaded
Recently uploaded (20)
Strategies for Using React Native in a Brownfield App
- 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?
- 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
- 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
- 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
- 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
- 66. JavaScript code that emits the event: 3.17
- 67. What does a purchase event look like in Native? 3.18
- 70. Native code that handles the event: 3.21
- 71. What does all of this look like in Javascript? 3.22
- 73. 3.24 index.js
- 74. 3.25 const.js
- 75. 3.26 Const.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
- 87. How do I apply this process? 3.38
- 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:
- 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:
- 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!