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

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

R E A C TW H A T I S R E A C T ?

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

R E A C T I N T E R N A L S

• Virtual Dom

• Batching updates

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

R E A C T

• JSX

• Javascript Extension

• Syntactic Sugar

• Compiles to JS

R E A C T P U S H E D T H E W E B F O R W A 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

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 ?

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 ?

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

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

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

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

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

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 PJ 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 R Y

N AT I V E L I B R A R YJ AVA S C R I P T W R A P P E R

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

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

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

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

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

PA C K A G E S A N D C O M P O N E N T Shttp

s://js.coach

C O D E P U S Hmicrosoft.github.io/code-push/

S H O W C A S E

D E M O

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

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

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

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

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