React Native - GitHub PagesReact Native Proprietary platforms Installed binaries Compile cycles Platform-speciﬁc team Native Open standards Instant distribution Fast iteration Uniﬁed

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


Open standards


Fast iteration

Unified team



Open standards


Fast iteration

Unified team



Open standards


Fast iteration

Unified team


React Native

Native

Open standards


Fast iteration

Unified team


React Native

Proprietary platforms

Installed binaries

Compile cycles

Platform-specific team

Native

Open standards


Fast iteration

Unified team


React Native


Installed binaries

Compile cycles


Native

Open standards


Fast iteration

Unified team


React Native


Installed binaries

Compile cycles


Native

Open standards


Fast iteration

Unified team


React Native


Installed binaries

Compile cycles


– 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







– 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 … ?

https://github.com/ranatchai/react-native-bkk-example

Slide № 24

AndroidiOS



Slide № 25

AndroidiOS



Slide № 26

AndroidiOS



Slide № 27

AndroidiOS



Slide № 28

Thing We Learn

- Result in Android and iOS is Different



Slide № 29

Code Overviewhttps://github.com/ranatchai/react-native-bkk-example


Slide № 30

Project Structure

Slide № 31

Slide № 32

Slide № 33

AndroidiOS



Slide № 34

AndroidiOS



Slide № 35

AndroidiOS



Slide № 36

AndroidiOS



Slide № 37

Slide № 38

AndroidiOS



Slide № 39

AndroidiOS



Slide № 40

AndroidiOS



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



Slide № 42

Code Overview (2)https://github.com/ranatchai/react-native-bkk-example


Slide № 43

AndroidiOS



Slide № 44

AndroidiOS



Slide № 45

AndroidiOS



Slide № 46

Bootstrap in React-Native

nativebase.io

http://nativebase.io

Slide № 47NativeBase Theme

nativebase.io


Slide № 48NativeBase Theme

nativebase.io


Slide № 49E-Commerce Theme

nativebase.io


Slide № 50Themeforest for ReactNative

Slide № 51

Development Processhttps://github.com/ranatchai/react-native-bkk-example


Slide № 52

$ react-native start

Run Packager

Slide № 53


Run Packager

Slide № 54


Run Packager

Run iOS

$ react-native run-ios

Slide № 55


Run Packager

Run iOS

$ react-native run-ios

Slide № 56


Run Packager

Run Android Emulator

$ android avd

Slide № 57

Run Android

$ react-native avd

Slide № 58


Slide № 59


Run Android

$ react-native run-android

Slide № 60


Run Android$ react-native run-android

Slide № 61

CMD + DOpen Dev tools iOS



Slide № 62

CMD + MOpen Dev tools Android



Slide № 63

Hot reload and Live reload

Slide № 64

Enable Live Reload



Slide № 65

Live Reload Demo


https://youtu.be/urbcszfA7yU


Slide № 66

Enable Hot Reload



Slide № 67

Hot Reload Demo


https://youtu.be/bfKyoBcu8b0


Slide № 68

Enable Remote Debugging



Slide № 69

Debugger: Chrome Dev Tools



Slide № 70

React Native Debugger

https://github.com/jhen0409/react-native-debugger


Slide № 71




Slide № 72




Slide № 73

Thing We Learn

- Dev Process very fast with hot reload - Easy Debugging Code with Chrome Dev Tools



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

https://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 № 79

How to Find Componenthttps://js.coach

https://js.coach

Slide № 80

Next Generation IDE for building React Native

https://decosoftware.com

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

https://github.com/necolas/react-native-web

https://github.com/ptmt/react-native-macos

https://github.com/CanonicalLtd/react-native

Slide № 82

Old

Slide № 83

AndroidiOS



Slide № 84

AndroidiOS



Slide № 85

AndroidiOS



Slide № 86

AndroidiOS



Slide № 87

AndroidiOS



Slide № 88

Slide № 89

AndroidiOS



Slide № 90

AndroidiOS



Slide № 91

AndroidiOS



Slide № 92

AndroidiOS



Slide № 93

AndroidiOS



Slide № 94

AndroidiOS



Slide № 95

AndroidiOS



Slide № 96

AndroidiOS



Slide № 97

AndroidiOS



Slide № 98

AndroidiOS



Slide № 99

AndroidiOS



Slide № 100

AndroidiOS



Slide № 101

AndroidiOS



Slide № 102

AndroidiOS



Slide № 103

AndroidiOS



React Native - GitHub PagesReact Native Proprietary platforms Installed binaries Compile cycles Platform-speciﬁc team Native Open standards Instant distribution Fast iteration Uniﬁed

Documents