React Native Milano JS - 2 Febbraio 2016

1. Guido Bellomo
Lead Front End Developer
www.gild.com
guido.bellomo@gmail.com

2. - React
- Flux & Redux
- React Native
- UmarellsApp

3. Backbone.View
Backbone.View.extend({
render: function() {
this.$el.html(
'<div>...my-markup...</div>'
);
}
});

4. Backbone.View
Backbone.View.extend({
render: function() {
this.$el.html(
'<input type="text" /><button>OK</button>'
);
}
});

5. React
React.createClass({
render: () => {
return <div>
<input type="text" /><button>OK</button>
</div>;
}
});

6. React
React.createClass({
getInitialState: () => {name: 'Guido'},
render: () => {
return <div>
<span>Hi, {this.state.name}</span>
<input type="text" /><button>OK</button>
</div>;
}
});

7. React
React.createClass({
getDefaultProps: () => {name: 'Guido'},
render: () => {
return <div>
<span>Hi, {this.props.name}</span>
<input type="text" /><button>OK</button>
</div>;
}
});

8. Uno state è tutto cio' che non
è controllabile o osservabile
dall'esterno

9. Il problema con MVC

10. Il problema con MVC

11. Il problema con MVC

12. Il problema con MVC

13. Flux

14. React
render: () => {
var {city, state, country} = this.props;
return <div>
<Country value={country}/>
<State value={state} enabled={country == 'US'} />
<City value={city}
lookupState={state}
lookupCountry={country}
enabled={country != null &&
(state != null || country != 'US')}
</div>;
}

15. React
// ...
dispatch('resetCountry');
// ...
resetCountry: => {
myView.setProps({
country: null,
state: null,
city: null
});
}

17. Aggiungete stati ai vostri componenti
come se colui che deve scrivere il relativo
getter/setter e logica di aggiornamento
fosse un violento psicopatico che sa dove
abitate
JohnWood
(React Edition)

18. React
React.createClass({
shouldComponentUpdate: () => {
return this.props.comment.isChanged();
}
});

19. React
React.createClass({
shouldComponentUpdate: (nextProps) => {
return this.props.comment !== nextProps.comment;
}
});

20. Redux
1. Stato dell'app in un unico store
2. Action per modificare lo store
3. Reducers = pure functions

21. Redux
store.dispatch({
type: 'ADD_POI',
poi: {
latitude: 23,
longitude: 45
}
});

22. Redux
function pois(state = [], action) {
switch (action.type) {
case 'ADD_POI':
return return [...state, action.poi]
default:
return state
}
}
var store = createStore(reducer);

23. Redux
+ Infiniti do/redo
+ Debug
+ Testing

24. Nativo (ObjectiveC, Swift)
HTML5 + wrapper
JS Bridge

25. HTML + Wrapper
+ sviluppo rapido
+ versione mobile del sito gia' pronta
+ porting piu' facile
+ ecosistema JS/HTML
- prestazioni non ottimali
- UI piatta su tutti i dispositivi
- API solo HTML5

26. Titanium
+ sviluppo rapido
+ utilizzo UI e ottimizzazioni native
+ ecosistema JS
+ prestazioni
- programmazione imperativa
- API frastagliate

27. React Native
+ sviluppo rapido
+ utilizzo UI e ottimizzazioni native
+ ecosistema JS
+ prestazioni
+ programmazione dichiarativa (JSX)
- API frastagliate

28. Programmazione Imperativa
var label = Ti.createLabel({label: 'My Label'});
var input = Ti.createText({})
var view = Ti.createView({});
view.append(label);
view.append(input);
container.append(view); // finally

29. Programmazione Dichiarativa (JSX)
Form = React.createClass({
render: function() {
return <View>
<label>My Label</label>
<input type="text" />
<View>;
}
})

30. Umarell (s.m. bolognese - Omarello, ometto)
Umarells (p.m. omarelli, ometti, pensionati
bolognesismo + inglesismo globish)

36. Debugging

37. Debugging
var Page = React.createClass({
render: function() {
debugger;
return <Map pois={this.state.pois}/>
);
}
});

39. Firebase

40. Bind with Firebase 1/2
var POI = React.createClass({
componentWillMount: function() {
this.ref = new Firebase(
Config.pathFireBase + '/comments/' + poi.id
);
this.bindAsArray(this.ref, 'comments');
}
});

41. Bind with Firebase 2/2
var POI = React.createClass({
render: function() {
return _(this.state.comments).map((comment) {
return <Comment comment={comment} key={comment.id}/>
});
}
});

43. MapView &Annotations
render: () => {
return <MapView
annotations={_(this.state.pois).map((poi) => {
return {
latitude: poi.latitude,
longitude: poi.longitude
};
})}/>;
}

44. GeoHash

45. GeoHash
URL
1
10

46. GeoHash
URL
11
1
0

47. GeoHash
URL
110
10

48. GeoHash
URL
11011
0

49. GeoHash
1. Precisione migliora con la lunghezza
2. Punti vicini iniziano con lo stesso hash

50. Set Geofire Key
// ...
this.geoFire.set(newPoi.key(), [
latitude,
longitude
]);
// ...

51. MapView &Annotations
render: () => {
return <MapView
onRegionChangeComplete={(region) => this.setState({region})}
annotations={_(this.state.pois).map((poi) => {
return {
latitude: poi.latitude,
longitude: poi.longitude
};
})}/>;
}

52. Bind with Geofire
componentWillMount: function() {
var {region} = this.state;
var ref = new Firebase(Config.pathFireBase + '/geofire');
this.geoFire = new GeoFire(ref);
this.geoQuery = this.geoFire.query({
center: [region.latitude, region.longitude],
radius: 20 // km
});
...

53. Bind with Geofire
var {pois} = this.state;
this.geoQuery.on('key_entered',(key) => {
var ref = new Firebase(Config.pathFireBase + '/pois/' + key);
ref.once('value', (snapshot) => {
this.setState({
pois: _.union(pois, snapshot.val())
});
});
});

54. Bind with Geofire
var {pois} = this.state;
this.geoQuery.on('key_exited',(key) => {
this.setState({
pois: _(pois).reject((poi) => poi.id == key)
});
});

55. Conclusioni
+ indistinguibile da app nativa
+ tool di debug
+ integrato con XCode
+ divertente!
- Ancora alla 0.18 ...

56. Stay hungry, stai in coda