React Native in a native world

Transcript

1. React Native in a native world Neil Kimmett Feb 20, 2019 @ DeveloperWeek
2. React Native in a native world Neil Kimmett Feb 20, 2019 @ DeveloperWeek
3. 3 @neilkimmett hello " from London mobile dev for 10 years
4. 4 ClassPass is the world’s leading marketplace for studio fitness, gym and wellness
5. 4 ClassPass is the world’s leading marketplace for studio fitness, gym and wellness
6. 4 ClassPass is the world’s leading marketplace for studio fitness, gym and wellness
7. 4 ClassPass is the world’s leading marketplace for studio fitness, gym and wellness
8. What is React Native?
9. How do we use React Native at ClassPass?
10. Should you use React Native in your app?
11. What is React Native?
12. What is React Native?
13. 10 React declarative component-based UI library is a
14. 11 React is declarative
15. 11 React is declarative Describe what you want, not how to create it
16. 12 React is declarative
17. 12 React is declarative View = (State) f
18. 13 React is declarative State “name” [ 1 , 2 , 3 ] ✓
19. 13 React is declarative State f “name” [ 1 , 2 , 3 ] ✓
20. 13 React is declarative State f “name” [ 1 , 2 , 3 ] ✓ View
21. 14 React is not imperative
22. 14 React is not imperative View
23. 14 React is not imperative View [ 1 , 2 , 3 ]
24. 14 React is not imperative f View [ 1 , 2 , 3 ]
25. 14 React is not imperative f View [ 1 , 2 , 3 ] f
26. 14 React is not imperative f “name” View [ 1 , 2 , 3 ] f
27. 14 React is not imperative f “name” View [ 1 , 2 , 3 ] f State ✓
28. 14 React is not imperative f “name” ✗ View [ 1 , 2 , 3 ] f State ✓
29. 15 React is declarative State f “name” [ 1 , 2 , 3 ] ✓ View
30. 16 React is component based App Profile Image Text … …
31. 17 React is component based
32. 17 React is component based <Image uri={this.state.image} /> <Text> {this.state.name} </Text>
33. render() { return ( <Image uri={this.state.image} /> <Text> {this.state.name} </Text> ) } 18 React is component based
34. class Profile extends Component { render() { return ( <Image uri={this.state.image} /> <Text> {this.state.name} </Text> ) } } 19 React is component based
35. 20 React declarative component-based UI library is a
36. What is React Native?
37. 22 React Native JavaScript framework for writing native mobile apps using React is a
38. 23 Why
 React Native?
39. 24 Why React Native? Cross-platform You probably have web developers on your team, writing your native app in JavaScript means they can contribute. Create two mobile apps from one codebase. Hot reloading reduces length of iteration cycles because you don’t have to wait for compilation. Better developer experience JavaScript
40. 25 A React Native app
 is a real mobile app
