react native - reactbkk.com · nick schrock at reactjs conf 2016 react native proprietary platforms...
TRANSCRIPT
React NativeGAME-CHANGER FOR MOBILE DEVELOPMENT
React Bangkok 1.0.0August 27, 2016
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
History of JavaScript
JavaScript
1997 2009
NodeJS
PhoneGap
ES2015
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
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
– Eric Baer
“Using React is a Business Decision, Not a Technology Choice”
React<div>
<img src=“/logo.png” /> </div>
React Native<View>
<Image source={require(‘logo.png’)} /> </View>
DOM
Native Component
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 ✓ ✗
– Mark Zuckerberg
“JavaScript will be the next universal language after English”
didn’t said
Let’s get hands-on!WORKSHOP TIME!
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 № 30
Project Structure
Slide № 31
Slide № 32
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 № 37
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 № 50Themeforest for ReactNative
Slide № 51
Development Processhttps://github.com/ranatchai/react-native-bkk-example
Slide № 52
$ react-native start
Run Packager
Slide № 53
$ react-native start
Run Packager
Slide № 54
$ react-native start
Run Packager
Run iOS
$ react-native run-ios
Slide № 55
$ react-native start
Run Packager
Run iOS
$ react-native run-ios
Slide № 56
$ react-native start
Run Packager
Run Android Emulator
$ android avd
Slide № 57
Run Android
$ react-native avd
Slide № 58
$ react-native start
Slide № 59
$ react-native start
Run Android
$ react-native run-android
Slide № 60
$ react-native start
Run Android$ react-native run-android
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 № 63
Hot reload and Live reload
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
Who are using React Native?
Facebook Facebook Ads Manager
Facebook 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
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 № 82
Old
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 № 88
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