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