41. 26 React Native rendering Profile Image Text
42. 26 React Native rendering Profile Image Text iOS UIImageView UILabel
43. 26 React Native rendering Profile Image Text iOS UIImageView UILabel ImageView TextView Android
44. React Native rendering
45. React Native rendering iOS Android
46. How do we use React Native at ClassPass?
47. 29 Mobile at ClassPass
48. 29 Mobile at ClassPass - iOS app started in 2014
49. 29 Mobile at ClassPass - iOS app started in 2014 - Android app started in 2015
50. 29 Mobile at ClassPass - iOS app started in 2014 - Android app started in 2015 - React Native introduced in 2017
51. 29 Mobile at ClassPass - iOS app started in 2014 - Android app started in 2015 - React Native introduced in 2017 - around 15 mobile developers
52. 30 monorepo classpass-mobile android ios react-native
53. 31 monorepo 7% 15% 29% 13% 36% Java Kotlin Swift Objective-C JavaScript Scripts
54. React Native at ClassPass 32 1 Venue detail 2 Sign up flow 3 Schedule list
55. React Native at ClassPass 33 1 Venue detail 2 Sign up flow 3 Schedule list
56. React Native at ClassPass 34 1 Venue detail 2 Sign up flow 3 Schedule list
57. React Native at ClassPass 35 1 Venue detail 2 Sign up flow 3 Schedule list
58. Venue detail
59. Venue detail
60. Venue detail - long, heterogenous content - limited interactivity - existing Objective-C implementation
61. Venue detail existing iOS container
62. Venue detail existing iOS container existing iOS view
63. Venue detail existing iOS container existing iOS view new React Native view
64. Venue detail existing iOS container existing iOS view new React Native view switched using server side feature flag
65. Venue detail existing iOS container new React Native view switched using server side feature flag
66. Venue detail existing iOS container existing iOS view new React Native view switched using server side feature flag
67. class VenueDetailViewController { init(venue: Venue) var view: UIView { if featureFlags.reactNativeVenueDetail { return reactNativeView } else { return legacyView } } 38
68. Venue detail
69. Venue detail VenueDetailViewController reviewsTapped
70. Venue detail VenueDetailViewController reviewsTapped RNVenueBridgeModule reviewsTapped
71. VenueDetailViewController reviewsTapped RNVenueBridgeModule reviewsTapped <VenueDetail /> onPressIn
72. VenueDetailViewController reviewsTapped RNVenueBridgeModule reviewsTapped <VenueDetail /> onPressIn { 'fn':… }
73. VenueDetailViewController reviewsTapped RNVenueBridgeModule reviewsTapped <VenueDetail /> onPressIn { 'fn':… }
74. VenueDetailViewController reviewsTapped RNVenueBridgeModule reviewsTapped <VenueDetail /> onPressIn { 'fn':… }
75. VenueDetailViewController reviewsTapped RNVenueBridgeModule reviewsTapped <VenueDetail /> onPressIn
76. let vc = VenueDetailViewController(venue: …) present(vc) 42 Encapsulated and isolated
77. React Native at ClassPass 43 1 Venue detail 2 Sign up flow 3 Schedule list
78. React Native at ClassPass 44 1 Venue detail 2 Sign up flow 3 Schedule list
80. iOS Android
81. 46 Navigation in
 React Native
82. 47 https://medium.com/@pavsidhu/whats-happening-with-navigation-in-react-native-c193535888c3
83. 48 JavaScript Navigation
84. 48 JavaScript Navigation
85. 48 JavaScript Navigation
86. 48 JavaScript Navigation
87. 48 JavaScript Navigation
88. 48 JavaScript Navigation thin native shell navigation in JS
89. 48 JavaScript Navigation Native Navigation thin native shell navigation in JS
90. 48 JavaScript Navigation Native Navigation thin native shell navigation in JS
91. 48 JavaScript Navigation Native Navigation thin native shell navigation in JS
92. 48 JavaScript Navigation Native Navigation thin native shell navigation in JS
93. 48 JavaScript Navigation Native Navigation thin native shell navigation in JS thick native shell only content in JS
94. JavaScript Navigation 49
95. JavaScript Navigation 49 React Navigation https:/ /reactnavigation.org/
96. JavaScript Navigation 49 React Navigation https:/ /reactnavigation.org/ - reimplements iOS/Android behavior in pure JavaScript - 3rd party library but officially recommended by RN team
97. Native Navigation 50
98. Native Navigation 50 Wix React Native Navigation https:/ /github.com/wix/react-native-navigation
99. Native Navigation 50 Wix React Native Navigation https:/ /github.com/wix/react-native-navigation Airbnb Native Navigation (Beta) https:/ /github.com/airbnb/native-navigation
100. ClassPass Native Navigation 51
101. ClassPass Native Navigation 51
102. ClassPass Native Navigation 51 enum ReactRoute: String { case findCity case signUp } class ReactViewController { init(route: Route, props: [String: Any]) }
103. ClassPass Native Navigation 51 enum ReactRoute: String { case findCity case signUp } class ReactViewController { init(route: Route, props: [String: Any]) } class FindCityViewController: ReactViewController { init() { return super.init(route: .findCity) } } class SignUpViewController: ReactViewController { init(city: City) { return super.init(route: .signUp, props: [ "city_id": city.id, ] } }
104. ClassPass Native Navigation 52 render() { const routes = { 'findCity': FindCity, 'signUp': SignUp, } const Component = routes[props.route] return ( <Component ...props /> ) }
105. ClassPass Native Navigation 52 render() { const routes = { 'findCity': FindCity, 'signUp': SignUp, } const Component = routes[props.route] return ( <Component ...props /> ) }
106. Sign up flow
107. React Native at ClassPass 54 1 Venue detail 2 Sign up flow 3 Schedule list
108. React Native at ClassPass 55 1 Venue detail 2 Sign up flow 3 Schedule list
109. Schedule list
110. Schedule list
111. Schedule list
112. Schedule list
113. Schedule list
114. Schedule list
115. Schedule list
116. Schedule list
117. Should you use React Native in your app?
118. 58 React Native at Airbnb
119. 58 React Native at Airbnb
120. 58 React Native at Airbnb
121. 58 React Native at Airbnb
122. 58 React Native at Airbnb
123. 58 React Native at Airbnb
125. 59 http://artsy.github.io/blog/2018/03/17/two-years-of-react-native/
126. 59 http://artsy.github.io/blog/2018/03/17/two-years-of-react-native/ https:/ /medium.com/@Pinterest_Engineering/
127. “there were a number of technical and organizational challenges that we were unable to overcome that would have made continuing to invest in React Native a challenge” 60 Sunsetting React Native at Airbnb https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a
128. 61 Technical challenges
129. 61 Technical challenges - investing in infrastructure
130. 61 Technical challenges - investing in infrastructure - initial render time
131. 61 Technical challenges - investing in infrastructure - initial render time - asynchronous native bridge
132. 62 https://www.youtube.com/watch?v=UcqRXTriUVI
133. 63 React Native's new architecture
134. 63 React Native's new architecture - new architecture called Fabric
135. 63 React Native's new architecture - new architecture called Fabric - opt-in synchronous execution to help performance
136. 63 React Native's new architecture - new architecture called Fabric - opt-in synchronous execution to help performance - JSI: shared memory between JS and native objects
137. 63 React Native's new architecture - new architecture called Fabric - opt-in synchronous execution to help performance - JSI: shared memory between JS and native objects https:/ /github.com/react-native-community/discussions-and-proposals/issues/40
139. 65 Organizational challenges
140. 65 Organizational challenges - React Native is polarising
141. 65 Organizational challenges - React Native is polarising - React Native is still native
142. 65 Organizational challenges - React Native is polarising - React Native is still native - hiring can be a challenge
143. Should you use React Native in your app?
144. Should you use React Native in your app? - think about your inputs and outputs
145. Should you use React Native in your app? - think about your inputs and outputs - think about your team and their skills
146. Should you use React Native in your app? - think about your inputs and outputs - think about your team and their skills - regularly re-evaluate
147. Whats next?
148. 68 Thanks! @neilkimmett Speaker Hours: Thursday @ 11am Room 210