React Native
GAME-CHANGER FOR MOBILE DEVELOPMENT
React Bangkok 1.0.0
August 27, 2016
PanJ
PANJAMAPONG SERMSAWATSRI
CTO at TakeMeTour
Full-stack developer
9 years on web development
DevOps beginner
Chern
RANATCHAI CHERNBAMRUNG
CTO at NextCover
Full-stack developer
Main stream Front-end
DevOps beginner
History of JavaScript
NodeJS
JavaScript
1997 2009
PhoneG
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
React Native
Native React Native
Proprietary platforms Open standards
Installed binaries Instant distribution
Compile cycles Fast iteration
Platform-specific team Unified team
Nick Schrock at ReactJS Conf 2016
Native React Native
Proprietary platforms Open standards
Installed binaries Instant distribution
Compile cycles Fast iteration
Platform-specific team Unified team
Nick Schrock at ReactJS Conf 2016
Native React Native
Proprietary platforms Open standards
Installed binaries Instant distribution
Compile cycles Fast iteration
Platform-specific team Unified team
Nick Schrock at ReactJS Conf 2016
Native React Native
Proprietary platforms Open standards
Installed binaries Instant distribution
Compile cycles Fast iteration
Platform-specific team Unified team
Nick Schrock at ReactJS Conf 2016
“Using React is a Business Decision,
Not a Technology Choice”
– Eric Baer
React
DOM <div>
<img src=“/logo.png” />
</div>
React Native
Native Component
<View>
<Image source={require(‘logo.png’)} />
</View>
React Native
vs
Ionic/Cordova
React Native Ionic/Cordova
Hot Reloading ✓ ✗
Code Push ✓ ✓
View Engine Native Components WebView
Memory Usage Moderate High
React Native
vs
Native
React Native Native
Code Sharing ✓ ✗
React Native Native
Code Sharing ✓ ✗
Code Sharing ✓ ✗
Code Sharing ✓ ✗
Code Sharing ✓ ✗
Code Sharing ✓ ✗
Code Sharing ✓ ✗
“JavaScript will be the next universal
language after English”
– Mark Zuckerberg
didn’t said
Let’s get hands-on!
WORKSHOP TIME!
React Native In Touch
https://github.com/ranatchai/react-native-bkk-example
- Different Between iOS and Android
- Code Overview, Styling Component
- Dev Process
- It Great but … ?
Slide № 23
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 24
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 25
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 26
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 27
Thing We Learn
- Result in Android and iOS is Different
https://github.com/ranatchai/react-native-bkk-example
Slide № 28
Code Overview
https://github.com/ranatchai/react-native-bkk-example
Slide № 29
Project Structure
Slide № 30
Slide № 31
Slide № 32
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 33
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 34
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 35
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 36
Slide № 37
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 38
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 39
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 40
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 № 41
Code Overview (2)
https://github.com/ranatchai/react-native-bkk-example
Slide № 42
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 43
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 44
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 45
nativebase.io
Bootstrap in React-Native
Slide № 46
nativebase.io
NativeBase Theme Slide № 47
nativebase.io
NativeBase Theme Slide № 48
nativebase.io
E-Commerce Theme Slide № 49
Themeforest for ReactNative
Slide № 50
Development Process
https://github.com/ranatchai/react-native-bkk-example
Slide № 51
Run Packager
$ react-native start
Slide № 52
Run Packager
$ react-native start
Slide № 53
Run Packager
$ react-native start
$ react-native run-ios
Run iOS
Slide № 54
Run Packager
$ react-native start
$ react-native run-ios
Run iOS
Slide № 55
Run Packager
$ react-native start
$ android avd
Run Android Emulator
Slide № 56
$ react-native avd
Run Android
Slide № 57
$ react-native start
Slide № 58
$ react-native start
$ react-native run-android
Run Android
Slide № 59
$ react-native start
$ react-native run-android
Run Android
Slide № 60
Open Dev tools iOS
CMD + D
https://github.com/ranatchai/react-native-bkk-example Slide № 61
Open Dev tools Android
CMD + M
https://github.com/ranatchai/react-native-bkk-example Slide № 62
Hot reload and Live reload
Slide № 63
Enable Live Reload
https://github.com/ranatchai/react-native-bkk-example Slide № 64
Live Reload Demo
https://youtu.be/urbcszfA7yU
https://github.com/ranatchai/react-native-bkk-example Slide № 65
Enable Hot Reload
https://github.com/ranatchai/react-native-bkk-example Slide № 66
Hot Reload Demo
https://youtu.be/bfKyoBcu8b0
https://github.com/ranatchai/react-native-bkk-example Slide № 67
Enable Remote Debugging
https://github.com/ranatchai/react-native-bkk-example Slide № 68
Debugger: Chrome Dev Tools
https://github.com/ranatchai/react-native-bkk-example Slide № 69
React Native Debugger
https://github.com/jhen0409/react-native-debugger 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
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 № 73
Everyting is Great but…
- Can we use React Native with Redux ?
- Testing framework ?
- Offline Storage ?
- Instant App Update ? (Code Push)
- CI & CD ?
Slide № 74
Study from Full Stack Boilerplate
https://github.com/futurice/pepperoni-app-kit
Slide № 75
Who are using React Native?
Facebook Facebook Ads Facebook
Manager Groups
Gyroscope QQ Discord
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
Tip & Trick
https://github.com/ranatchai/react-native-bkk-example
Slide № 78
How to Find Component
https://js.coach
Slide № 79
Next Generation IDE
for building React Native
https://decosoftware.com
Slide № 80
React Native for Web & Desktop App
Web
https://github.com/necolas/
react-native-web
Mac
https://github.com/ptmt/
react-native-macos
Ubuntu
https://github.com/
CanonicalLtd/react-native
Slide № 81
Old
Slide № 82
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 83
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 84
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 85
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 86
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 87
Slide № 88
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 89
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 90
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 91
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 92
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 93
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 94
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 95
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 96
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 97
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 98
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 99
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 100
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 101
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 102
Android
iOS
https://github.com/ranatchai/react-native-bkk-example Slide № 103
