React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017
-
Upload
codemotion -
Category
Technology
-
view
22 -
download
0
Transcript of React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017
![Page 1: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/1.jpg)
@matteomanchi
Matteo Manchi
ROME 24-25 MARCH 2017
React Native for multi-platform mobile applications
![Page 2: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/2.jpg)
@matteomanchi
Mobile Development
![Page 3: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/3.jpg)
@matteomanchi
… but necessary.
Mobile Development
Native is hard…
![Page 4: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/4.jpg)
@matteomanchi
Different platforms
![Page 5: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/5.jpg)
@matteomanchi
Different languages
![Page 6: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/6.jpg)
@matteomanchi
Different look
![Page 7: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/7.jpg)
@matteomanchi
But what if we can use technologies we know?
Mobile Development
![Page 8: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/8.jpg)
@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?
![Page 9: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/9.jpg)
@matteomanchi
Matteo ManchiFull stack developerReact enthusiastCo-founder of RomaJSCEO at ImprontaAdvance@matteomanchihttps://github.com/takeno
About Me
![Page 10: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/10.jpg)
@matteomanchi
Web Developer
My journey to app development
⬇Mobile site version
⬇Mobile application ➡➡ WTF?
![Page 11: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/11.jpg)
@matteomanchi
Phone Gap with box-shadow
![Page 12: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/12.jpg)
@matteomanchi
Web Developer
My journey to app development
⬇Mobile site version
⬇Mobile application ➡
⬇
⬅⬅
![Page 13: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/13.jpg)
@matteomanchi
Titanium - Red Screen of Death
![Page 14: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/14.jpg)
@matteomanchi
Front-end experience
![Page 15: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/15.jpg)
@matteomanchi
Codemotion 2015
https://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html
![Page 16: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/16.jpg)
@matteomanchi
Let's start from the beginning...
![Page 17: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/17.jpg)
@matteomanchi
React is a JavaScript library for building user interfaces.
■ Just the UI■ One-way data flow■ Virtual DOM■ From Facebook
What is React?
![Page 18: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/18.jpg)
@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
![Page 19: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/19.jpg)
@matteomanchi
Component definition
![Page 20: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/20.jpg)
@matteomanchi
A framework for building native apps using React.
React Native
Yeah, the same React of web developers
Learn once, write anywhere.
![Page 21: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/21.jpg)
@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
![Page 22: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/22.jpg)
@matteomanchi
Component definition
![Page 23: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/23.jpg)
@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!
![Page 24: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/24.jpg)
@matteomanchi
Demo time!
![Page 25: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/25.jpg)
@matteomanchi
How it works
Native Bridge
Your code
JavaScript Core
bundle.js
Native View
render
![Page 26: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/26.jpg)
@matteomanchi
How it works
http://moduscreate.com/leverage-existing-ios-views-react-native-app/
![Page 27: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/27.jpg)
@matteomanchi
About multi-platform
Business logic in JavaScriptmeans same codebase
between platforms.
![Page 28: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/28.jpg)
@matteomanchi
Platform-specific code
■ if/else method
■ Platform-specific extensions
![Page 29: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/29.jpg)
@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
![Page 30: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/30.jpg)
@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
![Page 31: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/31.jpg)
@matteomanchi
Out-of-the-box
■ GeoLocation■ Timers
● setTimeout● setInterval
■ Flexbox■ Network
● XMLHttpRequest● Fetch
React Native injects polyfills in JS Core
![Page 32: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/32.jpg)
@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
![Page 33: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/33.jpg)
@matteomanchi
Demo time!
![Page 34: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/34.jpg)
@matteomanchi
JSCore allows you to use your favoriteJavaScript modules and tools!
JS Ecosystem
![Page 35: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/35.jpg)
@matteomanchi
JS Debugging
![Page 36: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/36.jpg)
@matteomanchi
React Native’s community is very active■ 46k+ stars on Github■ 6500+ issue solved■ React Native Community on Github
React Native Ecosystem
![Page 37: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/37.jpg)
@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
![Page 38: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/38.jpg)
@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
![Page 39: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/39.jpg)
@matteomanchi
■ Hackatons■ MVP■ Web Developer teams■ Simple apps
Where is React Native now?
![Page 40: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/40.jpg)
@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
![Page 41: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/41.jpg)
@matteomanchi
Where is React Native now?
Facebook AppFB event section is in RN
http://goo.gl/ziBzOl
![Page 42: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/42.jpg)
@matteomanchi
What’s next?
http://githubstats.com/facebook/react-native
Stars Forks
Pull Requests Issues
React Native’s community is very active
![Page 43: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/43.jpg)
@matteomanchi
“We use theexact same version
internally”
Tadeu ZagalloSoftware Engineer at Facebook
What’s next?
http://goo.gl/ziBzOl
![Page 44: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/44.jpg)
@matteomanchi
Woah! Woah!
Questions?
![Page 45: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/45.jpg)
@matteomanchi
ROME 24-25 MARCH 2017
THANK YOU!@matteomanchi
![Page 46: React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017](https://reader031.fdocuments.in/reader031/viewer/2022022410/58e4a2131a28aba3458b6293/html5/thumbnails/46.jpg)
@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