React Native: The Good, the Bad and the Ugly

We recently shipped "Bayern 2", our first react-native app for iOS and Android. For users it is a recommendation-based infinite radio stream, for us it was a big playground, using a lot of new technologies we haven't used before, like GraphQL, Flow and react-native. This talks gives an overview over the benefits and pitfalls during development, talks about code-sharing between platforms (iOS and Android as well as frontend and backend) and deploying react-native over the air.

Transcript

1. REACT-NATIVE The Good, the Bad and the Ugly Daniel Büchele
2. L D I G I T A L W Z A W M Y K N O W E R L B I H B V C O Q Y Z A L I N F S Y W F L N B P R O D U K T P A R E D V C G F D E V E L O P M E N T N H R D V L P F W V N K V G A T M B R N E X T M P B H 9 V O 8 B A Y E R I S C H E N C R U N D F U N K F G H R W
3. L D I G I T A L W Z A W M Y K N O W E R L B I H B V C O Q Y Z A L I N F S Y W F L N B P R O D U C T P A R E D V C G F D E V E L O P M E N T N H R D V L P F W V N K V G A T M B R N E X T M P B H 9 V O 8 B A Y E R I S C H E N C R U N D F U N K F G H R W
5. Frontend SRE Mobile
6. Frontend SRE Mobile
8. react-native GraphQL server redux react.js CMS apollo recommen-
 dations mongoDB OTA
 updates Material Kit
9. Why react-native?
10. Why react-native? Sharing code Single
 language Developer experience Curiosity
11. Sharing code
12. UI code Business logic Native modules
13. UI code Business logic Native modules 80% 100% 0%
14. UI code Business logic Native modules 80% 100% 0% Components Styles Assets PropTypes redux redux-persist same API
15. StyleSheet.create({ container: { flex: 1, ...Platform.select({ ios: { backgroundColor: 'white', }, android: { backgroundColor: 'black', }, }), }, }); Same component, different styles
16. <Text> {Platform.OS === 'ios' ? 'Hello iOS' : 'Hi Android'} </Text> Same component, different styles
17. MyView.js Different components
18. MyView.ios.js MyView.android.js Different components
19. MyView.ios.js MyView.android.js MyView.HOC.js all non-view related code like
 PanResponders, event handlers,…
20. MyView.HOC.js all non-view related code like
 PanResponders, event handlers,… MyView.ios.js MyView.android.js PropTypes
21. Single language
22. Sharing code between
 react-native and node.js
23. shared JS code via private node module helper functions enums/config values assets PropTypes (shared with CMS)
24. // untyped props
 this.props.onClick(); // forbidden propTypes
 propTypes: {
 playlistItems: React.PropTypes.array,
 user: React.PropTypes.object,
 data: React.PropTypes.any,
 }
25. // untyped props
 this.props.onClick(); // forbidden propTypes
 propTypes: {
 playlistItems: React.PropTypes.arrayOf(...),
 user: React.PropTypes.shape({...}),
 data: React.PropTypes.any,
 }
26. // reusing PropTypes export const ItemPropType = PropTypes.shape({
 id: PropTypes.string.isRequired,
 duration: PropTypes.number,
 url: PropTypes.string,
 title: PropTypes.string,
 similarItems: PropTypes.arrayOf(
 PropTypes.string
 ),
 });
27. shared flow types via git submodule Flow type definitions are shared among
 GraphQL-server, CMS and
 mobile applications
28. Problem: duplicate type definitions For example: We don’t have a way yet to generate Flow types from GraphQL vs.
29. vs. type Item = { id: string, image: ?string, date: ?Date, duration: ?number, title: string, } type Item { id: ID! image: String date: Date duration: Float title: String! }
30. Sharing code
31. DX
32. ⌘+R
34. Remote deployment • update JavaScript code and assets • instantly build new versions on push • rollback buggy versions • track installs/updates
35. Remote deployment
36. // install CLI globally
 yarn global add code-push-cli // install code-push client lib in project
 yarn add react-native-code-push // link native libs
 rnpm link // wrap your app with code-push HOC
 export default codePush(MyApp); // ship it
 code-push release-react MyApp ios
37. Why react-native? Sharing code Single
 language Developer experience Curiosity
38. The bad and the ugly
39. Background threads
 audio player, downloads Missing features/platform disparity
 iOS ahead of Android Breaking changes
 two week release cycle Performance problems
 animations, transitions, non standard UI
40. two week release cycle
 it get’s better every two weeks Mix native and react-native
 use react-native for certain parts Productivity apps
 text heavy apps, lists, standard UI
41. L D I G I T A L W Z A W M Y K N Q U E S T I O N S ? C O Q Y Z A L I N F S Y W F L N B P R O D U K T P Y Z A D V C G F E T H A N K S L U N G N H R D V L P F W V N K V G A W E W A R E M H I R I N G V O 8 B A Y E R I S C H E N C R U N D B R N E X T . D E
42. L D I G I T A L W Z A W M Y K N Q U E S T I O N S ? C O Q Y Z A L I N F S Y W F L N B P R O D U K T P Y Z A D V C G F E T H A N K S L U N G N H R D V L P F W V N K V G A W E W A R E M H I R I N G V O 8 B A Y E R I S C H E N C R U N D B R N E X T . D E