Easy Way to Improve ReactNative

5 easy way to improve ReactNative project

Transcript

1. Easy way to improve your ReactNative Project by @sergioutama @sergioutama
2. $ whoami Sergio Utama Just your friendly programmer @sergioutama
3. Don't Use ReactNative @sergioutama
4. The end @sergioutama
5. Just kidding ! @sergioutama
6. 1. Fix your project structure @sergioutama
7. Why — Easier to navigate and maintain — Mental image how code should be structured @sergioutama
8. How ~ components for reusable globaly ~ Split based on screen OR module ~ each screen has its component @sergioutama
9. 2. Stop using arrow function @sergioutama
10. Arrow function ( () => {}) is a necessary evil of js world. It make easy to ignore this @sergioutama
11. However, arrow function actually assigning a new value. Calling it within render() function will give significant impact on your app performance @sergioutama
12. Solution? bind early or declare it outside render() @sergioutama
13. 3. Own your component lifecycle @sergioutama
14. React gave us PureComponent and shouldComponentUpdate to use. Use it! @sergioutama
15. Understand how React lifecycle and avoid unecessary render by extending PureComponent or implementing shouldComponentUpdate. Be!er: fully utilize the whole lifecycle functions. @sergioutama
16. @sergioutama
17. 4. Component everything @sergioutama
18. Keep your component small. It's not a dick measuring contents If more than 6 elements, move it to a component @sergioutama
19. 5. It's either Component OR PureComponent @sergioutama
20. const modalClosed = ()=>{} const LoadingOverlay = (props) => { const { loading, message, ...attributes } = props; const defaultMessage = message || ''; return ( <Modal transparent animationType={'none'} visible={loading} onRequestClose={modalClosed} > <View style={styles.modalBackground}> <View style={styles.activityIndicatorWrapper}> <ActivityIndicator animating={loading} /> <Text style={styles.loadingText}>{defaultMessage}</Text> </View> </View> </Modal> ); }; @sergioutama
21. const modalClose = () => {}; export default class LoadingOverlay extends React.Component<Props> { render() { const { loading, message, style } = this.props; const defaultMessage = message || ""; return ( <Modal transparent animationType={"none"} visible={loading} onRequestClose={modalClose} > <View style={styles.modalBackground}> <View style={styles.activityIndicatorWrapper}> <ActivityIndicator animating={loading} /> <Text style={styles.loadingText}>{defaultMessage}</Text> </View> </View> </Modal> ); } } @sergioutama
22. Why Similar but not the same It makes sense on web or React to use functional stateless component It doesn't make sense on ReactNative Component make it easier to debug view hierarchy @sergioutama
23. Learn Native and its tools Not so easy way @sergioutama
24. ReactNative is not a crossplatform. It's not meant that way. — Sergio Utama @sergioutama
25. Native Concept: Navigation, Containtment, Signing, Activty vs Fragments, Permission, etc Tools: Xcode, Gradle, Fastlane @sergioutama
26. Q&A @sergioutama
27. The end? Thank you — @sergioutama @sergioutama