developing apps with react native
TRANSCRIPT
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
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