Matteo Manchi gave a presentation on React Native for building multi-platform mobile applications. He discussed how React Native allows using JavaScript to build native mobile apps, providing native performance with cross-platform code sharing. It works by rendering UI components to native platform views using a native bridge. He demonstrated building a sample app, highlighting React Native's declarative programming model and support for many native components and APIs out of the box. Manchi also overviewed the large React Native ecosystem and community, and examples of major companies using it like Facebook.

1. @matteomanchi
Matteo Manchi
ROME 24-25 MARCH 2017
React Native for multi-platform
mobile applications

2. @matteomanchi
https://github.com/Takeno/react-native-sample-codemotion-2017
Sample code

3. @matteomanchi
Mobile Development

4. @matteomanchi
… but necessary.
Mobile Development
Native is hard…

5. @matteomanchi
Different platforms

6. @matteomanchi
Different languages

7. @matteomanchi
Different look

8. @matteomanchi
But what if we can use
technologies we know?
Mobile Development

9. @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?

10. @matteomanchi
Matteo Manchi
Full stack developer
React enthusiast
Co-founder of RomaJS
CEO at ImprontaAdvance
@matteomanchi
https://github.com/takeno
About Me

11. @matteomanchi
Web Developer
My journey to app development
⬇
Mobile site version
⬇
Mobile application ➡➡ WTF?

12. @matteomanchi
Phone Gap with box-shadow

13. @matteomanchi
Web Developer
My journey to app development
⬇
Mobile site version
⬇
Mobile application ➡
⬇
⬅⬅

14. @matteomanchi
Titanium - Red Screen of Death

15. @matteomanchi
Front-end experience

16. @matteomanchi
Codemotion 2015
https://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html

17. @matteomanchi
Let's start from the beginning...

18. @matteomanchi
React is a JavaScript library for building user
interfaces.
■ Just the UI
■ One-way data flow
■ Virtual DOM
■ From Facebook
What is React?

19. @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
Component definition

21. @matteomanchi
A framework for building native apps using React.
React Native
Yeah, the same React of web developers
Learn once, write anywhere.

22. @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
Component definition

24. @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
Demo time!

26. @matteomanchi
How it works
Native Bridge
Your code
JavaScript Core
bundle.js
Native View
render

27. @matteomanchi
How it works
http://moduscreate.com/leverage-existing-ios-views-react-native-app/

28. @matteomanchi
About multi-platform
Business logic in JavaScript
means same codebase
between platforms.

29. @matteomanchi
Platform-specific code
■ if/else method
■ Platform-specific extensions

30. @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

31. @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

32. @matteomanchi
Out-of-the-box
■ GeoLocation
■ Timers
● setTimeout
● setInterval
■ Flexbox
■ Network
● XMLHttpRequest
● Fetch
React Native injects polyfills in JS Core

33. @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
Demo time!

35. @matteomanchi
JSCore allows you to use your favorite
JavaScript modules and tools!
JS Ecosystem

36. @matteomanchi
JS Debugging

37. @matteomanchi
React Native’s community is very active
■ 46k+ stars on Github
■ 6500+ issue solved
■ React Native Community on Github
React Native Ecosystem

38. @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

39. @matteomanchi
Specific tools to help your development
■ Deco IDE
decosoftware.com
■ Sketch by expo.io
codepen-like playground for React Native
sketch.expo.io
■ Fastlane
Continuous deployment for mobile apps
fastlane.tools
■ Create React Native App
Starter pack inspired by create-react-app
github.com/react-community/create-react-native-app
React Native Ecosystem

40. @matteomanchi
■ Hackatons
■ MVP
■ Web Developer teams
■ Simple apps
Where is React Native now?

41. @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

42. @matteomanchi
Where is React Native now?
Facebook App
FB event section is in RN
http://goo.gl/ziBzOl

43. @matteomanchi
What’s next?
http://githubstats.com/facebook/react-native
Stars Forks
Pull Requests Issues
React Native’s community is very active

44. @matteomanchi
“We use the
exact same version
internally”
Tadeu Zagallo
Software Engineer at Facebook
What’s next?
http://goo.gl/ziBzOl

45. @matteomanchi
Woah! Woah!
Questions?

46. @matteomanchi
ROME 24-25 MARCH 2017
THANK YOU!
@matteomanchi

47. @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