Developing Apps With React Native
-
Upload
alvaro-viebrantz -
Category
Technology
-
view
756 -
download
2
Transcript of Developing Apps With React Native
![Page 1: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/1.jpg)
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
![Page 2: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/2.jpg)
• 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
![Page 3: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/3.jpg)
![Page 4: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/4.jpg)
DevMT
![Page 5: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/5.jpg)
R E A C TW H A T I S R E A C T ?
5
![Page 6: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/6.jpg)
R E A C T
Just the V of MVC
6
Created by Facebook 2013-2016
![Page 7: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/7.jpg)
R E A C T
7
D ATA D O M
f(data) = View
One-way Data Flow
![Page 8: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/8.jpg)
R E A C T
8
Simple and DeclarativeJSX
![Page 9: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/9.jpg)
R E A C T
9
JSX is a syntactic sugar
It’s just Javascript
![Page 10: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/10.jpg)
R E A C T
Everything is a Component
10
![Page 11: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/11.jpg)
R E A C T
Bring your own Architecture
11
![Page 12: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/12.jpg)
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
![Page 13: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/13.jpg)
R E A C T I N T E R N A L S
13
Virtual DOM
![Page 14: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/14.jpg)
R E A C T I N T E R N A L S
14
Batch Updates Blazing Fast Diff Algorithm
![Page 15: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/15.jpg)
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
![Page 16: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/16.jpg)
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
![Page 17: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/17.jpg)
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
![Page 18: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/18.jpg)
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(!!!)
![Page 19: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/19.jpg)
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
![Page 20: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/20.jpg)
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
![Page 21: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/21.jpg)
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
![Page 22: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/22.jpg)
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
![Page 23: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/23.jpg)
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
![Page 24: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/24.jpg)
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
![Page 25: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/25.jpg)
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
![Page 26: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/26.jpg)
A LT E R N AT I V E S T O N AT I V E
26
Hybrid apps with Cordova
![Page 27: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/27.jpg)
A LT E R N AT I V E S T O N AT I V E
27
Many plugins (!!!)Awesome frameworks
![Page 28: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/28.jpg)
A LT E R N AT I V E S T O N AT I V E
28
![Page 29: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/29.jpg)
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
![Page 30: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/30.jpg)
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
![Page 31: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/31.jpg)
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
![Page 32: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/32.jpg)
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
![Page 33: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/33.jpg)
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
![Page 34: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/34.jpg)
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
![Page 35: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/35.jpg)
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
![Page 36: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/36.jpg)
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
![Page 37: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/37.jpg)
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
![Page 38: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/38.jpg)
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
![Page 39: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/39.jpg)
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
![Page 40: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/40.jpg)
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
![Page 41: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/41.jpg)
Inspector and Profiler
Live / Hot Module Reload
R E A C T N AT I V E T O O L S
41
![Page 42: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/42.jpg)
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
![Page 43: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/43.jpg)
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
![Page 44: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/44.jpg)
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
![Page 45: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/45.jpg)
R E A C T N AT I V E E C O S Y S T E M45
![Page 46: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/46.jpg)
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
![Page 48: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/48.jpg)
C O D E P U S Hmicrosoft.github.io/code-push/
48
![Page 49: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/49.jpg)
49
![Page 50: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/50.jpg)
50
![Page 51: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/51.jpg)
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/
![Page 52: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/52.jpg)
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
![Page 53: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/53.jpg)
S H O W C A S E
53
![Page 54: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/54.jpg)
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
![Page 55: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/55.jpg)
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
![Page 56: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/56.jpg)
56
DEMOMay the demo gods be with us
![Page 57: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/57.jpg)
G I F PA R T Y
57
![Page 58: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/58.jpg)
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
![Page 59: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/59.jpg)
G I F PA R T Y
59
Let’s Organize the partyLet’s Animate the party
Let’s Make Our Own party
![Page 60: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/60.jpg)
G I F PA R T Y
60
![Page 61: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/61.jpg)
W H O ’ S G O N N A W I N ?
61
![Page 62: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/62.jpg)
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
![Page 63: Developing Apps With React Native](https://reader034.fdocuments.net/reader034/viewer/2022042517/5871ab581a28abda6a8b5841/html5/thumbnails/63.jpg)
T H AT ’ S A L L F O L K S 63
DEVELOPING MOBILE APPS WITH
REACT NATIVE