![Page 2: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/2.jpg)
Gianluca Espositoesposi.to/native/@_gesposito
underscoreCuriosity Driven DeveloperFront-end Developer
It's time to go Native! (with JavaScript and React Native)
![Page 3: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/3.jpg)
@_gespositoWho am I
● Mobile Developer● Android/Kotlin Developer● iOS/Swift Developer
![Page 5: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/5.jpg)
@_gespositoSo, why Native?
It’s 2015, we have evergreen Browsers/WebViews.Don’t we?
![Page 6: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/6.jpg)
@_gespositoHow does Hybrid Mobile feel
Source
![Page 7: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/7.jpg)
@_gespositoHow does Hybrid Mobile feel
Source
![Page 8: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/8.jpg)
Source
![Page 9: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/9.jpg)
@_gespositoHow Hybrid Mobile performs...
“[...] best known Android score for this benchmark is right at ~400ms on a Samsung Galaxy S6. That doesn't seem too bad until you compare..
iPhone 5 → 340ms[...]iPhone 6s → 60-70ms”Source
![Page 10: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/10.jpg)
@_gespositoHow Hybrid Mobile performs...
“[...] It seems the Android manufacturers are more interested in slapping n slow CPU cores on a die than they are in producing very fast CPU cores. And this is quite punishing when it comes to JavaScript.”
Source
![Page 11: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/11.jpg)
@_gespositoHow does Native feel
Isn’t Native more Hostile for Developers?
![Page 13: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/13.jpg)
@_gesposito
“We built React to solve one problem: building large applications with data that changes over time.”
Enters React
Source
![Page 14: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/14.jpg)
@_gesposito
UI = f (state)
Enters React
![Page 15: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/15.jpg)
@_gespositoHow does React feel
var Component = React.createClass({
render: function() {
return (
<div />
);
}
});
module.exports = Component;
![Page 16: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/16.jpg)
@_gesposito
Learn once, write anywhere.
Best of both worlds
Source
![Page 17: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/17.jpg)
@_gesposito
DX
Best of both worlds
Source
![Page 18: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/18.jpg)
@_gespositoDeveloper Experience
UX = f (DX)
![Page 19: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/19.jpg)
@_gesposito
var Component = React.createClass({
render: function() {
return (
<View />
);
}
});
module.exports = Component;
How does React Native feel
![Page 20: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/20.jpg)
@_gespositoHow does React Native feel
![Page 21: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/21.jpg)
@_gesposito
$ npm install -g react-native-cli
$ react-native init AwesomeProject
Get started
![Page 22: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/22.jpg)
@_gespositoRun
To run your app on iOS:● Open
/Users/gesposito/Code/AwesomeProject/ios/AwesomeProject.xcodeproj in Xcode
● Hit Run button
To run your app on Android:● Have an Android emulator running, or a device
connected● cd /Users/gesposito/Code/AwesomeProject● react-native run-android
Source
![Page 23: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/23.jpg)
@_gesposito
Packager (Dev/Build)
Architecture
Source
Engine
![Page 24: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/24.jpg)
@_gespositoPackager
render: function() {
return (
<View>
<Text>
android</Text>
</View>
);
}
render: function() {
return (
<View>
<Text>
ios</Text>
</View>
);
}
index.ios.js index.android.js
![Page 25: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/25.jpg)
@_gespositoPlatform
render: function() {
if (Platform.OS === 'ios') {
return (
<View />
);
}
return (
null
);
}
![Page 26: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/26.jpg)
@_gesposito
![Page 27: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/27.jpg)
@_gesposito
Source
![Page 28: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/28.jpg)
@_gesposito
var styles =
StyleSheet.create({
container: {
padding: 20
},
debug: {
borderWidth: 1,
borderColor: 'red'
}
});
<View
style={styles.container}
>
<View>
<Text
style={styles.debug}
>
Awesome
</Text>
</View>
</View>
Style Sheets
![Page 29: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/29.jpg)
@_gespositoLayout (Flexbox)
Source
![Page 30: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/30.jpg)
@_gesposito
<View
style={styles.container}>
<View style={styles.item}>
<Text>Awesome</Text>
</View>
<View
style={styles.item2}>
<Text>Project</Text>
</View>
</View>
style={styles.flexContent}>
Flexbox
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
},
item: {
flex: 1
},
item2: {
flex: 2
}
var styles = StyleSheet.
create({
flexContent: {
textAlign: 'center',
},
});
![Page 31: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/31.jpg)
@_gesposito
<Image
style={styles.image}
source={{
uri: 'http://cdn.com/YWRpWml.png'
}}
/>
<Image
style={styles.image}
source={
require('../img/local.png')
}
/>
Assets
image: {
width: 40,
height: 40
}
![Page 32: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/32.jpg)
@_gespositoNetwork
componentDidMount: function() {
fetch(API_URL).then(
(response) => response.json()
).then((data) => {
this.setState({
list: data
})
});
}
![Page 33: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/33.jpg)
@_gesposito
<View>
<Text>
{'Last refresh: '}
{moment().format("HH:mm")}
</Text>
</View>
Modules
$ npm install -S moment
![Page 34: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/34.jpg)
@_gesposito
{
"name": "CodemotionMilan2015",
"version": "0.0.1",
"scripts": {
"start": "node_modules/react-native/packager/packager.
sh",
"bundle-ios": "react-native bundle --entry-file index.
ios.js --platform ios --bundle-output ios/main.jsbundle --dev
false",
"bundle-android": "react-native bundle --platform android
--dev false --entry-file index.android.js --bundle-output
android/app/src/main/assets/index.android.bundle --assets-
dest android/app/src/main/res/"
}, [...]
}
Bundle
Source
![Page 35: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/35.jpg)
@_gespositoProduction ready?
Source
![Page 36: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/36.jpg)
@_gespositoProduction ready?
Source
![Page 37: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/37.jpg)
@_gespositoProduction ready?
Source
![Page 38: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/38.jpg)
@_gespositoDrawbacks..?
● Window Phone(hints: css-layout has C# support; React Native is OS; can still fallback to web in the meanwhile)
● Cutting edge
![Page 39: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/39.jpg)
@_gespositoBut... but why?
![Page 40: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/40.jpg)
@_gesposito
I invested in…Cordova
But why?
Answer
![Page 41: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/41.jpg)
@_gesposito
I invested in…AngularJS
But why?
Answer
![Page 42: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/42.jpg)
@_gesposito
JS… u sirius?
But why?
Answer
![Page 43: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/43.jpg)
@_gesposito
I invested in…Native
But why?
Answer
![Page 44: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/44.jpg)
esposi.to/native
Thank you!Leave your feedback on Joind.in!https://joind.in/16323
![Page 45: Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan 2015](https://reader034.vdocuments.mx/reader034/viewer/2022051521/587cef421a28ab564b8b5dc9/html5/thumbnails/45.jpg)
Codemotion Milan 2015 Conference App