webinar - matteo manchi: dal web al nativo: introduzione a react native
TRANSCRIPT
@matteomanchi
Matteo Manchi} Full stack developer} React enthusiast} Co-founder of RomaJS} CEO at ImprontaAdvance} @matteomanchi} https://github.com/takeno
7
About me
@matteomanchi
A framework for building native apps using React.
9
React Native
Yeah, the same React of web developers.
Learn once, write anywhere.
@matteomanchi
■ Everybody knows JavaScriptEasy to Learn.
■ Native BuildReal native mobile apps.
■ JS ReloadingNo time wasted in recompiling.
■ UI ComponentsReact Native wraps existing native UI controls
10
Why React Native
@matteomanchi
■ npm install -g create-react-native-app■ create-react-native-app AwesomeProject
■ npm run ios■ npm run android■ npm start■ npm test
12
Getting started - The modern way
@matteomanchi 15
About multi-platform
Business logic in JavaScriptmeans same codebase
between platforms.
@matteomanchi
Style
17
■ 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
■ React-native-based company in Palo Alto■ Huge contribution to React Native■ Mantainers of create-react-native-app■ Expo SDK■ XDE■ snack.expo.io
18
Expo.io
@matteomanchi
React Native wraps native UI components
21
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 22
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 23
Out-of-the-box
■ GeoLocation■ Timers
● setTimeout● setInterval
■ Flexbox■ Network
● XMLHttpRequest● Fetch
React Native injects polyfills in JS Core
@matteomanchi
■ Like in create-react-app, eject is the process of setting up your own custom build for your app.
■ When I need to do it?■ I want to include external native libraries■ I want to write my custom native module■ I want to publish my app to Stores.
25
npm run eject
@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
26
Getting started - The native way
@matteomanchi
React Native’s community is very active■ 53k+ stars on Github■ 9300+ issue solved■ React Native Community on Github
27
React Native Ecosystem
@matteomanchi
React Native community
28http://githubstats.com/facebook/react-native
Stars Forks
Pull Requests Issues
React Native’s community is very active
@matteomanchi
Facebook Ads Manager
29
Where is React Native now?
85% shared code between platforms
https://code.facebook.com/.../react-native-how-we-built-the-first-cross-platform
@matteomanchi 30
Where is React Native now?
Facebook AppFB event section is in RN
http://goo.gl/ziBzOl
@matteomanchi
“We use theexact same version
internally”
Tadeu ZagalloSoftware Engineer at Facebook
What’s next?
31http://goo.gl/ziBzOl
@matteomanchi
■ facebook.github.io/react-native■ React Native Newsletter■ medium.com/@AlaouiSolaimani/react-native-why-you-sh
ould-care-b30e5f960399■ reactnative.com/why-react-native-is-better-than-native-
for-your-mobile-application■ slideshare.net/TadeuZagallo/react-native-internals
32
Resources
Potete venire a trovarmi a Codemotion Milano!
Workshop:React Native: build and optimize multi-platform
mobile applicationsIl 9 novembre 2017, 09:00-18:00
Talk:React Native for multi-platform mobile applications
Il 10 novembre, 16:10-16.50
CODEMOTION MILANO10-11 NOVEMBRE 2017http://milan2017.codemotionworld.com/
Ci vediamo a
Ricordati di controllare l’email!☺