Demo project https://github.com/alvarowolfx/GifPartyReactNative Talk that I gave on FrontInCuiaba 2016.

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

4. DevMT

5. R E A C T
W H A T I S R E A C T ?
5

6. R E A C T
Just the V of MVC
6
Created by Facebook 2013-2016

7. R E A C T
7
D ATA D O M
f(data) = View
One-way Data Flow

8. R E A C T
8
Simple and Declarative
JSX

9. R E A C T
9
JSX is a syntactic sugar
It’s just Javascript

10. R E A C T
Everything is a Component
10

11. R E A C T
Bring your own Architecture
11

12. R E A C T I N T E R N A L S
H O W R E A C T W O R K S ?
12

13. R E A C T I N T E R N A L S
13
Virtual DOM

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

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

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

41. Inspector and Profiler
Live / Hot Module Reload
R E A C T N AT I V E T O O L S
41

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

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

46. 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

47. PA C K A G E S A N D C O M P O N E N T S
https://js.coach
47

48. C O D E P U S H
microsoft.github.io/code-push/
48

49. 49

50. 50

51. 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/

52. 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

53. S H O W C A S E
53

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

56. 56
DEMO
May the demo gods be with us

57. G I F PA R T Y
57

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

60. G I F PA R T Y
60

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

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