Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native in a native world

20cd0627a5c82f8b3e4f30a04745f0cf?s=47 Neil Kimmett
February 20, 2019

React Native in a native world

20cd0627a5c82f8b3e4f30a04745f0cf?s=128

Neil Kimmett

February 20, 2019
Tweet

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
  79. None
  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

  124. 59

  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
  138. 64

  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