Introduzione a React Native - Facebook Developer Circle Rome

Matteo Manchi
Fullstack Developer
React Native:
introduzione al framework
per sviluppatori web e mobile

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

@matteomanchi 3
Mobile Development

@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
Imperative UI defines transitions.
Declarative UI defines states.
Imperative UI vs Declarative UI
18

@matteomanchi
Imperative UI
19
AddBadge
SetBadge(5)
AddBadgeAddFireSetBadge(99+)
RemoveFire
SetBadge(5)

@matteomanchi
if(count > 99) {
if(!hasFire())
addFire();
} else {
if(hasFire())
removeFire();
}
if(count === 0) {
if(hasBadge())
removeBadge();
return;
}
if(!hasBadge())
addBadge();
let countText = count > 99 ? '99+' : count.toString();
getBadge().setText(countText);
Imperative UI
20

@matteomanchi
Declarative UI
21
if(count === 0)
return <Bell />;
if(count <= 99)
return (
<Bell>
<Badge count={count} />
</Bell>
);
return (
<Bell className="onFire">
<Badge count="99+" />
</Bell>
);

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

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

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

@matteomanchi
React Native component
27
import React, { Component } from 'react';
import { Text } from 'react-native';
class SampleApp extends Component {
render() {
return (
<Text style={{margin: 40}}>Hello World!</Text>
);
}
}

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

@matteomanchi 31
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.
32
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:
33
Virtual DOM

@matteomanchi 34
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 35
About multi-platform
Business logic in JavaScript
means same codebase
between platforms.

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

@matteomanchi
Style
37
■ 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
38
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 39
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 40
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
41
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
42
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.
43
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.
44
Developer Tools - Hot Reloading

@matteomanchi
With Element Inspector you
can inspect elements and get
their styles.
45
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.
46
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.
47
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
49

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

@matteomanchi
React Native’s community is very active
■ 56k+ stars on Github
■ 10k+ issue solved
■ React Native Community on Github
51
React Native Ecosystem

@matteomanchi 52
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
53
Where is used React Native?
85% shared code between platforms
https://code.facebook.com/.../react-native-how-we-built-the-first-cross-platform

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

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

@matteomanchi
What’s next?
56http://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?
57http://goo.gl/ziBzOl

@matteomanchi
Woah! Woah!
58
Questions?

Introduzione a React Native - Facebook Developer Circle Rome

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Introduzione a React Native - Facebook Developer Circle Rome

Similar a Introduzione a React Native - Facebook Developer Circle Rome (20)

Último

Último (20)

Introduzione a React Native - Facebook Developer Circle Rome