React Native in a native world

Transcript

1. React Native in a
   native world
   Neil Kimmett
   Feb 20, 2019 @ DeveloperWeek
   

   View Slide

2. React Native in a
   native world
   Neil Kimmett
   Feb 20, 2019 @ DeveloperWeek
   

   View Slide

3. 3
   @neilkimmett
   hello
   " from London
   mobile dev for 10 years
   

   View Slide

4. 4
   ClassPass is the world’s leading marketplace for
   studio fitness, gym and wellness
   

   View Slide

5. 4
   ClassPass is the world’s leading marketplace for
   studio fitness, gym and wellness
   

   View Slide

6. 4
   ClassPass is the world’s leading marketplace for
   studio fitness, gym and wellness
   

   View Slide

7. 4
   ClassPass is the world’s leading marketplace for
   studio fitness, gym and wellness
   

   View Slide

8. What is React Native?
   

   View Slide

9. How do we use
   React Native at ClassPass?
   

   View Slide

10. Should you use React Native
    in your app?
    

    View Slide

11. What is React Native?
    

    View Slide

12. What is React Native?
    

    View Slide

13. 10
    React
    declarative
    component-based
    UI library
    is a
    

    View Slide

14. 11
    React is declarative
    

    View Slide

15. 11
    React is declarative
    Describe what you want,
    not how to create it
    

    View Slide

16. 12
    React is declarative
    

    View Slide

17. 12
    React is declarative
    View = (State)
    f
    

    View Slide

18. 13
    React is declarative
    State
    “name”
    [ 1 , 2 , 3 ]
    ✓
    

    View Slide

19. 13
    React is declarative
    State f
    “name”
    [ 1 , 2 , 3 ]
    ✓
    

    View Slide

20. 13
    React is declarative
    State f
    “name”
    [ 1 , 2 , 3 ]
    ✓
    View
    

    View Slide

21. 14
    React is not imperative
    

    View Slide

22. 14
    React is not imperative View
    

    View Slide

23. 14
    React is not imperative View
    [ 1 , 2 , 3 ]
    

    View Slide

24. 14
    React is not imperative
    f
    View
    [ 1 , 2 , 3 ]
    

    View Slide

25. 14
    React is not imperative
    f
    View
    [ 1 , 2 , 3 ]
    f
    

    View Slide

26. 14
    React is not imperative
    f
    “name”
    View
    [ 1 , 2 , 3 ]
    f
    

    View Slide

27. 14
    React is not imperative
    f
    “name”
    View
    [ 1 , 2 , 3 ]
    f
    State
    ✓
    

    View Slide

28. 14
    React is not imperative
    f
    “name”
    ✗
    View
    [ 1 , 2 , 3 ]
    f
    State
    ✓
    

    View Slide

29. 15
    React is declarative
    State f
    “name”
    [ 1 , 2 , 3 ]
    ✓
    View
    

    View Slide

30. 16
    React is component based
    App
    Profile
    Image Text
    …
    …
    

    View Slide

31. 17
    React is component based
    

    View Slide

32. 17
    React is component based
    uri={this.state.image}
    />
    
    {this.state.name}
    
    

    View Slide

33. render() {
    return (
    uri={this.state.image}
    />
    
    {this.state.name}
    
    )
    }
    18
    React is component based
    

    View Slide

34. class Profile extends Component {
    render() {
    return (
    uri={this.state.image}
    />
    
    {this.state.name}
    
    )
    }
    } 19
    React is component based
    

    View Slide

35. 20
    React
    declarative
    component-based
    UI library
    is a
    

    View Slide

36. What is React Native?
    

    View Slide

37. 22
    React Native
    JavaScript framework for
    writing native mobile
    apps using React
    is a
    

    View Slide

38. 23
    Why

    React Native?
    

    View Slide

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
    

    View Slide

40. 25
    A React Native app

    is a real mobile app
    

    View Slide

41. 26
    React Native rendering
    Profile
    Image Text
    

    View Slide

42. 26
    React Native rendering
    Profile
    Image Text
    iOS UIImageView UILabel
    

    View Slide

43. 26
    React Native rendering
    Profile
    Image Text
    iOS UIImageView UILabel
    ImageView TextView
    Android
    

    View Slide

44. React Native rendering
    

    View Slide

45. React Native rendering
    iOS Android
    

    View Slide

46. How do we use
    React Native at ClassPass?
    

    View Slide

47. 29
    Mobile at ClassPass
    

    View Slide

48. 29
    Mobile at ClassPass
    - iOS app started in 2014
    

    View Slide

49. 29
    Mobile at ClassPass
    - iOS app started in 2014
    - Android app started in 2015
    

    View Slide

