react native - github pagesreact native proprietary platforms installed binaries compile cycles...
TRANSCRIPT
PanJ
CTO at TakeMeTour
9 years on web development
Full-stack developer
DevOps beginner
PANJAMAPONG SERMSAWATSRI
ChernRANATCHAI CHERNBAMRUNG
CTO at NextCover
Main stream Front-end
Full-stack developer
DevOps beginner
What is great about Web technology
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
What is great about Web technology
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
What is great about Web technology
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
What is great about Web technology
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
Native
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
React Native
Proprietary platforms
Installed binaries
Compile cycles
Platform-specific team
Native
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
React Native
Proprietary platforms
Installed binaries
Compile cycles
Platform-specific team
Native
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
React Native
Proprietary platforms
Installed binaries
Compile cycles
Platform-specific team
Native
Open standards
Instant distribution
Fast iteration
Unified team
Nick Schrock at ReactJS Conf 2016
React Native
Proprietary platforms
Installed binaries
Compile cycles
Platform-specific team
React<div>
<img src=“/logo.png” /> </div>
React Native<View>
<Image source={require(‘logo.png’)} /> </View>
DOM
Native Component
React Native Ionic/Cordova
Hot Reloading ✓ ✗
Code Push ✓ ✓
View Engine Native Components WebView
Memory Usage Moderate High
React Native Native
Code Sharing ✓ ✗
Code Sharing ✓ ✗
Code Sharing ✓ ✗
Code Sharing ✓ ✗
Code Sharing ✓ ✗
Code Sharing ✓ ✗
Slide № 23
React Native In Touchhttps://github.com/ranatchai/react-native-bkk-example
- Different Between iOS and Android - Code Overview, Styling Component - Dev Process - It Great but … ?
Slide № 24
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 25
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 26
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 27
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 28
Thing We Learn
- Result in Android and iOS is Different
https://github.com/ranatchai/react-native-bkk-example
Slide № 29
Code Overviewhttps://github.com/ranatchai/react-native-bkk-example
Slide № 33
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 34
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 35
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 36
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 38
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 39
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 40
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 41
Thing We Learn
- Native bundle per Platform (iOS/Android) - Write code like React web but can’t use DOM - Easy Stylesheet - find Component from github
https://github.com/ranatchai/react-native-bkk-example
Slide № 42
Code Overview (2)https://github.com/ranatchai/react-native-bkk-example
Slide № 43
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 44
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 45
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 51
Development Processhttps://github.com/ranatchai/react-native-bkk-example
Slide № 61
CMD + DOpen Dev tools iOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 62
CMD + MOpen Dev tools Android
https://github.com/ranatchai/react-native-bkk-example
Slide № 64
Enable Live Reload
https://github.com/ranatchai/react-native-bkk-example
Slide № 65
Live Reload Demo
https://github.com/ranatchai/react-native-bkk-example
https://youtu.be/urbcszfA7yU
Slide № 66
Enable Hot Reload
https://github.com/ranatchai/react-native-bkk-example
Slide № 67
Hot Reload Demo
https://github.com/ranatchai/react-native-bkk-example
https://youtu.be/bfKyoBcu8b0
Slide № 68
Enable Remote Debugging
https://github.com/ranatchai/react-native-bkk-example
Slide № 69
Debugger: Chrome Dev Tools
https://github.com/ranatchai/react-native-bkk-example
Slide № 70
React Native Debugger
https://github.com/jhen0409/react-native-debugger
Slide № 71
React Native Debugger
https://github.com/jhen0409/react-native-debugger
Slide № 72
React Native Debugger
https://github.com/jhen0409/react-native-debugger
Slide № 73
Thing We Learn
- Dev Process very fast with hot reload - Easy Debugging Code with Chrome Dev Tools
https://github.com/ranatchai/react-native-bkk-example
Slide № 74
Everyting is Great but…
- Can we use React Native with Redux ? - Testing framework ? - Offline Storage ? - Instant App Update ? (Code Push) - CI & CD ?
Slide № 75
Study from Full Stack Boilerplatehttps://github.com/futurice/pepperoni-app-kit
Ready for Production?• New versions are coming very fast, some have
breaking changes • Open-sourced components are sufficient, but there
are some open issues • There are some limitations on styling components in
tricky cases, native bridge is needed • TakeMeTour was able to launch its first version in both
platforms within 2 weeks of development • An intern took the code written for iOS and made it
run *NATIVELY* on Android within 2 days
Slide № 78
Tip & Trickhttps://github.com/ranatchai/react-native-bkk-example
Slide № 80
Next Generation IDE for building React Native
https://decosoftware.com
Slide № 81
Web
https://github.com/necolas/
react-native-web
Mac
https://github.com/ptmt/
react-native-macos
Ubuntu
https://github.com/
CanonicalLtd/react-native
React Native for Web & Desktop App
Slide № 83
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 84
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 85
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 86
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 87
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 89
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 90
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 91
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 92
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 93
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 94
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 95
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 96
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 97
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 98
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 99
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 100
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 101
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 102
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example
Slide № 103
AndroidiOS
https://github.com/ranatchai/react-native-bkk-example