Matteo Manchi - React Native for multi-platform mobile applications - Codemotion Milan 2017
0 likes474 views
This document presents a talk by Matteo Manchi on React Native for multi-platform mobile applications, outlining its benefits and challenges in mobile development. It covers the history, core concepts, and tools of React Native, including its virtual DOM and native bridging capabilities, while emphasizing the shared codebase across platforms. The presentation also showcases the active community and applications utilizing React Native, highlighting its significance in modern mobile app development.
Matteo Manchi - React Native for multi-platform mobile applications - Codemotion Milan 2017
- 1. @matteomanchi Matteo Manchi ROME 10-11 NOVEMBER 2017 React Native for multi-platform mobile applications 1
- 2. @matteomanchi If you want to participate actively with this talk, please install Expo app on your smartphone. 2 Attention
- 4. @matteomanchi 4 Mobile Development Native is hard…
- 8. @matteomanchi … but necessary. 8 Mobile Development Native is hard…
- 9. @matteomanchi Matteo Manchi } CEO at Impronta Advance } Full stack developer } React enthusiast } Co-founder of RomaJS } Maintainer of italia/design-react } @matteomanchi } https://github.com/takeno 9 About Me
- 10. @matteomanchi Web Developer My journey to app development 10 ⬇ Mobile site version ⬇ Mobile application ➡➡ WTF?
- 11. @matteomanchi Phone Gap with box-shadow 11
- 12. @matteomanchi Web Developer My journey to app development 12 ⬇ Mobile site version ⬇ Mobile application ➡ ⬇ ⬅⬅
- 13. @matteomanchi Titanium - Red Screen of Death 13
- 15. @matteomanchi React is a JavaScript library for building user interfaces developed by Facebook. It allows you to define your UI using Components, which are reusable, and it helps UI updates through Declarative UI. All this overhead is minimized by Virtual DOM. 15 What is React?
- 16. @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 16 Some keywords
- 17. @matteomanchi Component definition 17 class Hello extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } ReactDOM.render( <Hello name="Milan" />, document.getElementById('container') );
- 18. @matteomanchi A framework for building native apps using React. 18 React Native Yeah, the same React of web developers Learn once, write anywhere.
- 19. @matteomanchi ■ Summer 2013: React Native started as project in Facebook’s internal hackaton ■ January 2015: During the React.js-conf, React Native first public demo was shown ■ March 2015: React Native has been published as open source project. A brief history of React Native 19
- 21. @matteomanchi ■ Summer 2013: React Native started as project in Facebook’s internal hackaton ■ January 2015: During the React.js-conf, React Native first public demo was shown ■ March 2015: React Native has been published as open source project. ■ May 2016: search terms of React Native surpassed iOS and Android development, according to Google Trends A brief history of React Native 21
- 24. @matteomanchi ■ npm install -g create-react-native-app ■ create-react-native-app MyNativeApp ■ cd MyNativeApp ■ npm start ■ Install Expo app for Android and iOS ■ Connect your device 24 Getting started
- 25. @matteomanchi ■ React-native-based company in Palo Alto ■ Huge contribution to React Native ■ Maintainers of create-react-native-app ■ Expo SDK ■ XDE ■ snack.expo.io Expo 25
- 26. @matteomanchi 26 How it works Native Bridge Your code JavaScript Core bundle.js Native View render
- 27. @matteomanchi React renders your entire app as a plain object, totally decoupled from DOM. On every change, it performs the diff of previous object tree with the new one. Then it change only the partial DOM which is mutated. 27 Virtual DOM <div> Hello {this.props.name} </div> Js-plain version JSX Transpiler Object Tree react engine DOM react-dom engine
- 28. @matteomanchi JSX: <div>Hello {this.props.name}</div> JS: React.createElement("div", null, "Hello ", this.props.name); Object: DOM: 28 Virtual DOM
- 29. @matteomanchi 29 From Virtual DOM to Native <Text> Hello {this.props.name} </Text> Js-plain version JSX Transpiler Object Tree react engine Native react-native engine
- 30. @matteomanchi 30 About multi-platform Business logic in JavaScript means same codebase between platforms.
- 31. @matteomanchi JSCore allows you to use your favorite JavaScript modules and tools! 31 JS Ecosystem
- 32. @matteomanchi Style 32 ■ 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!
- 33. @matteomanchi React Native wraps native UI components 33 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
- 34. @matteomanchi 34 Out-of-the-box ■ InteractionManager ■ Keyboard ■ LayoutAnimation ■ Linking ■ NetInfo ■ PanResponder ■ PixelRatio ■ Settings ■ Share ■ StatusBar ■ TimePickerAndroid ■ ToastAndroid ■ Vibration ■ ActionSheetIOS ■ Alert ■ Animated ■ AppState ■ AsyncStorage ■ BackAndroid ■ CameraRoll ■ Clipboard ■ DatePickerAndroid ■ Dimensions ■ Easing ■ Geolocation ■ ImageEditor React Native wraps native API
- 35. @matteomanchi 35 Out-of-the-box ■ GeoLocation ■ Timers ● setTimeout ● setInterval ■ Flexbox ■ Network ● XMLHttpRequest ● Fetch React Native injects polyfills in JS Core
- 36. @matteomanchi React Native have useful tools to improve your development experience. How to show Dev Menu? ■ Shaking your device ■ Cmd + D on iOS Simulator ■ F2 on android emulator 36 Developer Tools
- 37. @matteomanchi It reloads the js code, so you can see changes without recompile the entire app. ■ Cmd + R on iOS Simulator ■ Type r twice on android emulator 37 Developer Tools - Reload
- 38. @matteomanchi You can speed up your development times by having your app reload automatically any time your code changes. To do this, enable Live Reload from dev menu. 38 Developer Tools - Live Reload
- 39. @matteomanchi You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling Hot Reloading from the Developer Menu. This will allow you to persist the app's state through reloads. 39 Developer Tools - Hot Reloading
- 40. @matteomanchi With Element Inspector you can inspect elements and get their styles. 40 Developer Tools - Element Inspector
- 41. @matteomanchi In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. Instead, warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. 41 Developer Tools - Yellow and Red boxes
- 42. @matteomanchi You can inspect native views as you do with browser inspector. Install react-dev-tool to connect automatically to your app. 42 Developer Tools - React Dev Tools
- 44. @matteomanchi Create React Native App hides native projects folder and uses Expo app to let you work on your own app without need to build. ■ 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. You can back to standard setup any time with: npm run eject This process is not reversible. Back to native projects 44
- 45. @matteomanchi ■ brew install node ■ brew install watchman ■ npm install -g react-native-cli ■ Install XCode and/or Android SDK ■ react-native init SampleApp ■ cd SampleApp ■ react-native run-ios ■ react-native run-android Back to native projects 45
- 46. @matteomanchi React Native’s community is very active ■ 55k+ stars on Github ■ 9800+ issue solved ■ React Native Community on Github 46 React Native Ecosystem
- 47. @matteomanchi 47 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
- 48. @matteomanchi Facebook Ads Manager 48 Where is used React Native? 85% shared code between platforms https://code.facebook.com/.../react-native-how-we-built-the-first-cross-platform
- 49. @matteomanchi 49 Where is used React Native? Facebook App FB event section is in RN http://goo.gl/ziBzOl
- 50. @matteomanchi 50 Who is using React Native? Facebook Facebook Ads Manager Instagram AirBnB Skype Tesla Wallmart Discord
- 51. @matteomanchi What’s next? 51http://githubstats.com/facebook/react-native Stars Forks Pull Requests Issues React Native’s community is very active
- 52. @matteomanchi “We use the exact same version internally” Tadeu Zagallo Software Engineer at Facebook What’s next? 52http://goo.gl/ziBzOl
- 54. @matteomanchi ROME 10-11 NOVEMBER 2017 THANK YOU! @matteomanchi 54