developing apps with react native

DEVELOPING MOBILE APPS WITH

REACT NATIVE @ A LVA R O V I E B R A N T Z / / AV I E B R A N T Z . C O M . B R

1

• IT Analyst at Sefaz-MT • Former Fullstack developer at

Procurix • Bsc. Computer Science at UFMT • Golang and React enthusiast

Cuiabá, MT, Brasil

alvarowolfx

@alvaroviebrantz

Alvaro Viebrantz

DevMT

R E A C TW H A T I S R E A C T ?

5

R E A C T

Just the V of MVC

6

Created by Facebook 2013-2016

R E A C T

7

D ATA D O M

f(data) = View

One-way Data Flow

R E A C T

8

Simple and DeclarativeJSX

R E A C T

9

JSX is a syntactic sugar

It’s just Javascript

R E A C T

Everything is a Component

10

R E A C T

Bring your own Architecture

11

R E A C T I N T E R N A L SH O W R E A C T W O R K S ?

12

R E A C T I N T E R N A L S

13

Virtual DOM

R E A C T I N T E R N A L S

14

Batch Updates Blazing Fast Diff Algorithm

R E A C T I N T E R N A L S

15

S TAT E

State vs Props Mutable vs Immutable

What you Own vs What you WonP R O P S

R E A C T I N T E R N A L S

• componentWillMount • render • componentDidMount

• shouldUpdateComponent • componentWillUpdate • render • componentDidUpdate

• componentWillUnmount

M O U N T U P D AT E U N M O U N T

16

View lifecycle

R E A C T P U S H E D T H E W E B F O R W A R D

17

Many cutting edge web technologies

R E A C T P U S H E D T H E W E B F O R W A R D

18

Modern JS

Many projects using ES6 and ES7(!!!)

R E A C T P U S H E D T H E W E B F O R W A R D

19

More Functional Programming in Javascript

Immutability

R E A C T P U S H E D T H E W E B F O R W A R D

• Awesome tooling and packaging

• Hot code reload

20

R E A C T P U S H E D T H E W E B F O R W A R D

Advanced application architectures

21

R E A C T R E P E R C U S S I O N

• More Javascript oriented

• Components as a Tree

• Simpler Lifecycle

• One way data flow

• Functional Programming

22

R E A C T N AT I V EW H A T I S R E A C T N A T I V E ?

23

I N A G I A N T S H O U L D E R ’ S

Why not apply this for mobile development ?

24

W H Y N O T N AT I V E ?

• Native is hard

• Platform specific code

• Develop, Compile, Build, Test tedious lifecycle

• Hard to find developers

• Web developers are more easy to find

• But native it’s a necessary evil

25

A LT E R N AT I V E S T O N AT I V E

26

Hybrid apps with Cordova

A LT E R N AT I V E S T O N AT I V E

27

Many plugins (!!!)Awesome frameworks

A LT E R N AT I V E S T O N AT I V E

28

S TAT E O F W E B V I E W S“The State of JavaScript on Android in 2015 is… poor”

https://meta.discourse.org/t/the-state-of-javascript-on-android-in-2015-is-poor/33889/1

This is the benchmark most representative of Discourse performance, and the absolute best known Android score for this benchmark is right at ~400ms on a Samsung Galaxy S6. That doesn't seem too bad until you compare.. iPhone 5 → 340ms iPhone 5s → 175ms iPhone 6 → 140ms iPad Air 2 → 120ms iPhone 6s → 60-70ms

29

R E A C T N AT I V E

• Created by Facebook

• Public release on early 2015

• Only iOS first

• Late 2015

• Android support

30

R E A C T N AT I V E A P P R O A C H

• Swap Virtual DOM and DOM Elements with:

• Native Views

• No web views !!!

31

R E A C T N AT I V E A P P R O A C H

Flexbox CSS Subset

All implemented natively

32

R E A C T N AT I V E A P P R O A C H

Dedicated Gestures API

(PanResponder)

no more “fastclick”

33

R E A C T N AT I V E A P P R O A C H

Easy Animation API

Based on Facebook’s Origami

34

R E A C T N AT I V E A P P R O A C H

Some Web Polyfills Navigation, Timers, Fetch, RAF looks exactly the same

35

N AT I V E A P P

R E A C T N AT I V E A P P R O A C H

Thin React to Native Bridge

36

J AVA S C R I P T E N G I N E B Y P L AT F O R M

R E A C T J S

Y O U R A P P C O D E

R E A C T N AT I V E J S L I B R A R Y

N AT I V E A P P