50. 29
    Mobile at ClassPass
    - iOS app started in 2014
    - Android app started in 2015
    - React Native introduced in 2017
    

    View Slide

51. 29
    Mobile at ClassPass
    - iOS app started in 2014
    - Android app started in 2015
    - React Native introduced in 2017
    - around 15 mobile developers
    

    View Slide

52. 30
    monorepo
    classpass-mobile
    android
    ios
    react-native
    

    View Slide

53. 31
    monorepo
    7%
    15%
    29%
    13%
    36%
    Java Kotlin Swift Objective-C JavaScript Scripts
    

    View Slide

54. React Native at ClassPass
    32
    1
    Venue detail
    2
    Sign up flow
    3
    Schedule list
    

    View Slide

55. React Native at ClassPass
    33
    1
    Venue detail
    2
    Sign up flow
    3
    Schedule list
    

    View Slide

56. React Native at ClassPass
    34
    1
    Venue detail
    2
    Sign up flow
    3
    Schedule list
    

    View Slide

57. React Native at ClassPass
    35
    1
    Venue detail
    2
    Sign up flow
    3
    Schedule list
    

    View Slide

58. Venue detail
    

    View Slide

59. Venue detail
    

    View Slide

60. Venue detail
    - long, heterogenous content
    - limited interactivity
    - existing Objective-C implementation
    

    View Slide

61. Venue detail
    existing iOS container
    

    View Slide

62. Venue detail
    existing iOS container
    existing iOS view
    

    View Slide

63. Venue detail
    existing iOS container
    existing iOS view new React Native view
    

    View Slide

64. Venue detail
    existing iOS container
    existing iOS view new React Native view
    switched using server
    side feature flag
    

    View Slide

65. Venue detail
    existing iOS container
    new React Native view
    switched using server
    side feature flag
    

    View Slide

66. Venue detail
    existing iOS container
    existing iOS view new React Native view
    switched using server
    side feature flag
    

    View Slide

67. class VenueDetailViewController {
    init(venue: Venue)
    var view: UIView {
    if featureFlags.reactNativeVenueDetail {
    return reactNativeView
    } else {
    return legacyView
    }
    }
    38
    

    View Slide

68. Venue detail
    

    View Slide

69. Venue detail VenueDetailViewController
    reviewsTapped
    

    View Slide

70. Venue detail VenueDetailViewController
    reviewsTapped
    RNVenueBridgeModule
    reviewsTapped
    

    View Slide

71. VenueDetailViewController
    reviewsTapped
    RNVenueBridgeModule
    reviewsTapped
    
    onPressIn
    

    View Slide

72. VenueDetailViewController
    reviewsTapped
    RNVenueBridgeModule
    reviewsTapped
    
    onPressIn
    {
    'fn':…
    }
    

    View Slide

73. VenueDetailViewController
    reviewsTapped
    RNVenueBridgeModule
    reviewsTapped
    
    onPressIn
    {
    'fn':…
    }
    

    View Slide

74. VenueDetailViewController
    reviewsTapped
    RNVenueBridgeModule
    reviewsTapped
    
    onPressIn
    {
    'fn':…
    }
    

    View Slide

75. VenueDetailViewController
    reviewsTapped
    RNVenueBridgeModule
    reviewsTapped
    
    onPressIn
    

    View Slide

76. let vc = VenueDetailViewController(venue: …)
    present(vc)
    42
    Encapsulated and isolated
    

    View Slide

77. React Native at ClassPass
    43
    1
    Venue detail
    2
    Sign up flow
    3
    Schedule list
    

    View Slide

78. React Native at ClassPass
    44
    1
    Venue detail
    2
    Sign up flow
    3
    Schedule list
    

    View Slide

79. View Slide

80. iOS Android
    

    View Slide

81. 46
    Navigation in

    React Native
    

    View Slide

82. 47
    https://medium.com/@pavsidhu/whats-happening-with-navigation-in-react-native-c193535888c3
    

    View Slide

83. 48
    JavaScript Navigation
    

    View Slide

84. 48
    JavaScript Navigation
    

    View Slide

85. 48
    JavaScript Navigation
    

    View Slide

86. 48
    JavaScript Navigation
    

    View Slide

87. 48
    JavaScript Navigation
    

    View Slide

88. 48
    JavaScript Navigation
    thin native shell
    navigation in JS
    

    View Slide

89. 48
    JavaScript Navigation Native Navigation
    thin native shell
    navigation in JS
    

    View Slide

90. 48
    JavaScript Navigation Native Navigation
    thin native shell
    navigation in JS
    

    View Slide

91. 48
    JavaScript Navigation Native Navigation
    thin native shell
    navigation in JS
    

    View Slide

92. 48
    JavaScript Navigation Native Navigation
    thin native shell
    navigation in JS
    

    View Slide

93. 48
    JavaScript Navigation Native Navigation
    thin native shell
    navigation in JS
    thick native shell
    only content in JS
    

    View Slide

94. JavaScript Navigation
    49
    

    View Slide

95. JavaScript Navigation
    49
    React Navigation
    https:/
    /reactnavigation.org/
    

    View Slide

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
    

    View Slide

97. Native Navigation
    50
    

    View Slide

98. Native Navigation
    50
    Wix React Native Navigation
    https:/
    /github.com/wix/react-native-navigation
    

    View Slide

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
    

    View Slide

100. ClassPass Native Navigation
     51
     

     View Slide

101. ClassPass Native Navigation
     51
     

     View Slide

102. ClassPass Native Navigation
     51
     enum ReactRoute: String {
     case findCity
     case signUp
     }
     class ReactViewController {
     init(route: Route, props: [String: Any])
     }
     

     View Slide

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,
     ]
     }
     }
     

     View Slide

