Matteo Manchi - React Native for multi-platform mobile applications - Codemotion Milan 2017

@matteomanchi
Matteo Manchi
ROME 10-11 NOVEMBER 2017
React Native for multi-platform
mobile applications
1

@matteomanchi
If you want to participate actively with this talk,
please install Expo app on your smartphone.
2
Attention

@matteomanchi
Mobile Development
3

@matteomanchi 4
Mobile Development
Native is hard…

@matteomanchi 5
Different platforms

@matteomanchi 6
Different languages

@matteomanchi 7
Different look

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

@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

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

@matteomanchi
Phone Gap with box-shadow
11

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

@matteomanchi
Titanium - Red Screen of Death
13

@matteomanchi
Front-end experience
14

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

@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

@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')
);

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

@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

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

@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

@matteomanchi
Component definition
22

@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

@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

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

@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

@matteomanchi
JSX: <div>Hello {this.props.name}</div>
JS: React.createElement("div", null,
"Hello ", this.props.name);
Object:
DOM:
28
Virtual DOM

@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

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

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

@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!

@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

@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

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

@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

@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

@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

@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

@matteomanchi
With Element Inspector you
can inspect elements and get
their styles.
40
Developer Tools - Element Inspector

@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

@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

@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

@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

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

@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

@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

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

@matteomanchi 50
Who is using React Native?
Facebook Facebook
Ads Manager
Instagram AirBnB
Skype Tesla Wallmart Discord

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

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

@matteomanchi
Woah! Woah!
53
Questions?

@matteomanchi
ROME 10-11 NOVEMBER 2017
THANK YOU!
@matteomanchi
54

Matteo Manchi - React Native for multi-platform mobile applications - Codemotion Milan 2017

More Related Content

What's hot

Viewers also liked

Similar to Matteo Manchi - React Native for multi-platform mobile applications - Codemotion Milan 2017

More from Codemotion

Recently uploaded

Matteo Manchi - React Native for multi-platform mobile applications - Codemotion Milan 2017