Date post: | 05-Apr-2017 |
Category: |
Technology |
Upload: | codemotion |
View: | 21 times |
Download: | 0 times |
@matteomanchi
Matteo Manchi
ROME 24-25 MARCH 2017
React Native for multi-platform mobile applications
@matteomanchi
Mobile Development
@matteomanchi
… but necessary.
Mobile Development
Native is hard…
@matteomanchi
Different platforms
@matteomanchi
Different languages
@matteomanchi
Different look
@matteomanchi
But what if we can use technologies we know?
Mobile Development
@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
Phone Gap with box-shadow
@matteomanchi
Web Developer
My journey to app development
⬇Mobile site version
⬇Mobile application ➡
⬇
⬅⬅
@matteomanchi
Titanium - Red Screen of Death
@matteomanchi
Front-end experience
@matteomanchi
Codemotion 2015
https://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html
@matteomanchi
Let's start from the beginning...
@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
Component definition
@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
Component definition
@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
Demo time!
@matteomanchi
How it works
Native Bridge
Your code
JavaScript Core
bundle.js
Native View
render
@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
Platform-specific code
■ if/else method
■ Platform-specific extensions
@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
Demo time!
@matteomanchi
JSCore allows you to use your favoriteJavaScript modules and tools!
JS Ecosystem
@matteomanchi
JS Debugging
@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 IDEhttps://www.decosoftware.com
■ Sketch by expo.iocodepen-like playground for React Nativehttps://sketch.expo.io
■ FastlaneContinuous deployment for mobile appshttps://sketch.expo.io/
■ Create React Native AppStarter pack inspired by create-react-apphttps://github.com/react-community/create-react-native-app
React Native Ecosystem
@matteomanchi
■ Hackatons■ MVP■ Web Developer teams■ Simple apps
Where is React Native now?
@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
Woah! Woah!
Questions?
@matteomanchi
ROME 24-25 MARCH 2017
THANK YOU!@matteomanchi
@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