R E A C T N AT I V E A P P R O A C H

37

J AVA S C R I P T E N G I N E B Y P L AT F O R M

R E A C T J S

Y O U R A P P C O D E

R E A C T N AT I V E J S L I B R A R Y

Y O U R N AT I V E A P P L I B

Y O U R J S B R I D G E L I B

N a t i v e a p p

R E A C T N AT I V E A P P R O A C H

38

J a v a s c r i p t e n g i n e B y p l a t f o r m

A w e s o m e B u t t o n . a n d r o i d . j s

AwesomeBu t t on . j s

A w e s o m e B u t t o n . i o s . j s

R E A C T N AT I V E E X T E N S I B I L I T Y

Native Modules and Views can be marked as exported to be accessed on the JS side

Must conform to Module or View contract on each platform

39

R E A C T N AT I V E T O O L S

• ES 6

• FlowType (optional)

• Some ES 7

• async / await

• All backed by Babel

40

Inspector and Profiler

Live / Hot Module Reload

R E A C T N AT I V E T O O L S

41

R E A C T N AT I V E C O M P O N E N T S

ActivityIndicatorIOS DatePickerIOS DrawerLayoutAndroid Image ListView MapView Modal Navigator NavigatorIOS PickerIOS Picker ProgressBarAndroid ProgressViewIOS RefreshControl ScrollView SegmentedControlIOS

SliderIOS StatusBar Switch TabBarIOS TabBarIOS.Item Text TextInput ToolbarAndroid TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback View ViewPagerAndroid WebView

42

R E A C T N AT I V E C O M P O N E N T S

43

ListView MapView Navigator ScrollView Text TextInput View WebView

R E A C T N AT I V E A P I S

ActionSheetIOS Alert AlertIOS Animated AppRegistry AppStateIOS AppState AsyncStorage BackAndroid CameraRoll Clipboard DatePickerAndroid Dimensions IntentAndroid InteractionManager

LayoutAnimation Linking LinkingIOS NativeMethodsMixin NetInfo PanResponder PixelRatio PushNotificationIOS StatusBarIOS StyleSheet TimePickerAndroid ToastAndroid VibrationIOS Vibration

44

R E A C T N AT I V E E C O S Y S T E M45

R E A C T N AT I V E A D O P T I O N

28.000+ 30.000 Github stars

Backed by Facebook

Version 0.21 0.24-rc

Fast iterations

46

PA C K A G E S A N D C O M P O N E N T Shttp

s://js.coach

47

C O D E P U S Hmicrosoft.github.io/code-push/

48

49

50

R E A C T N AT I V E O N W I N D O W S

51

https://blogs.windows.com/buildingapps/2016/04/13/react-native-on-the-universal-windows-platform/

S H O W C A S E F 8 C O N F E R E N C E A P P

52

https://github.com/fbsamples/f8app

S H O W C A S E

53

C H E C K I T O U T

• Install NodeJS and NPM

• Install React Native command line tools

• For iOS development

• Only on Mac and only need Xcode

• For android dev

• Install Android SDK and Genymotion (recommended)

> npm install -g react-native-cli

54

C H E C K I T O U T

• Then just create a project with

• To run the iOS project

• To run the Android project

> react-native init AwesomeProject

> react-native run-ios

> react-native run-android55

56

DEMOMay the demo gods be with us

G I F PA R T Y

57

G I F PA R T Y

58

• Giphy API

• Redux Architecture

• Navigation + ListView + CustomComponents

• Tests with Chai + Mocha

• All available ongithub.com/alvarowolfx/GifPartyReactNative

G I F PA R T Y

59

Let’s Organize the partyLet’s Animate the party

Let’s Make Our Own party

G I F PA R T Y

60

W H O ’ S G O N N A W I N ?

61

W H O ’ S G O N N A W I N ?

R E A C T N AT I V E I O N I C & C O R D O VA

P E R F O R M A N C E V E R Y G O O D G O O D

N AT I V E M O D U L E S G O O D G O O D

S TA R T P R O J E C T V E R Y G O O D P O O R

LT S U P P O R T C U T T I N G E D G E V E R Y G O O D

C O M M U N I T Y P O O R V E R Y G O O D

E C O S Y S T E M P O O R V E R Y G O O D

B A C K E D B Y FA C E B O O K G O O G L E A N D I O N I C

D E B U G G E R & P R O F I L E R V E R Y G O O D P O O R

D E V T O O L S G O O D G O O D

62

T H AT ’ S A L L F O L K S 63

DEVELOPING MOBILE APPS WITH

REACT NATIVE