React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017
2 likes1,362 views
The document is a presentation by Matteo Manchi on using React Native for building multi-platform mobile applications, highlighting its advantages such as native UI, live reload, and a declarative style. It discusses the ecosystem surrounding React Native, including community involvement, various tools, and libraries available for development. The talk also illustrates that React Native allows web developers to leverage their existing skills, promoting shared codebases across different platforms.
React Native for multi-platform mobile applications - Matteo Manchi - Codemotion Rome 2017
- 1. @matteomanchi Matteo Manchi ROME 24-25 MARCH 2017 React Native for multi-platform mobile applications
- 3. @matteomanchi … but necessary. Mobile Development Native is hard…
- 7. @matteomanchi But what if we can use technologies we know? Mobile Development
- 8. @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?
- 9. @matteomanchi Matteo Manchi Full stack developer React enthusiast Co-founder of RomaJS CEO at ImprontaAdvance @matteomanchi https://github.com/takeno About Me
- 10. @matteomanchi Web Developer My journey to app development ⬇ Mobile site version ⬇ Mobile application ➡➡ WTF?
- 11. @matteomanchi Phone Gap with box-shadow
- 12. @matteomanchi Web Developer My journey to app development ⬇ Mobile site version ⬇ Mobile application ➡ ⬇ ⬅⬅
- 13. @matteomanchi Titanium - Red Screen of Death
- 16. @matteomanchi Let's start from the beginning...
- 17. @matteomanchi React is a JavaScript library for building user interfaces. ■ Just the UI ■ One-way data flow ■ Virtual DOM ■ From Facebook What is React?
- 18. @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
- 20. @matteomanchi A framework for building native apps using React. React Native Yeah, the same React of web developers Learn once, write anywhere.
- 21. @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
- 23. @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!
- 25. @matteomanchi How it works Native Bridge Your code JavaScript Core bundle.js Native View render
- 27. @matteomanchi About multi-platform Business logic in JavaScript means same codebase between platforms.
- 28. @matteomanchi Platform-specific code ■ if/else method ■ Platform-specific extensions
- 29. @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
- 30. @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
- 31. @matteomanchi Out-of-the-box ■ GeoLocation ■ Timers ● setTimeout ● setInterval ■ Flexbox ■ Network ● XMLHttpRequest ● Fetch React Native injects polyfills in JS Core
- 32. @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
- 34. @matteomanchi JSCore allows you to use your favorite JavaScript modules and tools! JS Ecosystem
- 36. @matteomanchi React Native’s community is very active ■ 46k+ stars on Github ■ 6500+ issue solved ■ React Native Community on Github React Native Ecosystem
- 37. @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
- 38. @matteomanchi Specific tools to help your development ■ Deco IDE https://www.decosoftware.com ■ Sketch by expo.io codepen-like playground for React Native https://sketch.expo.io ■ Fastlane Continuous deployment for mobile apps https://sketch.expo.io/ ■ Create React Native App Starter pack inspired by create-react-app https://github.com/react-community/create-react-native-app React Native Ecosystem
- 39. @matteomanchi ■ Hackatons ■ MVP ■ Web Developer teams ■ Simple apps Where is React Native now?
- 40. @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
- 41. @matteomanchi Where is React Native now? Facebook App FB event section is in RN http://goo.gl/ziBzOl
- 42. @matteomanchi What’s next? http://githubstats.com/facebook/react-native Stars Forks Pull Requests Issues React Native’s community is very active
- 43. @matteomanchi “We use the exact same version internally” Tadeu Zagallo Software Engineer at Facebook What’s next? http://goo.gl/ziBzOl
- 45. @matteomanchi ROME 24-25 MARCH 2017 THANK YOU! @matteomanchi
- 46. @matteomanchi We’re looking for JS enthusiast who wants to have fun with this cool technologies. Contact me @matteomanchi We’re hiring! goo.gl/us55X3 More open positions: PHP Dev, Front-End Designer