ICT role in 21st century education and its challenges
Developing Apps With React Native
1. 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
2. • 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
14. R E A C T I N T E R N A L S
14
Batch Updates
Blazing Fast Diff Algorithm
15. 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 Won
P R O P S
16. 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
17. R E A C T P U S H E D T H E W E B F O R WA R D
17
Many cutting edge web technologies
18. R E A C T P U S H E D T H E W E B F O R WA R D
18
Modern JS
Many projects using
ES6 and ES7(!!!)
19. R E A C T P U S H E D T H E W E B F O R WA R D
19
More Functional Programming
in Javascript
Immutability
20. R E A C T P U S H E D T H E W E B F O R WA R D
• Awesome tooling and packaging
• Hot code reload
20
21. R E A C T P U S H E D T H E W E B F O R WA R D
Advanced application
architectures
21
22. 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
23. R E A C T N AT I V E
W H A T I S R E A C T N A T I V E ?
23
24. 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
25. 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
26. A LT E R N AT I V E S T O N AT I V E
26
Hybrid apps with Cordova
27. A LT E R N AT I V E S T O N AT I V E
27
Many plugins (!!!)
Awesome frameworks
29. 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
30. 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
31. 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
32. 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
33. 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
34. 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
35. 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
36. 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 RY
37. 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 RY
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
38. 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
Aw e s o m e B u t t o n . a n d ro i d . j s
A w e s o m e B u tt o n . j s
Aw e s o m e B u t t o n . i o s . j s
39. 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
40. 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
42. 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
43. 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
44. 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
54. 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
55. 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-android
55
58. G I F PA R T Y
58
• Giphy API
• Redux Architecture
• Navigation + ListView + CustomComponents
• Tests with Chai + Mocha
• All available on
github.com/alvarowolfx/GifPartyReactNative
59. G I F PA R T Y
59
Let’s Organize the party
Let’s Animate the party
Let’s Make Our Own party
62. 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 RY 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 RY 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 RY G O O D
C O M M U N I T Y P O O R V E RY G O O D
E C O S Y S T E M P O O R V E RY 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 RY 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
63. T H AT ’ S A L L F O L K S
63
DEVELOPING MOBILE APPS WITH
REACT NATIVE