Thijs Suijten - React Native - Buy One Get One Free

Transcript

2. NO EXCUSES, SWITCH TO KOTLIN Thijs Suijten Mobile developer @ Q42 @tsuijten ! "
3. D.R.Y.
5. What is React Native?
6. import React from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.text}>Hello Tweakers!</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, text: { fontSize: 30, } }); Build native apps with React & JS
7. React Native is not perfect... # Young technology (0.55) $ Future proof? % Less performance & Native feel?
9. Setup & Lessons learned
10. Navigation
11. Native Navigation React Native React Native
12. Native Navigation // Native Kotlin code override fun receivedEvent(event: Event) { when (event.id) { "next" -> startActivity(...) } } React Native Bridge // JS code <Button onPress={() => this.sendEvent('next')} title='Verder'/>
14. ' Performance issues
15. Don’t render when invisible viewWillAppear viewWillDisappear onPause onResume shouldComponentUpdate
16. REST API
17. React Native <Image/> FastImage
18. Shadows on Android
19. Upgrading...
20. sed -i '' 's/#import <RCTAnimation\\/RCTValueAnimatedNode.h>/ #import \"RCTValueAnimatedNode.h\"/' ./node_modules/react-native/ Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h sed -i '' 's/#import <fishhook\\/fishhook.h>/#import <React\\/ fishhook.h>/' ./node_modules/react-native/Libraries/WebSocket/ RCTReconnectingWebSocket.m (
21. Benefits of React Native
22. Native React Native
23. Full stack code sharing
24. Flexbox layout works great
25. Hot code reloading
26. ❤
27. Android app in 1 week!!
28. React Native: Thing to consider • Multidisciplinary team • Android first • Everybody is onboard and willing to make concessions
29. React Native: Buy one, get one free?!
30. .. thijs@q42.nl / @tsuijten Thanks!