I limiti della piattaforma Web in ambito Mobile in termini di performance ed UX sono palesi a tutti. D'altro canto il mondo nativo è un ambiente ostile in termini di produttività e DX (Developer Experience). Cosa succederebbe se si potesse sviluppare con gli strumenti (e linguaggi) a cui tutti siamo abituati col Web e produrre App native? Ecco React Native. La vera novità è che React Native è già sull'App Store da Gennaio con "Facebook Groups" e "Facebook Ads Manager". Da Giugno, anche su Play Store. Il mantra suo è: Learn Once, Write Anywhere.

2. Gianluca Espositoesposi.to/native/
@_gesposito
underscore
It's time to go Native!
(with JavaScript
and React Native)

3. @_gespositoWho am I
● Mobile Developer
● Android/Kotlin Developer
● iOS/Swift Developer

5. @_gespositoSo, why Native?
It’s 2015, we have evergreen
Browsers/WebViews.
Don’t we?

6. @_gespositoHow does Hybrid Mobile feel
Source

7. @_gespositoHow does Hybrid Mobile feel
Source

8. Source

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

10. @_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

11. @_gespositoHow does Native feel
Isn’t Native more Hostile for
Developers?

13. @_gesposito
“We built React to solve one
problem:
building large applications
with data that changes over
time.”
Enters React
Source

14. @_gesposito
UI = f (state)
Enters React

15. @_gespositoHow does React feel
var Component = React.createClass({
render: function() {
return (
<div />
);
}
});
module.exports = Component;

16. @_gesposito
Learn once,
write anywhere.
Best of both worlds
Source

17. @_gesposito
DX
Best of both worlds
Source

18. @_gespositoDeveloper Experience
UX = f (DX)

19. @_gesposito
var Component = React.createClass({
render: function() {
return (
<View />
);
}
});
module.exports = Component;
How does React Native feel

20. @_gespositoHow does React Native feel

21. @_gesposito
$ npm install -g react-native-cli
$ react-native init AwesomeProject
Get started

22. @_gespositoRun
To run your app on iOS:
● Open
/Users/gesposito/Code/AwesomeProject/ios/AwesomeP
roject.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

23. @_gesposito
Packager (Dev/Build)
Architecture
Source
Engine

24. @_gespositoPackager
render: function() {
return (
<View>
<Text>
android
</Text>
</View>
);
}
render: function() {
return (
<View>
<Text>
ios
</Text>
</View>
);
}
index.ios.js index.android.js

25. @_gespositoPlatform
render: function() {
if (Platform.OS === 'ios') {
return (
<View />
);
}
return (
null
);
}

26. @_gesposito

27. @_gesposito
ource

28. @_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

29. @_gespositoLayout (Flexbox)
Source

30. @_gesposito
<View
style={styles.container}>
<View style={styles.item}>
<Text>Awesome</Text>
</View>
<View
style={styles.item2}>
<Text>Project</Text>
</View>
</View>
Flexbox
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
},
item: {
flex: 1
},
item2: {
flex: 2
}

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

32. @_gespositoNetwork
componentDidMount: function() {
fetch(API_URL).then(
(response) => response.json()
).then((data) => {
this.setState({
list: data
})
});
}

33. @_gesposito
<View>
<Text>
{'Last refresh: '}
{moment().format("HH:mm")}
</Text>
</View>
Modules
$ npm install -S moment

34. @_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

35. @_gespositoProduction ready?
Source

36. @_gespositoProduction ready?
Source

37. @_gespositoProduction ready?
Source

38. @_gespositoDrawbacks..?
● Window Phone
(hints: css-layout has C# support; React
Native is OS; can still fallback to web in
the meanwhile)
● Cutting edge

39. @_gespositoBut... but why?

40. @_gesposito
I invested in…
Cordova
But why?
Answer

41. @_gesposito
I invested in…
AngularJS
But why?
Answer

42. @_gesposito
JS… u sirius?
But why?
Answer

43. @_gesposito
I invested in…
Native
But why?
Answer

44. esposi.to/native
Thank you!
Leave your feedback on Joind.in!
https://joind.in/16323

45. Codemotion Milan 2015
Conference App