104. ClassPass Native Navigation
     52
     render() {
     const routes = {
     'findCity': FindCity,
     'signUp': SignUp,
     }
     const Component = routes[props.route]
     return (
     
     )
     }
     

     View Slide

105. ClassPass Native Navigation
     52
     render() {
     const routes = {
     'findCity': FindCity,
     'signUp': SignUp,
     }
     const Component = routes[props.route]
     return (
     
     )
     }
     

     View Slide

106. Sign up flow
     

     View Slide

107. React Native at ClassPass
     54
     1
     Venue detail
     2
     Sign up flow
     3
     Schedule list
     

     View Slide

108. React Native at ClassPass
     55
     1
     Venue detail
     2
     Sign up flow
     3
     Schedule list
     

     View Slide

109. Schedule list
     

     View Slide

110. Schedule list
     

     View Slide

111. Schedule list
     

     View Slide

112. Schedule list
     

     View Slide

113. Schedule list
     

     View Slide

114. Schedule list
     

     View Slide

115. Schedule list
     

     View Slide

116. Schedule list
     

     View Slide

117. Should you use React Native
     in your app?
     

     View Slide

118. 58
     React Native at Airbnb
     

     View Slide

119. 58
     React Native at Airbnb
     

     View Slide

120. 58
     React Native at Airbnb
     

     View Slide

121. 58
     React Native at Airbnb
     

     View Slide

122. 58
     React Native at Airbnb
     

     View Slide

123. 58
     React Native at Airbnb
     

     View Slide

124. View Slide

125. 59
     http://artsy.github.io/blog/2018/03/17/two-years-of-react-native/
     

     View Slide

126. 59
     http://artsy.github.io/blog/2018/03/17/two-years-of-react-native/
     https:/
     /medium.com/@Pinterest_Engineering/
     

     View Slide

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
     

     View Slide

128. 61
     Technical challenges
     

     View Slide

129. 61
     Technical challenges
     - investing in infrastructure
     

     View Slide

130. 61
     Technical challenges
     - investing in infrastructure
     - initial render time
     

     View Slide

131. 61
     Technical challenges
     - investing in infrastructure
     - initial render time
     - asynchronous native bridge
     

     View Slide

132. 62
     https://www.youtube.com/watch?v=UcqRXTriUVI
     

     View Slide

133. 63
     React Native's new architecture
     

     View Slide

134. 63
     React Native's new architecture
     - new architecture called Fabric
     

     View Slide

135. 63
     React Native's new architecture
     - new architecture called Fabric
     - opt-in synchronous execution to help performance
     

     View Slide

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
     

     View Slide

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
     

     View Slide

138. View Slide

139. 65
     Organizational challenges
     

     View Slide

140. 65
     Organizational challenges
     - React Native is polarising
     

     View Slide

141. 65
     Organizational challenges
     - React Native is polarising
     - React Native is still native
     

     View Slide

142. 65
     Organizational challenges
     - React Native is polarising
     - React Native is still native
     - hiring can be a challenge
     

     View Slide

143. Should you use React Native in your app?
     

     View Slide

144. Should you use React Native in your app?
     - think about your inputs and outputs
     

     View Slide

145. Should you use React Native in your app?
     - think about your inputs and outputs
     - think about your team and their skills
     

     View Slide

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
     

     View Slide

147. Whats next?
     

     View Slide

148. 68
     Thanks!
     @neilkimmett
     Speaker Hours:
     Thursday @ 11am
     Room 210
     

     View Slide