The document provides an overview of React and React Native, highlighting key concepts, component architectures, and performance comparisons with native applications. It discusses the advantages of React Native for mobile development, including ecosystem and tooling, while addressing challenges such as platform-specific code. Additionally, the document outlines various React Native components, tools, and setup instructions for developing applications across iOS and Android platforms.

1. R E A C T N AT I V E
F I R S T I M P R E S S I O N S
A LVA R O V I E B R A N T Z

2. Alvaro Viebrantz
IT Analyst at Sefaz-MT
Former Fullstack developer at Procurix
Bsc. Computer Science at UFMT
Golang and React enthusiast
Cuiabá, MT, Brasil
alvarowolfx
@alvinhuuu

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

4. R E A C T
• Just the V of MVC (UI)
• Choose your architecture
• MVC
• Flux
• Redux
• Everything its a component
• Data flow
D ATA
D O M

5. R E A C T I N T E R N A L S
• Virtual Dom
• Batching updates

6. R E A C T I N T E R N A L S
• State vs Props
• State is what you own (Mutable)
• Props is what you receive (Immutable)
• View lifecycle
M O U N T U P D AT E U N M O U N T
• componentWillMount
• render
• componentDidMount
• shouldUpdateComponent
• componentWillUpdate
• render
• componentDidUpdate
• componentWillUnmount

7. R E A C T
• JSX
• Javascript Extension
• Syntactic Sugar
• Compiles to JS

8. R E A C T P U S H E D T H E W E B F O R WA R D
• Many cutting edge web technologies
• Immutability
• Modern JS
• Many projects using ES 6 and ES 7 (!!!)
• Awesome tooling and packaging
• Webpack, Browserify and NPM
• Hot code reload
• Advanced application architectures

9. 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 ?

10. R E A C T N AT I V E
• React showed to us some good things :
• Ecosystem
• Tooling
• Performance
• Components
• Advanced Architecture
• Why not apply this for mobile development ?

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

12. A LT E R N AT I V E S T O N AT I V E
• Hybrid apps - Cordova
• Webviews + HTML + CSS + JS
• JS - Native bridge
• Plenty of plugins and integrations
• Ionic 1 and 2 (Really good Cordova based framework)
• But fail to re-implement all native components using JS

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

14. 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 !!!

15. R E A C T N AT I V E A P P R O A C H
• Flexbox and a CSS Subset implemented natively
• PanResponder wrapper for native gestures
• Butter smooth Animated API
• A thin React - Native bridge
• Some web polyfills
• Geolocation, fetch, timers and animations api

16. 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 spec
N AT I V E A P P
J AVA S C R I P T E N G I N E
R E A C T J S
N AT I V E 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
N AT I V E L I B R A RY
J AVA S C R I P T
W R A P P E R

17. R E A C T N AT I V E T O O L S
• ES 6 + Flow by default ( Babel FTW )
• Debug with chrome dev tools.
• Inspector
• Profiler
• Live reload

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

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

20. R E A C T N AT I V E E C O S Y S T E M

21. R E A C T N AT I V E A D O P T I O N
• 28.000+ Github start
• Backed by Facebook
• Version 0.22-rc
• Fast iterations

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

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

24. S H O W C A S E

25. D E M O

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

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

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

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

30. R E A C T N AT I V E
F I R S T I M P R E S S I O N S
T H AT ` S A L L F O L K S
devmt.herokuapp.com
DevMT