Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan...
45
-
Upload
codemotion -
Category
Technology
-
view
544 -
download
2
Transcript of Gianluca Esposito - It's time to go Native! (with JavaScript and React Native) | Codemotion Milan...
Gianluca Espositoesposi.to/native/@_gesposito
underscoreCuriosity Driven DeveloperFront-end Developer
It's time to go Native! (with JavaScript and React Native)
@_gespositoWho am I
● Mobile Developer● Android/Kotlin Developer● iOS/Swift Developer
@_gespositoSo, why Native?
It’s 2015, we have evergreen Browsers/WebViews.Don’t we?
@_gespositoHow does Hybrid Mobile feel
Source
@_gespositoHow does Hybrid Mobile feel
Source
Source
@_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
@_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
@_gespositoHow does Native feel
Isn’t Native more Hostile for Developers?
@_gesposito
“We built React to solve one problem: building large applications with data that changes over time.”
Enters React
Source
@_gesposito
UI = f (state)
Enters React
@_gespositoHow does React feel
var Component = React.createClass({
render: function() {
return (
<div />
);
}
});
module.exports = Component;
@_gesposito
Learn once, write anywhere.
Best of both worlds
Source
@_gesposito
DX
Best of both worlds
Source
@_gespositoDeveloper Experience
UX = f (DX)
@_gesposito
var Component = React.createClass({
render: function() {
return (
<View />
);
}
});
module.exports = Component;
How does React Native feel
@_gespositoHow does React Native feel
@_gesposito
$ npm install -g react-native-cli
$ react-native init AwesomeProject
Get started
@_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
@_gesposito
Packager (Dev/Build)
Architecture
Source
Engine
@_gespositoPackager
render: function() {
return (
<View>
<Text>
android</Text>
</View>
);
}
render: function() {
return (
<View>
<Text>
ios</Text>
</View>
);
}
index.ios.js index.android.js
@_gespositoPlatform
render: function() {
if (Platform.OS === 'ios') {
return (
<View />
);
}
return (
null
);
}
@_gesposito
@_gesposito
Source
@_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
@_gespositoLayout (Flexbox)
Source
@_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',
},
});
@_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
}
@_gespositoNetwork
componentDidMount: function() {
fetch(API_URL).then(
(response) => response.json()
).then((data) => {
this.setState({
list: data
})
});
}
@_gesposito
<View>
<Text>
{'Last refresh: '}
{moment().format("HH:mm")}
</Text>
</View>
Modules
$ npm install -S moment
@_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
@_gespositoProduction ready?
Source
@_gespositoProduction ready?
Source
@_gespositoProduction ready?
Source
@_gespositoDrawbacks..?
● Window Phone(hints: css-layout has C# support; React Native is OS; can still fallback to web in the meanwhile)
● Cutting edge
@_gespositoBut... but why?
@_gesposito
I invested in…Cordova
But why?
Answer
@_gesposito
I invested in…AngularJS
But why?
Answer
@_gesposito
JS… u sirius?
But why?
Answer
@_gesposito
I invested in…Native
But why?
Answer
esposi.to/native
Thank you!Leave your feedback on Joind.in!https://joind.in/16323
Codemotion Milan 2015 Conference App
