react-native for multi-platform mobile applications @ codemotion rome 2017
TRANSCRIPT
@matteomanchi
Matteo Manchi
ROME 24-25 MARCH 2017
React Native for multi-platform mobile applications
@matteomanchi
https://github.com/Takeno/react-native-sample-codemotion-2017
Sample code
@matteomanchi
■ Web developer friendly■ Native UI (vs WebView)■ Live Reload (vs Compile&Wait)■ Declarative UI (vs Imperative UI)■ Multi-platform support (vs specific support)■ Open Source
Why React Native?
@matteomanchi
Matteo ManchiFull stack developerReact enthusiastCo-founder of RomaJSCEO at ImprontaAdvance@matteomanchihttps://github.com/takeno
About Me
@matteomanchi
Web Developer
My journey to app development
⬇Mobile site version
⬇Mobile application ➡➡ WTF?
@matteomanchi
Web Developer
My journey to app development
⬇Mobile site version
⬇Mobile application ➡
⬇
⬅⬅
@matteomanchi
Codemotion 2015
https://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html
@matteomanchi
React is a JavaScript library for building user interfaces.
■ Just the UI■ One-way data flow■ Virtual DOM■ From Facebook
What is React?
@matteomanchi
■ Component: Everything is a component■ Props: some data passed to child component■ State: some internal data of a component■ JSX: XML-like syntax helps to define component's
structure■ Virtual DOM: tree of custom objects representing a port
of the DOM
Some keywords
@matteomanchi
A framework for building native apps using React.
React Native
Yeah, the same React of web developers
Learn once, write anywhere.
@matteomanchi
■ brew install node■ brew install watchman■ npm install -g react-native-cli■ Install X-Code and/or Android SDK
■ react-native init SampleApp■ cd SampleApp■ react-native run-ios■ react-native run-android
Getting started
@matteomanchi
Style
■ CSS-like declarations with camel-case properties■ style props defined for all native components
■ It can be an array of styles■ StyleSheet module to create multiple classes in one place
and cache them
It supports Flexbox!
@matteomanchi
How it works
http://moduscreate.com/leverage-existing-ios-views-react-native-app/
@matteomanchi
About multi-platform
Business logic in JavaScriptmeans same codebase
between platforms.
@matteomanchi
React Native wraps native UI components
Out-of-the-box
■ TabBar■ Text■ TextInput ■ Touchable ■ TouchableOpacity ■ Touchable Highlight ■ Touchable WithoutFeedback ■ View WebView
■ Activity Indicator■ Date Picker■ Image■ ListView■ MapView■ Navigator■ Picker■ ScrollView■ Slider
@matteomanchi
Out-of-the-box
■ InteractionManager■ Keyboard■ LayoutAnimation■ Linking■ NetInfo■ PanResponder■ PixelRatio■ Settings■ Share■ StatusBarIOS■ TimePickerAndroid■ ToastAndroid■ Vibration
■ ActionSheetIOS■ Alert■ Animated■ AppState■ AsyncStorage■ BackAndroid■ CameraRoll■ Clipboard■ DatePickerAndroid■ Dimensions■ Easing■ Geolocation■ ImageEditor
React Native wraps native API
@matteomanchi
Out-of-the-box
■ GeoLocation■ Timers
● setTimeout● setInterval
■ Flexbox■ Network
● XMLHttpRequest● Fetch
React Native injects polyfills in JS Core
@matteomanchi
Try it now!■ git clone
https://github.com/facebook/react-native.git
■ cd react-native■ npm install■ cd Examples/UIExplorer/■ open UIExplorer.xcodeproj■ Run
UIExplorer
@matteomanchi
React Native’s community is very active■ 46k+ stars on Github■ 6500+ issue solved■ React Native Community on Github
React Native Ecosystem
@matteomanchi
React Native Ecosystem
■ UI Components● native-base● react-native-elements● react-native-material-kit● react-native-material-design
■ Navigation● react-native-router-flux● react-navigation● native-navigation by AirBnB● wix/react-native-navigation
Hundreds of packages published:
■ Native API● react-native-maps by AirBnB● react-native-camera● react-native-onesignal● code-push by Microsoft
@matteomanchi
Specific tools to help your development
■ Deco IDEdecosoftware.com
■ Sketch by expo.iocodepen-like playground for React Nativesketch.expo.io
■ FastlaneContinuous deployment for mobile appsfastlane.tools
■ Create React Native AppStarter pack inspired by create-react-appgithub.com/react-community/create-react-native-app
React Native Ecosystem
@matteomanchi
Facebook Ads Manager
Where is React Native now?
85% shared code between platforms
https://code.facebook.com/.../react-native-how-we-built-the-first-cross-platform
@matteomanchi
Where is React Native now?
Facebook AppFB event section is in RN
http://goo.gl/ziBzOl
@matteomanchi
What’s next?
http://githubstats.com/facebook/react-native
Stars Forks
Pull Requests Issues
React Native’s community is very active
@matteomanchi
“We use theexact same version
internally”
Tadeu ZagalloSoftware Engineer at Facebook
What’s next?
http://goo.gl/ziBzOl
@matteomanchi
We’re looking for
JS enthusiastwho wants to
have funwith this cool technologies.
Contact me @matteomanchi
We’re hiring!
goo.gl/us55X3
More open positions: PHP Dev, Front-End Designer